标签：动画 50% translateY 自由落体 ease transition transform animation css
主要利用的animation ,关于amimation的效果不再做解释，直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background: #864879; } main { position: absolute; top: 80%; left: 50%; transform: translate(-50%, 0); } .ball { width: 100px; height: 100px; background: radial-gradient(at center, #e67e22, #e74c3c); border-radius: 50%; animation-name: move; animation-duration: 10s; animation-iteration-count: 1; animation-direction: alternate; } .pan { position: absolute; width: 300px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.3); z-index: -1; filter: blur(5px); transform: translate(-100px, -20px); animation-name: back; animation-duration: 10s; animation-direction: alternate; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes back { 0%, 10%, 30%, 50%, 70%, 90% { width: 300px; height: 40px; filter: blur(35px); background: rgba(0, 0, 0, 0.1); } 20%, 40%, 60%, 80%, 100% { width: 300px; height: 40px; filter: blur(5px); background: rgba(0, 0, 0, 0.3); } } @keyframes move { 10% { transform: translateY(-650px); transition: ease-in; } 30% { transform: translateY(-450px); transition: ease-in; } 50% { transform: translateY(-300px); transition: ease-in; } 70% { transform: translateY(-150px); transition: ease-in; } 90% { transform: translateY(-50px); transition: ease-in; }20%, 40%, 60%, 80%, 100% { transform: translateY(0px); transition: ease-out; } } </style> </head> <body> <main> <div class="ball"></div> <div class="pan"></div> </main> </body> </html> 感兴趣的直接复制跑一下看看效果
标签：动画,50%,translateY,自由落体,ease,transition,transform,animation,css 来源： https://www.cnblogs.com/lihesheng/p/15511702.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。