demote / hide / spam
【每日一练】88—1024程序员节文本动画效果的实现
写在前面
今天我过节，今天我最大，哈哈~
今天是10月24日，是程序员们自定义的程序员节日，因此，今天我们就用代码来实现一个“10.24-做程序员快乐！”的文本节日效果，最终效果如下：
<!doctype html><html> <head> <meta charset="utf-8"> <title>【每日一练】88—1024程序员节文本动画效果的实现</title> </head> <body> <section> <h2>做程序员快乐！<br><span>10.24</span></h2> </section> <script type="text/javascript"> function stars() { var count = 200; var section = document.querySelector('section'); var i = 0; while (i < count) { var star = document.createElement("i"); var x = Math.floor(Math.random() * window.innerWidth); var y = Math.floor(Math.random() * window.innerHeight); var duration = Math.random() * 2; var size = Math.random() * 4; star.style.left = x+'px'; star.style.top = y+'px'; star.style.width = 1+size+'px'; star.style.height = 1+size+'px'; star.style.animationDelay = duration+'s'; star.style.animationDuration = 2+duration+'s'; section.appendChild(star); i++; } }; stars();</script> </body></html>
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}body{ overflow: hidden;}section{ display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg,#111,#222,#111);}
section:before{ content: ''; position: absolute; width: 30vw; height: 30vw; border: 5vw solid #EAEAEA; border-radius: 50%; box-shadow: 0 0 0 1vw #222, 0 0 0 1.3vw #fff;}
h2{ position: absolute; font-size: 8vw; color: #00a6bc; font-weight: initial; text-align: center; line-height: 2em; z-index: 5; transform: skewY(-7deg); text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc, 5px 5px 0 #ccc, 10px 10px 0px rgba(0,0,0,.2); animation: floating 5s ease-in-out infinite;}@keyframes floating{ 0%,100% { transform: skewY(-7deg) translate(0px,-20px); } 50% { transform: skewY(-7deg) translate(0px,20px); }}h2 span{ font-weight: 700; font-size: 3em; text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc, 5px 5px 0 #ccc, 6px 6px 0 #ccc, 7px 7px 0 #ccc, 8px 8px 0 #ccc, 9px 9px 0 #ccc, 10px 10px 0 #ccc, 20px 20px 0px rgba(0,0,0,.2);}section i{ position: absolute; background: #000; border-radius: 100%; background: #00a6bc; animation: animate linear infinite; box-shadow: 0 0 10px #00a6bc, 0 0 20px #00a6bc, 0 0 40px #00a6bc, 0 0 80px #00a6bc;}@keyframes animate{ 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; }}写在最后
以上就是我今天跟你分享的【每日一练】全部内容，希望今天的小练习你会喜欢，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号