前端入门（雨滴特效，css） |
您所在的位置：网站首页 › 玫瑰上的雨滴怎么画 › 前端入门（雨滴特效，css） |
前端入门（雨滴特效，css）
|
（看着别人的做的，yysy视频讲的真的好详细，像我这种小白都能听懂了雨滴特效） 大概思路就是，把每个雨滴看作是一个宽为 5px ， 长为 30px 的 div，然后用 js 创建窗口大小 / 5 个数量的雨滴，然后设置位置，让它们按行摆开（就是铺满） 然后给它们赋予一个图像渐变属性 linear-gradient，让图像看起来是从透明渐变为一个随机颜色，再把雨滴的前端设置为圆形的（让它看起来像是一个雨滴，虽然很丑） 最后设置一个动画效果，让雨滴从屏幕上方移动到屏幕下方直到看不见，循环进行该动画，给雨滴设置一个随机的动画前的延迟时间（但注意，设置了延迟时间后，动画就不是直接开始了，所以雨滴出现的位置最开始并不在动画的起始位置，而是起初的设定位置，所以起初的位置需要设定在屏幕上面），最后再给雨滴的运动设置一个随机的速度曲线（先慢后快即可） *{ margin: 0px; padding: 0px; } #div_raindrops{ position: fixed; width: 100vw; height: 100vh; overflow: hidden; } .raindrops_item{ position: absolute; width: 5px; height: 30px; border-radius: 0% 0% 5px 5px; transform: translateY(-200px); animation-name: raindrops; animation-duration: 5s; animation-iteration-count: infinite; } @keyframes raindrops{ from {transform: translateY(-200px);} to {transform: translateY(100vh);} } const div_raindrops = document.getElementById('div_raindrops'); for(var i = 0; i from {transform: translateY(-200px);};//（这里多了个分号） to {transform: translateY(100vh);} }然后就寄了，相当于 to {transform: translateY(100vh);} 这一行就不起作用了，当时可把我整不会了，还是人太菜，跟我一样刚入门的稍微注意点，别写错了
又是日常吐槽，这么简单的东西，还跟着别人的视频打代码，这都能耗我一上午，日常被自己菜的自闭 |
【本文地址】
今日新闻 |
推荐新闻 |