1、CSS 动画2D3D转换
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS 动画2D3D转换</title> <style> div { width: 100px; height: 100px; background-color: lightgray; } .div3 { transform: translate(200px,100px); -webkit-transform: translate(200px,100px); /*sagari chrome*/ -ms-transform: translate(200px,100px); /*IE*/ -o-transform: translate(200px,100px); /*opera*/ -moz-transform: translate(200px,100px); /*firefox*/ } .div2 { transform: rotate(180deg); -webkit-transform: rotate(180deg); /*sagari chrome*/ } .div3 { transform: scale(1,2); -webkit-transform: scale(1,2); /*sagari chrome*/ } .div4 { transform: skew(20deg,20deg); -webkit-transform: scale(1,2); /*sagari chrome*/ } .div5 { transform: rotateX(200deg); -webkit-transform: rotateX(200deg); /*sagari chrome*/ } </style> </head> <body> <div>这是一个初始效果</div> <br /> <div class="div5">改变后的效果</div> </body> </html>
2、CSS 动画过渡
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS 动画过渡</title> <style> div { width: 100px; height: 100px; background-color: lightgray; -webkit-transition: width 2s,height 2s,-webkit-transform 2s; transition: width 2s,height 2s,transform 2s; -webkit-transition-delay:2s; } div:hover { width: 200px; height: 200px; transform: rotate(360deg); -webkit-transform: rotate(360deg); } </style> </head> <body> <div>效果展示</div> </body> </html>
3、CSS 动画效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS 动画效果</title> <style> div { width: 100px; height: 100px; background-color: lightgray; position: relative; animation: anim 3s infinite alternate; -webkit-animation: anim 3s infinite alternate; } @keyframes anim{ 0%{ background-color:lightgray;left:0px;top:0px} 25%{background-color:blue;left:200px;top:0px} 50%{background-color:aqua;left:200px;top:200px} 70%{background-color:red;left:0px;top:200px} 100%{background-color:lightgray;left:0px;top:0px} } </style> </head> <body> <div>动画效果</div> </body> </html>
4、CSS 动画效果 多列
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS 动画效果 多列</title> <style> .div1 { column-count: 4; -webkit-column-count: 4; -webkit-column-gap: 30px; column-gap: 30px; column-rule: 5px outset #ff0000; -webkit-column-rule: 5px outset #808080; } </style> </head> <body> <div class="div1"> 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ 大家好，我是渣渣辉，是兄弟就来砍我！ </div> </body> </html>
5、CSS 动画效果 瀑布流
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS 动画效果 瀑布流</title> <style> img { width: 200px; /*height: 300px;*/ } .container { column-width: 200px; -webkit-column-width: 200px; -webkit-column-gap: 3px; column-gap: 3px; } .container div { width: 200px; margin: 3px; } </style> </head> <body> <div class="container"> <div><img src="Scripts/img/beautiful/1.jpg" /></div> <div><img src="Scripts/img/beautiful/2.jpg" /></div> <div><img src="Scripts/img/beautiful/3.jpg" /></div> <div><img src="Scripts/img/beautiful/4.jpg" /></div> <div><img src="Scripts/img/beautiful/5.jpg" /></div> <div><img src="Scripts/img/beautiful/6.jpg" /></div> <div><img src="Scripts/img/beautiful/7.jpg" /></div> <div><img src="Scripts/img/beautiful/1.jpg" /></div> <div><img src="Scripts/img/beautiful/2.jpg" /></div> <div><img src="Scripts/img/beautiful/3.jpg" /></div> <div><img src="Scripts/img/beautiful/4.jpg" /></div> <div><img src="Scripts/img/beautiful/5.jpg" /></div> <div><img src="Scripts/img/beautiful/6.jpg" /></div> <div><img src="Scripts/img/beautiful/7.jpg" /></div> <div><img src="Scripts/img/beautiful/1.jpg" /></div> <div><img src="Scripts/img/beautiful/2.jpg" /></div> <div><img src="Scripts/img/beautiful/3.jpg" /></div> <div><img src="Scripts/img/beautiful/4.jpg" /></div> <div><img src="Scripts/img/beautiful/5.jpg" /></div> <div><img src="Scripts/img/beautiful/6.jpg" /></div> <div><img src="Scripts/img/beautiful/7.jpg" /></div> </div> </body> </html>