这篇文章主要讲解了“html流星雨代码如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html流星雨代码如何实现”吧!
清徐网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联公司成立于2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。
html流星雨代码的实现方法:1、创建一个HTML示例文件;2、添加HTML代码为“
...”;3、通过设置css样式为“.container {position: relative...}”来实现。效果图(流星带颜色的,截图没显示):
代码如下:
html代码:
漫天流星雨 一起来看流星雨吧! -- (●ˇ∀ˇ●)css代码:
:root { --background-color: #2c3e50; --border-color: #7591AD; --text-color: #34495e; --color1: #ec3e27; --color2: #fd79a8; --color3: #0984e3; --color4: #00b894; --color5: #fdcb6e; --color6: #e056fd; --color7: #F97F51; --color8: #BDC581; } * { margin: 0; padding: 0; } html { font-size: 14px; } body { width: 100vw; height: 100vh; background-color: var(--background-color); display: flex; justify-content: center; align-items: center; /* font-family: 'Times New Roman', Times, serif; */ } .channel { position: absolute; width: 80%; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -200px); font-size: 30px; font-weight: bold; color: #fff; z-index: 999; } .container { position: relative; width: 100vw; height: 100vh; background-color: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; perspective: 800px; /* perspective-origin: left bottom; */ transform-style: preserve-3d; } .line { position: absolute; width: 200px; height: 3px; border-radius: 3px; /* background-color: #fff; */ background-image: linear-gradient(to right, var(--color), #ffffff50, transparent); animation: down 1s linear infinite both; animation-delay: calc(var(--d) * 0.3s); } .line::before, .line::after { position: absolute; content: ""; width: inherit; height: inherit; background-image: inherit; } .line::before { filter: blur(5px); } .line::after { filter: blur(10px); } @keyframes down { 0% { transform: translateY(calc(var(--z) * 60px)) translateZ(calc(var(--z) * 100px)) rotate(-45deg) translateX(calc(var(--x) * 100px)); } 100% { transform: translateY(calc(var(--z) * 60px)) translateZ(calc(var(--z) * 100px)) rotate(-45deg) translateX(calc(var(--x) * -100px)); } } .channel{ background: linear-gradient(to right,red,blue); -webkit-background-clip: text; color: transparent; }感谢各位的阅读,以上就是“html流星雨代码如何实现”的内容了,经过本文的学习后,相信大家对html流星雨代码如何实现这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
网页标题:html流星雨代码如何实现
本文来源:http://jkwzsj.com/article/jhjscd.html