-
<!DOCTYPE html> <html> <head> <title></title> <style> #block{ width:400px; //宽度 height:400px; //高度 background-color: #69e; //背景颜色 margin:() auto; //居中显示 } #block:hover{background-color: red;;} //块元素，背景颜色的变化 </style> </head> <body> <div id="block"> </div> </body> </html>查看全部
-
【css3的动画功能】 transition:从一个属性值平滑的过渡到另一个属性值 animation：通过关键帧的技术在网页上产生更加复杂的效果 transition <过渡属性名称><过渡时间> 【各浏览器兼容写法】 -webkit-transition 谷歌、苹果 -moz-transition 火狐 -o-transition opera 举例： -webkit-transition:color 1s; //让元素颜色的变化持续1秒钟 -webkit-transition:height 3s;查看全部
-
CSS3查看全部
-
过渡模式查看全部
-
这图做的太逼真了查看全部
-
transition:<过渡属性名称><过渡时间><过渡模式>查看全部
-
要考虑浏览器的兼容性：chorme、safari： -webkit-transition firefox：-moz-transition opera: -o-transition查看全部
-
使用transform属性调整元素 -translate 12px; -rotate 23deg;查看全部
-
-webkit-transition:color 1s; ==>( -webkit-transition-property:color; -webkit-transition-duration:1s; )查看全部
-
过渡： transition:过渡属性名称 过渡时间 transtion:color 1s; transtion:height 3s; 浏览器： -webkit-transition -moz-transtion -o-transition查看全部
-
把代码贴在下面了，但是不出来效果，还是一下子就突然出来了。我把时间加长到500S，还是这样子.查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ABC</title> <style type="text/css" media="screen"> #wrapper{ width:1024px; margin:0 auto; } .progress-bar{ height: 40px; width: 40px; background-color: #69c; } .progress-bar:hover{ width:960px; } #bar1{ -webkit-transition: width 500s linear; } #bar2{ -webkit-transtion: width 500s ease; } #bar3{ -webkit-transition: width 500s ease-in; } #bar4{ -webkit-transition: width 500s ease -out; } #bar5{ -webkit-transition: width 500s ease-in-out; } </style> </head>查看全部
-
<body> <div id="wrapper"> <p>linear</p> <div class="progress-bar",id="bar1"> </div> <p>linear</p> <div class="progress-bar",id="bar1"> </div> <p>ease</p> <div class="progress-bar",id="bar2"> </div> <p>ease-in</p> <div class="progress-bar",id="bar3"> </div> <p>ease-out</p> <div class="progress-bar",id="bar4"> </div> <p>ease-in-out</p> <div class="progress-bar",id="bar4"> </div> </div> </body> </html>查看全部
-
多个效果查看全部
-
设置3D场景查看全部
举报
0/150
提交
取消