前端开发的动画实例：css3 动画跳动效果

by 前端开发者 · Published 2018年5月18日20:30:53 · Updated 2018年5月20日00:39:16

摘要：前端开发的动画实例|前端开发者 html 代码 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文……

前端开发的动画实例|前端开发者

html 代码

<!doctype <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a>> <head> <meta charset=”utf-8″> <title>无标题文档</title> <style> body{ background:#bbd149; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; } .box{ height: 50px; width: 50px; position: relative; } .box::before{ content: ”; height: 8px; width: 50px; background: #000; opacity: .2; border-radius: 50%; position: absolute; top: 67px; left: 0; animation: shadow .5s linear infinite; } .box::after{ border-radius: 5px; background: #fff; animation: rotate .5s linear infinite; content: ”; position: absolute; left: 0; top: 0; width: 50px; height: 50px; } @keyframes shadow { 0%, 100% {transform: scaleX(1);} 50% {transform: scaleX(1.2);} } @keyframes rotate { 0% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(10px) rotate(22.5deg); } 50% { transform: translateY(20px) scale(1.1, 0.9) rotate(45deg); border-bottom-right-radius: 50px; } 75% { ransform: translateY(10px) rotate(67.5deg); } 100% { transform: translateY(0) rotate(90deg); } } </style> </head> <body> <div class=”box”> </div> </body> </<a href="https://www.rokub.com/category/html" title="html">html</a>>

//css3新知识
display: flex;
justify-content: center;
align-items: center;
animation: shadow .5s linear infinite;
@keyframes shadow {
0%, 100% {transform: scaleX(1);}
50% {transform: scaleX(1.2);}
}
::after 需要加定位，宽度才好使

前端开发的动画实例|网站前端开发

https://www.rokub.com

» 本文来自：前端开发者 » 《前端开发的动画实例：css3 动画跳动效果》

» 本文链接地址：https://www.rokub.com/2871.html

» 您也可以订阅本站：https://www.rokub.com