css3实现动画效果完整代码demo
过渡渐隐
适合两张图片调整其中一个透明度，完整代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <title> CSS3实现过渡渐隐动画效果 </title> </head> <style> .pics{ position: relative; width: 600px; height: 400px; margin: 100px auto; } .pic1{ width: 600px; height: 400px; } @keyframes picDraw { 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } } .pic2{ position: absolute; width: 600px; height: 400px; left: 0; top: 0; -webkit-animation: picDraw 5s ease-in-out infinite; } </style> <body> <div class="pics"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565070048390&di=d17ca71c421fb37f010670b13f8469a0&imgtype=0&src=http%3A%2F%2Fent.workercn.cn%2Fhtml%2Ffiles%2F2019-01%2F17%2F20190117152902813736386.jpg" alt="" class="pic1"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565070048392&di=25517e3e1c388458ca1fa224f252a09b&imgtype=0&src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-5fba3a93e46665204b748149d4125ffb_bh.jpg" alt="" class="pic2"> </div> <script type="text/javascript"> </script> </body> </html>
涟漪
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <title> CSS3实现涟漪呼吸扩散动画效果 </title> </head> <style> body{ background: #ccc; } .live{ position: relative; width: 100px; height: 100px; margin:50px auto; } .live img{ width: 100px; height: 100px; border-radius: 50%; z-index: 0; } @keyframes living { 0%{ transform: scale(1); opacity: 0.5; } 50%{ transform: scale(1.5); opacity: 0; /*圆形放大的同时，透明度逐渐减小为0*/ } 100%{ transform: scale(1); opacity: 0.5; } } .live span{ position: absolute; width: 100px; height: 100px; left: 0; bottom: 0; background: #fff; border-radius: 50%; -webkit-animation: living 3s linear infinite; z-index: -1; } .live span:nth-child(2){ -webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/ } </style> <body> <div class="live"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565069234221&di=10912e3e1dd6bcda6ee79b0b03f6a50d&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F18%2F04%2F03%2Fe24685134482a8c6353b06522409a12d.jpg" alt=""> <span></span> <span></span> </div> <script type="text/javascript"> </script> </body> </html>
放大缩小
呼吸的心 完整代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <title> CSS3实现放大缩小动画效果 </title> </head> <style> @keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1); /*开始为原始大小*/ } 25%{transform: scale(1.1); /*放大1.1倍*/ } 50%{transform: scale(1);} 75%{transform: scale(1.1);} } .ballon{ width: 352px; height: 352px; margin:50px auto; background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565070909804&di=a7ccc7fab948694dbda15dcaa47de9ac&imgtype=0&src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F120928%2F219049-12092Q33T032.jpg"); background-size: 352px 352px; -webkit-animation-name: scaleDraw; /*关键帧名称*/ -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/ -webkit-animation-iteration-count: infinite; /*动画播放的次数*/ -webkit-animation-duration: 5s; /*动画所花费的时间*/ } </style> <body> <div class="ballon"></div> <script type="text/javascript"> </script> </body> </html>
简单案例1：
div { width:100px; height:100px; background:red; animation:myfirst 5s;/*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒*/ -webkit-animation:myfirst 5s; /* Safari and Chrome */ color:yellow; text-align:center; line-height:100px } @keyframes myfirst { from {background:red;color:yellow} to {background:yellow;color:red} } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:red;color:yellow} to {background:yellow;color:red} } html <body> <div>叶落森</div> </body>
简单案例2：
div { width:100px; height:100px; background:red; position:relative;/*定位，为下面的top和left使用*/ animation-name:myfirst;/*把 "myfirst" 动画捆绑到 div 元素*/ animation-duration:5s;/*时长：5 秒。默认是 0*/ animation-timing-function:linear;/*规定动画的速度曲线，匀速。默认是 "ease"。*/ animation-delay:2s;/*规定动画何时开始。默认是 0。*/ animation-iteration-count:infinite;/*规定动画被播放无限次数。默认是 1*/ animation-direction:alternate;/*规定动画在下一周期逆向地播放。默认是 "normal"。*/ animation-play-state:running;/*规定动画是否正在运行或暂停。默认是 "running"。*/ /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
<body>
<div></div>
</body>
