前端特效——简单下雪（纯css）

原理：

雪花背景平铺，背景图片位置向右下移动的动画

缺点：不会永远都向下移动，动画时间结束会闪回去首帧

实现：

<!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>简单下雪</title><style>* {margin: 0;padding: 0;}body {background: rgb(41, 43, 41);}.snow {width: 100vw;height: 100vh;background-image: url("imgs/2.png");margin: 0 auto;animation: snow 100s linear;}@keyframes snow {0% {background-position: 0 0;}100% {background-position: 5000px 5000px;}}</style>
</head><body><div class="snow"></div>
</body></html>

雪花图片：

前端特效——简单下雪（纯css）相关推荐

前端小练习：纯css菜单栏
纯css实现菜单栏二级菜单有旋转效果,效果如下图: HTML代码 <!DOCTYPE html> <html lang="en"><head> ...
WEB前端(7)—— 简单的 HTML+CSS 导航栏案例
适合每个新手的导航栏: 代码与运行效果如图: <!DOCTYPE html> <html> <head><meta charset="utf-8&q ...
超详细的纯CSS的照片墙特效
超详细的纯CSS的照片墙特效你好,欢迎来到Amy的第一篇博客呀~ 此博客纯属个人原创哦~ 前些天在公开课上讲过一个类似于拍立得的照片特效,然后在一个页面上放了多张就形成了一个照片墙,效果如下: 鼠标 ...
82.纯CSS液体加载特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 82]纯CSS液体加载特效视频地址一:https://www.ixigua.c ...
20款前端特效动画及源码
最近优化项目时看到一些实用的特效感觉还不错下面就分享给大家代码量过长的我就不展示了可以去在这里资源站源码部分预览下载 1.Loading加载动画在canvas画布上,我们动态绘制许多多边形, ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
纯 CSS 实现鼠标跟随效果
欢迎微信关注Jerome blog,用技术的心去生活鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为. ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
简单上手H5+CSS前端3D酷炫特效源代码
简单上手H5+CSS前端3D酷炫特效个人觉得是这个特效是入手自己做比较简单的一个前端特效代码十分少,也很容易看懂,记得点个关注效果图: H5部分 <!DOCTYPE html> & ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...

前端特效——简单下雪（纯css）

前端特效——简单下雪（纯css）相关推荐

最新文章

热门文章