大冬天的，飘雪花的特效，你可能要用上了吧。通常情况下用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. QPushButton class

    Help on class QPushButton in module PyQt5.QtWidgets: class QPushButton(QAbstractButton) |  QPushButt ...

  2. IdentityServer4实战 - 与API单项目整合

    一.前言 我们在实际使用 IdentityServer4 的时候,可能会在使用 IdentityServer4 项目添加一些API,比如 找回密码.用户注册.修改用户资料等,这些API与Identit ...

  3. FineUIMvc随笔（1）动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...

  4. 小小知识点（十一）——MATLAB中fftshift的作用

  5. [转] package-lock.json

    其实用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致. 引用知乎@周载南的回答 根据官方文档,这个package-lo ...

  6. 微信小程序域名

    微信小程序与第三方服务器通讯的域名必要条件1.一个已备案的域名,不是localhost.也不是127.0.0.1,域名不能加端口2.加ssl证书,也就是https://~~~3.HTTPS 服务器的 ...

  7. ansible 模块

    1. #vim /etc/ansible/yaml/back.yml - hosts: siyi tasks: - name: "yum rsync" yum: name=rsyn ...

  8. js定时器 实现提交成功提示

    应用场景: 用户评论后,在合适位置弹出“评论成功”,2秒钟后自动消失,提示用户评论成功. HTML: {#评论成功提示#} <div class="popup_con" st ...

  9. idea 转载

    转载:https://blog.csdn.net/qq_34033853/article/details/77448431 摘要:在创建类时,自动生成代码的注释模板 本篇内容为大家提供的是Intell ...

  10. Spring Boot 2.x 编写 RESTful API (一) RESTful API 介绍 & RestController

    用Spring Boot编写RESTful API 学习笔记 RESTful API 介绍 REST 是 Representational State Transfer 的缩写 所有的东西都是资源,所 ...