過渡漸隱
適合兩張圖片調整其中一個透明度，完整代碼：
<!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>
