雪花飘落效果+雪花红梅 电视剧步步惊心插曲-刘诗诗
<!doctype html>
<html lang="en">
<head>
<!-雪花红梅 电视剧步步惊心插曲-刘诗诗-->
<meta charset="UTF-8"> <!--声明编码 UTF-8(国际编码)-->
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
#header{width:100%;
height:315px;
background:url("images/snow-bg.png")repeat-y center,url("images/header-bg.png");
-webkit-animation:auto 20s linear infinite;
}
#header:hover{-webkit-animation-play-state:paused;}/*规定动画暂停还是播放*/
@-webkit-keyframes auto{
0%{background-position:center 0, 0 0}
100%{background-position:center 885px,0 0}
}
@-webkit-keyframes play{
0%{-webkit-transform:translate(0,-315px);}
100%{-webkit-transform:translate(0,0);}
}
#header .con .tree,#header .con .ice{
-webkit-animation:play 1s ;
}
#header .con{width:960px;height:315px;
background-image:url("images/con-bg.png");
background-repeat:no-repeat;
background-position:0 204px;
margin:auto;
position:relative;
}
#header .con .tree{width:112px;
height:137px;
position:absolute;
background:url("images/tree.png");
}
#header .con .ice{width:115px;height:103px;
background:url("images/ice.png");
position:absolute;
left:410px;
top:210px;
}
#header .con .tree1{left:35px;
top:169px;
-webkit-animation-duration:.6s; /*完成动画所需要的时间*/
}
#header .con .tree2{left:200px;
top:180px;
-webkit-animation-duration:.2s; /*完成动画所需要的时间*/
}
#header .con .tree3{left:350px;
top:125px;
-webkit-animation-duration:.3s; /*完成动画所需要的时间*/
}
#header .con .tree4{left:515px;
top:150px;
-webkit-animation-duration:.4s; /*完成动画所需要的时间*/
}
#header .con .tree5{left:680px;
top:170px;
-webkit-animation-duration:.6s; /*完成动画所需要的时间*/
}
#header .con .tree6{left:805px;
top:125px;
-webkit-animation-duration:.8s; /*完成动画所需要的时间*/
}
</style>
</head>
<body>
<div id="header">
<div class="con">
<div class="tree tree1"></div>
<div class="tree tree2"></div>
<div class="tree tree3"></div>
<div class="ice"></div>
<div class="tree tree4"></div>
<div class="tree tree5"></div>
<div class="tree tree6"></div>
</div>
</div>
<embed height="50" width="100" src="龚淑均 - 雪花红梅.mp3">
<p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
<p>或者你没有打开扬声器。</p>
</body>
</html>
雪花飘落效果+雪花红梅 电视剧步步惊心插曲-刘诗诗相关推荐
- java实现物体下落效果_手撸一个物体下落的控件，实现雪花飘落效果
效果图: 圣诞登录页.gif 参考文章: Android自定义View--从零开始实现雪花飘落效果 感谢原文作者,不仅实现了效果,并且写得非常详细,还做了优化.笔者参考原文作者的源码,做了一点修改,实 ...
- python实现雪花飘落效果_python实现雪花飘落效果实例讲解及源码分享！
点击蓝字"python教程"关注我们哟! 前言 Python现在非常火,语法简单而且功能强大,很多同学都想学Python!所以小的给各位看官们准备了高价值Python学习视频教程及 ...
- java飘落的雪花_[Java教程]实现雪花飘落效果
[Java教程]实现雪花飘落效果 0 2016-11-02 21:00:17 雪花飘落 body{background:#000;background: url(http://www.wallcoo. ...
- android雪花飘落效果,【OpenGL】Shader实例分析（七）- 雪花飘落效果
研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如以下: Shader "shadertoy/Flakes" { // https://www.shader ...
- Android之雪花飘落效果
Android之雪花飘落效果 一:效果图 二:实现步骤 1:FallObject 下落物体 封装 2:自定义雪花飘View 3:xml布局 4:activity使用 三:最后 一:效果图 Androi ...
- HTML圣诞节代码，圣诞节贺卡源代码，实现圣诞节雪花飘落效果
HTML圣诞节代码,圣诞节贺卡源代码,实现圣诞节雪花飘落效果 完整代码下载地址:HTML圣诞节代码,圣诞节贺卡源代码,实现圣诞节雪花飘落效果 index.html <!DOCTYPE html& ...
- HTML5 小练习2—仿华为官网（实现随机雪花飘落效果）
文章目录 一.界面展示 二.突出显示效果(当鼠标指向时) 1.广告部分动画 2.商品价格突出显示 3.导航栏文字突出显示 三.项目目录 四.CSS样式代码 1.雪花部分实现 五.页面代码 1.inde ...
- 用python画雪花飘落_python实现雪花飘落效果实例讲解
在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教 ...
- python实现雪花动态图_python实现雪花飘落效果
在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教 ...
最新文章
- Git中的工作区(Working Directory)、暂存区(stage)和历史记录区(history)
- Spring Data 发布更改版本管理方案之后的第一个版本：2020.0.0
- 文件管理（NSfilemanager）
- element UI 制作模糊搜索框
- NOIP201202寻宝
- 计算机三级数据库上机怎么考,最新计算机三级数据库上机考试试题
- 为什么说图形数据库是大数据时代的利器？
- 3ds max 2012 VRay 2.0-3ds max 从入门到精通-元旦场景材质设置
- PyQt5 QTreeView树图
- ARP欺骗，DNS欺骗和图片嗅探——ettercap软件的使用
- windows2003r2下载
- RK3399平台开发系列讲解（外设篇）3.35、GMAC RGMII Delayline Guide 窗口配置
- java Complex 类
- python毕业设计作品基于django框架 校园二手书籍交易系统毕设成品（4）开题报告
- VS 调试时，不允许修改代码
- 源代码管理工具——VSS详解
- python文件名可以用中文吗_python对中文路径/文件名的重命名
- 好友推荐（列转行，help_topic_id）
- 2016山东计算机春考试题型,2016年山东省春季高考技能考试信息技术类专业考试样题...
- java 软尾 铝_软尾入门车款：JAVA FURIA 27.5上市