大冬天的,飘雪花的特效,你可能要用上了吧。通常情况下用jQuery写飘雪花的特效,但用css3写,其实特别简单,新手一看就懂,那就告别jQuery,用css3轻松搞定飘雪花特效吧!

点击查看特效演示

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>css3飘雪花特效</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background:#000;
}
img {
display: block;
width: 100%;
}
@keyframes snow{
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 500px 500px, 1000px 500px;
}
}
.snow{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('snow1.png'),url('snow2.png');
animation: 10s snow linear infinite;
}
</style>
</head>
<body>
<div class="snow"></div>
</body>
</html>

总结:这个css3飘雪花特效,对于新手很简单。主要用到了css3多背景css3动画知识点,如果对这些知识点不熟悉,建议赶快再复习下,补补课。

原文地址:http://tangjiusheng.com/css3/136.html

css3写出飘雪花特效的更多相关文章

  1. css3写出0.5px的边框

    一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...

  2. 用css3写出的倒三角形

    <!DOCTYPE html><html><head><meta charset="gb2312" /><title>无 ...

  3. 所有用CSS3写的3D特效,都离不开这些知识

    起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自 ...

  4. 程序员面试京东前端,现场JavaScript代码写出魔方特效

    程序员面试京东前端,现场JS代码写出魔方特效,成功搞定20K月薪 今天小编我逛论坛,看到了一位程序员小伙子,因为是有了两年工作经验,然后去京东面试前端岗,一面二面轻松就过了,到了技术面这一块,小伙干脆 ...

  5. [转帖]我花了10个小时,写出了这篇K8S架构解析

    我花了10个小时,写出了这篇K8S架构解析 https://www.toutiao.com/i6759071724785893891/   每个微服务通过 Docker 进行发布,随着业务的发展,系统 ...

  6. 利用css3特性写出三角形(兼容IE浏览器)

    利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...

  7. 一些纯css3写的公司logo

      随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...

  8. 如何写出高质量的技术博客 这边文章出自http://www.jianshu.com/p/ae9ab21a5730 觉得不错直接拿过来了 好东西要大家分享嘛

        如何写出高质量的技术博客?答案是:如果你想,就一定能写出高质量的技术博客.看起来很唯心,但这就是事实.有足够愿力去做一件目标明确,有良好反馈系统的事情往往很简单.就是不停地训练,慢慢地,你自己 ...

  9. fir.im Weekly - 如何写出零 bug 的代码

    神兽护体,代码无bug.经常看到代码注释的各种形状,这是一种程序员情怀.那么,如何能写出零 Bug 的代码呢,来看看@码农翻身 的这篇手册--零Bug的代码是怎么炼成的. 写零 Bug 一定少不了代码 ...

随机推荐

  1. 使用axios 的post请求下载文件,

    axios({ method: 'post', data: param, responseType:'blob', url: _urls + '/Downloaddata' }).then(data= ...

  2. vpshere6 ESXI 禁止登陆 "执行此操作的权限被拒绝"

    vCenter在添加ESXI主机时,锁定模式选择“正常”,导致无法直接登陆ESXI宿主机,现象如下: 解决方法:

  3. WordPress博客搭建与问题总结

      一.WordPress博客搭建 1.安装Apache web服务器 yum install -y httpd systemctl restart httpd systemctl enable ht ...

  4. 偶发异常BUG,如何高效精准分析排查定位?

    偶发异常BUG,如何高效精准分析排查定位? 作为测试,经常会收到领导.同事.用户反馈过来各种各样BUG,令人措手不及 首选需要判断确认是不是BUG,不要急于给予回复,需有充分的条件给予说明回复 很多测 ...

  5. 免费高端出辕营,横空出世惊鬼神 Excel插件:ExcelPower_Helper 0.41初出茅庐

    免费高端出辕营,横空出世惊鬼神 Excel插件:ExcelPower_Helper 0.41初出茅庐        隐鹤 倾心开发 2019.4.1 1.   引言 经过前后大约零零散散的一年的开发, ...

  6. yolov3和darknet opencv版编译安装及基本测试

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 一.准备工作: 安装pkg-config:sudo apt-get install pkg-confi ...

  7. JasperReports® Library | Jaspersoft Community

    JasperReport报表导出踩坑实录 - 小卖铺的老爷爷 - 博客园https://www.cnblogs.com/laoyeye/p/7707149.html jasperreport_百度百科 ...

  8. [转帖][超级少儿不宜]一氧化氮(NO),为什么亚洲人是最硬

    阴茎科学:一氧化氮(NO),为什么亚洲人是最硬 尼堪巴图鲁   ​关注他 2,911 人赞同了该文章   https://zhuanlan.zhihu.com/p/55941740 超级少儿不宜.. ...

  9. 开发过程中,ps要做的事情

    修改图片的分片率 把背景改为透明的 把一个图片的颜色要一下

  10. Vue.js 2.x笔记:状态管理Vuex(7)

    1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...