/** */function RainyDay(canvasid, sourceid, width, height, opacity, blur) { this.canvasid = canvasid; this.canvas = document.getElementById(canvasid); this.sourceid = sourceid; this.img = document.getElementById(sourceid); // draw and blur the backgroiund image this.prepareBackground(blur ? blur : 20, width, height); this.w = this.canvas.width; this.h = this.canvas.height; // create the glass canv...
在线演示本地下载原文：https://www.cnblogs.com/qixidi/p/10070767.html
伸缩布局（一）;1.创建一个flexbox容器。.flexconfainer{display:-webkit-flex;display:flex; }2.flex项目显示；flex项目是flex容器的子元素，他们沿着主要轴和横轴定位，默认的是沿着水平轴排列一行，可以通过flex-direction来改变主轴方向修改为column,其默认值是row。3.项目列显示;.flexcontainer{display:-webkit-flex;display:flex;-webkit-flex-direction:colmn;flex-direction:column; }4.还有两个属性值:如果是垂直方向的有...
5.1动画的基本使用制作动画分为两步:1. 先定义动画2.再使用(调用)动画1.用keyframes定义动画(类似定义类选择器)@keyframes 动画名称{0%{}100%{}} 动画序列●0%是动画的开始, 100%是动画的完成。这样的规则就是动画序列。●在 @keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。●动画是使元素从一 种祥式逐渐变化为另-种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,...
CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有 Mozilla（Firefox，Flock等）、WebKit（Safari、Chrome等）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。 本文照常忽略IE不管，我们主要看看在 Mozilla、Webkit、Opera 下的应用，当然在 IE 下也...
<form><div><input id="item1" type="radio" name="item" value="选项一" checked><label for="item1"></label><span>选项一</span></div><div><input id="item2" type="radio" name="item" value="选项二"><label for="item2"></label><span>选项二</span></div> </form> div {position: relative;line-height: 30px;}input[type="radio"] {width: 20px;height: 20px;opacity: 0;}label {position: absolute;left: 5px;top: 3px;w...
学习前端有一段时间了，一直在看书上的理论知识，而实战项目却很少。师兄常说，想要知道自己的实力有多少，知识掌握了多少，最好的方法就是去实践了，实践出真知嘛。于是决定在这个假期里，主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个HTML5+CSS3静态页面布局的练习，查缺补漏知识点并且总结在实践过程中遇到的一些错误。页面的设计稿主要是网络上找来了的，也尝试自己切图、测量位置、获得内容的属性等等...
找在IE下实现css3效果的圆角时找到的一个实例，没有测试，不知道使用起来怎么样，有兴趣的朋友可以自己试一下:复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>在线演示 - LHGCALENDAR</title> <script type="text/javascript" src="http://www.qiuzhiquan.com/images/...
1.display 中 block, inline, inline-block 的区别 1).默认情况下, block 宽度占满整个浏览器, inline 宽度等于其内容的宽度 2).每行只容纳一个 block 元素, 但可以并列容纳多个 inline 元素 3).block 元素宽、高、行高等可以更改, inline 元素宽、高、行高等不可更改 4).应用 inline-block 的元素呈现为内联对象, 周围元素保持在同一行, 但可以设置宽度和高度地块元素的属性(这样可以使用 li + inline-block 制作导航...
动画：animation animations这物似乎还是只在webkit，moz核心的浏览器上起作用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画</title> <style type="text/css"> @-moz-keyframes resize{ 0% { padding: 0; } 50% { padding: 0 20px; background-color:rgba(190, 206, 235, 0.2); } 100% { padding: 0 100px; background-color:rg...
三角碎片以非常缓慢的速度旋转移动，如果使用JS实现会出现一像素一像素移动的卡顿使用CSS3会获得非常理想的效果transform: translate3d(80px, 150px, 0px) rotate(1220deg); transition: transform 30s linear 0s; 上面一个属性表示图像变换 translate3d(80px, 150px, 0px) 表示X轴偏移80px， Y轴偏移150pxrotate(1220deg) 表示在此过程中旋转1220°transition: transform 30s linear 0s;表示动画时间30秒速度方式：linear 延迟0s原...
http://www.w3cplus.com/原文：http://www.cnblogs.com/web123/p/3546371.html
1、border-radius:圆角效果 （1）border-radius:5px 5px 5px 5px ;如果有4个参数，代表4个角 （2）border-radius:5px 5px；2个参数，代表top-left,bottom-rigt和top-right,bottom-left; （2）border-radius:5px 5px 5px；3个参数，代表top-lett和top-right，bottom-left和bottom-right；2、box-shadow: 添加阴影 第一个参数是往右偏移: box-shadow:10px 0 0 0 red ； 第二个参数是往下...
网上看到一个css3动画，地址最开始思路是，里面一个DIV方块，右上角一个同样大小的div1,向上,向右平移8px，设div1的border-top,border-right值形成，如图所示再用clip截取一半，形成半折角。同理左下角建一个div,向左、向下平移8px,设border-left,border-bottom值，用clip截取形成 <div class="cont"><div class="bb"></div> </div> html,body{margin: 0;padding: 0;background: #101010;}.cont{width:500px;margin: 150px auto;}....
现在我们可以选择浏览器非常多，所以浏览器的环境也是种类繁多，同一个浏览器也是包含各种不同的版本，不同的版本之间的渲染方法也存在差异，，它们支持的 HTML5、CSS3 特性恐怕也不尽相同。这种情况于是造成Web开发者在开发网站时，要面对数量庞大的浏览器种类。如果开发时按最低标准，比如 IE6不支持的特性，我们统统不用，那就没有必要写这篇文章了；但我想这种情况极少，更多的开发，是在现代浏览器上使用它们支持的特性，而在...