9种常用CSS动画_三有鹿_css动画有哪些

未知 02-07 3861

复制可用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>9种css动画</title> <link rel="stylesheet" type="text/css" href="css/demo2.css"/> <link rel="icon" sizes="any" mask="" href="./img/baidu.svg"> <style> @charset "utf-8"; *{padding: 0;margin: 0;} figure{ width: 33.3%; height: 365px; float: left; overflow: hidden; position: relative; } img{ height:100%; transition: all 1s; } figure:hover img{ -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); opacity: 0.5; } ul,li{ list-style: none; } h2,p,li,div{ position: absolute; transition: all 0.5s; color: #000; } /* 动画1 */ .effect1 h2{ left:10%; bottom:30%; } .effect1 p{ left:10%; top:100%; color: #000; } .effect1:hover h2{ -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } .effect1:hover p{ /*-webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px);*/ top:80%; } /* 动画2 */ .effect2 h2{ top:20%; left:15%; } .effect2 ul li{ background-color: #fff; color: #000; } .effect2 ul li:nth-child(1){ top:45%; left:15%; -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); transform: translateX(-200px);; } .effect2 ul li:nth-child(2){ top:55%; left:15%; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); transform: translateX(-200px);; } .effect2 ul li:nth-child(3){ top:65%; left:15%; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); -ms-transform: translateX(-300px); -o-transform: translateX(-300px); transform: translateX(-300px);; } .effect2:hover ul li{ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } /* 动画3 */ .effect3 h2{ top:20%; left:15%; } .effect3 p{ width: 100%; bottom: 0; color: #000; background-color: #fff; line-height: 24px; text-indent: 32px; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px);; } .effect3:hover p{ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } /* 动画4 */ .effect4 div{ width: 150%; height:50%; top:100%; background-color: #fff; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; /*-webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg);*/ } .effect4:hover div{ -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); } .effect4 ul li{ bottom: 25px; color: #000; font-size: 18px; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .effect4 ul li:nth-child(2){ right:30px; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .effect4 ul li:nth-child(1){ right:90px; } .effect4:hover ul li{ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } /* 动画5 */ .effect5 h2{ left:20%; top:20%; -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } .effect5:hover h2{ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effect5 p{ left:25%; top:30%; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .effect5:hover p{ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .effect5 div{ width: 70%; height:70%; left:15%; top:15%; border:2px solid #f66; -webkit-transform: translateY(-350px) rotate(0); -moz-transform: translateY(-350px) rotate(0); -ms-transform: translateY(-350px) rotate(0); -o-transform: translateY(-350px) rotate(0); transform: translateY(-350px) rotate(0); } .effect5:hover div{ -webkit-transform:translateY(0) rotate(360deg) ; -moz-transform:translateY(0) rotate(360deg) ; -ms-transform:translateY(0) rotate(360deg) ; -o-transform:translateY(0) rotate(360deg) ; transform:translateY(0) rotate(360deg) ; } /* 动画6 */ .effect6 h2{ top:20%; left:10%; -webkit-transform: skew(90deg); -moz-transform: skew(90deg); -ms-transform: skew(90deg); -o-transform: skew(90deg); transform: skew(90deg); } .effect6 p{ left:10%;top:30%; -webkit-transform: skew(90deg); -moz-transform: skew(90deg); -ms-transform: skew(90deg); -o-transform: skew(90deg); transform: skew(90deg); } .effect6:hover h2,.effect6:hover p{ -webkit-transform: skew(0); -moz-transform: skew(0); -ms-transform: skew(0); -o-transform: skew(0); transform: skew(0); } /* 动画7 */ .effect7 img{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .effect7 div{ width: 70%; height:70%; border: 2px solid #000; left:15%; top:15%; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .effect7 h2{ left:20%;top:20%; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .effect7 p{ left:20%;top:40%; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .effect7:hover *{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* 动画8 */ .effect8 h2{ left: 20%; top:20%; -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } .effect8:hover h2{ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effect8 p{ left:25%; top:30%; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); opacity: 0; } .effect8:hover p{ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .effect8 #borderW{ /*width: 80%; height:70%; left: 10%; top:15%; border: 1px solid #fff; border-left:0; border-right: 0; -webkit-transform: scale(0,1); -moz-transform: scale(0,1); -ms-transform: scale(0,1); -o-transform: scale(0,1); transform: scale(0,1);*/ width: 0; left:50%; height:70%; top:15%; border: 1px solid #000; border-left:0; border-right: 0; } .effect8:hover #borderW{ /*-webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1);*/ left:10%; width: 80%; } .effect8 #borderH{ width: 70%; height:80%; left:15%; top:10%; border:1px solid #000; border-top:0; border-bottom:0; -webkit-transform: scale(1,0); -moz-transform: scale(1,0); -ms-transform: scale(1,0); -o-transform: scale(1,0); transform: scale(1,0); } .effect8:hover #borderH{ -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } </style> </head> <body>  <figure class="effect1"> <img src="img/pic1.jpg"/> <h2>平移动画</h2> <p>最简单的平移动画</p> </figure>  <figure class="effect2"> <img src="img/pic2.jpg"/> <h2>平移动画</h2> <ul > <li>多条图片简介文字</li> <li>逐一飞入动画</li> <li> 利用动画延时达到效果</li> </ul> </figure>  <figure class="effect3"> <img src="img/pic3.jpg"/> <h2>底部滑出动画</h2> <p> translate属性可以制作多种动画，一个简单的位置移动可以制作出多种效果，重要看制作师们能否开动想象力。 </p> </figure>  <figure class="effect4"> <img src="img/pic4.jpg"/> <div></div> <ul> <li>info1</li> <li>info2</li> </ul> </figure>  <figure class="effect5"> <img src="img/pic5.jpg"/> <h2>旋转飞入</h2> <p>通过旋转和位移</p> <div></div> </figure>  <figure class="effect6"> <img src="img/pic6.jpg"/> <h2>扭曲飞入飞</h2> <p>去通过扭曲和位移，制作出飞入的效果。扭曲属到达90度。元素就看不见了</p> </figure>  <figure class="effect7"> <img src="img/pic7.jpg"/> <div></div> <h2>缩放</h2> <p>缩放缩放缩放缩放缩放</p> </figure>  <figure class="effect8"> <img src="img/pic8.jpg"/> <h2>绘制线条效果</h2> <p>通过缩放属性绘制边框线条</p> <div id="borderW"></div> <div id="borderH"></div> </figure>  <figure class="effect9"> <img src="img/pic9.jpg"/> </figure> </body> </html>