css下雪动画,CSS3下雪动画
插件描述:现在,您可以用 CSS3 创建令人惊叹的动画。但是,我敢打赌你是知道的。关键字关于 CSS3 动画的时候是 CSS3 @keyframes规则,在这篇文章中,您将学习如何创建一个令人敬畏的 CSS3 动画。
现在,您可以用 CSS3 创建令人惊叹的动画。但是,我敢打赌你是知道的。关键字关于 CSS3 动画的时候是 CSS3 @keyframes规则,在这篇文章中,您将学习如何创建一个令人敬畏的 CSS3 动画。
HTML
标记是最小和相当自我解释性。请别怪我divitis. :)
图像资源
下面,您可以找到您将使用,以创建标头的图像:
title="" width="600" height="200" border="0" hspace="0" vspace="0" style="width: 600px; height: 200px;"/>
CSS
当你读这篇文章的开头, @keyframes规则的操作所有的魔法。同时,要保持下面的代码尽可能的清洁,我将不添加前缀的版本 (-moz-, -webkit-, -ms-).
查看页面源代码演示时,您可以找到完整的 CSS3 代码。
title="" width="600" height="200" border="0" hspace="0" vspace="0" style="width: 600px; height: 200px;"/>
为了实现下雪的效果,您需要为第一次.header背景background-position属性进行动画处理。作为一个快速说明,浏览器不支持多个背景,雪将不可见此示例。.header{
margin: 0 0 30px;
background: url(header-bg.png);
background: url(snow-bg.png) repeat-y center, url(header-bg.png);
animation: animate-snow 9s linear infinite;
}
@keyframes animate-snow
{
0% { background-position: center 0, 0 0;}
100% { background-position: center 885px, 0 0;}
}
.wrapper元素基本上持有我们圣诞树与雪人。请注意position: relative:.wrapper{
width: 960px;
height: 315px;
margin: auto;
overflow: hidden;
position: relative;
background: url(wrapper-bg.png) no-repeat bottom;
}
为圣诞树、animation-duration值是随机改变以创建一个很酷的效果:
title="" width="600" height="200" border="0" hspace="0" vspace="0" style="width: 600px; height: 200px;"/>@keyframes animate-drop {
0% {opacity:0;transform: translate(0, -315px);}
100% {opacity:1;transform: translate(0, 0);}
}
.christmas-tree,
.snowman {
position: absolute;
animation: animate-drop 1s linear;
}
.christmas-tree {
width: 112px;
height: 137px;
background: url(christmas-tree.png);
}
.snowman {
width: 115px;
height: 103px;
top: 195px;
left: 415px;
background: url(snowman.png);
animation-duration: .6s;
}
.tree1 {
top: 165px;
left: 35px;
animation-duration: .6s;
}
.tree2 {
left: 185px;
top: 175px;
animation-duration: .9s;
}
.tree3 {
left: 340px;
top: 125px;
animation-duration: .7s;
}
.tree4 {
left: 555px;
top: 155px;
animation-duration: .8s;
}
.tree5 {
left: 710px;
top: 170px;
animation-duration: .7s;
}
.tree6 {
left: 855px;
top: 125px;
animation-duration: .6s;
}
css下雪动画,CSS3下雪动画相关推荐
- html 圆圈扩大动画,CSS3圆圈动画放大缩小循环动画效果
今天在写一个zblog主题的时候,在无限下拉加载等待时间内,需要加一个动画循环效果,如上图! 1.简单放大缩小循环!html> CSS3圆圈动画放大缩小循环动画效果 .dot { margin: ...
- css立体3d效果动画,css3 实现动画,变换基点及3D效果~
各位小伙伴 上次分享的爱心感觉如何呀~ 动画效果 首先,娜娜在这边给大家认个错,上次分享落下了一个东西,就是动画效果,没有动画是实现不了爱心一条一条的动作的. 虽然那个爱心源代码已经给大家了,只要复制 ...
- css 鼠标沙漏,CSS3 沙漏动画
CSS 语言: CSSSCSS 确定 body { background: #111117; } #loader { animation: loader 5s cubic-bezier(0.8, 0, ...
- html js css倒计时,js+css3倒计时动画特效
js代码 const nums = document.querySelectorAll('.nums span'); const counter = document.querySelector('. ...
- html5沙漏动画,CSS3 沙漏动画
CSS 语言: CSSSCSS 确定 body { background: #0b7286; } #loader { animation: loader 3s cubic-bezier(0.7, 0, ...
- css雪碧图动画,CSS3动画——雪碧图的实现
前言 作为一个前端的初学者,现在好像已经在nodejs上越跑越偏,之前一直崇拜的CSS3和HTML5动画,如今也好久没有管.因为之前学了好多知识点,但是没有系统的进行总结,就从这篇文章开始,对一些碎片 ...
- css动画放大延迟,css3延时动画
不太理解属性都是什么意思,但是有动画效果,我也是惊呆了 #animated_div{animation:animated_div 4s 1; -moz-animation:animated_div 4 ...
- CSS3流程动画,css3动画和vue动画
transfrom : 转换 1.translate : translate(x,y)有两个值,第一个是x轴,第二个是y轴 2.rotate: rotate(XXdeg) deg值为你要旋转的角度 3 ...
- canvas 擦除动画_帧动画的多种实现方式与性能对比
作者: 前端向朔 from 迅雷前端 本文目录 Web 动画形式 应用场景 素材准备 实现方案 一.GIF 图 二.CSS3 帧动画 三.JS 帧动画 方案总结 注意事项 总结 Web 动画形式 首先 ...
最新文章
- uboot源码分析笔记
- 潜在狄利克雷分配(LDA,Latent Dirichlet Allocation)模型(一)
- centos 查看版本
- 计算机安全靠,市计算机:网络安全进校园,网络安全靠人人
- 力扣 两数相加 指针操作注意事项
- 微软公司等数据结构+算法面试100题2010版全部出炉
- 汉诺塔计算移动次数和消耗体力
- 生活的解释 —— 生物篇
- 美国出台最严技术出口管制!14项前沿科技面临封锁
- ansible 远程启动程序ansible结束后程序也被关闭
- 【渝粤教育】国家开放大学2019年春季 2444酒店管理概论 参考试题
- AI面试锦囊|网易互娱AI Lab人工智能研究工程师两面分享
- 周边pd是什么意思_偶像练习生张艺兴张pd是什么意思
- 【Astar寻路算法图解】Java实现
- TOOD: Task-aligned One-stage Object Detection 原理与代码解析
- mastercam数控编程经验分享,建议收藏
- 华为内部的项目管理之沟通流程
- 微信小程序本地连接后端开发
- (帝国CMS)EmpireCMS v7.5前台XSS 漏洞复现
- ps教程:花卉照片处理:简化背景突出主体