今天小编跟大家讲解下有关CSS3实现跳动的动画效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3实现跳动的动画效果 的相关资料，希望小伙伴们看了有所帮助。
静态的效果图如下：
这个要运用的新知识如下：复制代码代码如下://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 需要加定位，宽度才好使
实例代码如下复制代码代码如下:<!doctype html><html><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; [email protected] shadow { 0%, 100% {transform: scaleX(1);} 50% {transform: scaleX(1.2);}}</p><p>@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></p><p><body><div class="box"></div></body></html>
总结以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
来源：爱蒂网
