钉钉变大动画 – 有爱前端

https://www.dingtalk.com/侵删

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>钉钉变大动画</title> <style type="text/css"> .circle-wrap{height: 750px;overflow: hidden;position: relative;} .floor3-circle { position: absolute; left: 50%; top: 43%; transform: translate(-50%,-50%) rotateX(50deg); -webkit-transform: translate(-50%,-50%) rotateX(50deg); width: 600px; height: 400px; background-image: url(https://gw.alicdn.com/tfs/TB1efZyRpXXXXcBaXXXXXXXXXXX-130-130.png); background-repeat: no-repeat; background-position: center 160px; } .floor3-circle div { position: absolute; width: 100%; height: 100%; background: url(https://img.alicdn.com/tfs/TB12BNcRFXXXXaLXXXXXXXXXXXX-752-450.png) 50% 50% no-repeat; background-size: 35% 35%; opacity: 0; filter: alpha(opacity=0); } .circle-a { -webkit-animation: ani-circle-a 4.5s ease-out forwards infinite; animation: ani-circle-a 4.5s ease-out forwards infinite; } .circle-b { -webkit-animation: ani-circle-a 4.5s ease-out 1.5s forwards infinite; animation: ani-circle-a 4.5s ease-out 1.5s forwards infinite; } .circle-c { -webkit-animation: ani-circle-a 4.5s ease-out 3s forwards infinite; animation: ani-circle-a 4.5s ease-out 3s forwards infinite; } @-webkit-keyframes ani-circle-a { 0% { -webkit-transform: scale(.8); transform: scale(.8); opacity: 0; filter: alpha(opacity=0); } 10% { opacity: .7; filter: alpha(opacity=70); } 100% { -webkit-transform: scale(5.5); transform: scale(5.5); opacity: 0; filter: alpha(opacity=0); } } @keyframes ani-circle-a { 0% { -webkit-transform: scale(.8); transform: scale(.8); opacity: 0; filter: alpha(opacity=0); } 10% { opacity: .7; filter: alpha(opacity=70); } 100% { -webkit-transform: scale(5.5); transform: scale(5.5); opacity: 0; filter: alpha(opacity=0); } } </style> </head> <body> <div class="circle-wrap"> <div class="floor3-circle"> <div class="circle-a"></div> <div class="circle-b"></div> <div class="circle-c"></div> </div> </div> </body>  </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 钉钉变大动画