HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
原文:HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
3d旋转图：主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 perspective: 800px;(景深)和使立方体呈3d效果展示的transform-style：preserve-3d来实现；
全屏的雪花飘落用原生js来实现(随机的大小，透明度的变化等)，有详细注释；
html5主要是实现背景音乐和头部的字体卷动效果。
< audio src=“music.mp3” hidden=“true” loop=“true” preload=“auto”>< /audio> 或者< embed src=“music.mp3” type=""/>
html部分：
<body>
<div class="top">
<marquee behavior="alternate" direction="left">时光不老，我们不散</marquee>
</div>
<div class="box" id="_box">
<div class="pic" id="_pic">
<ul id="_ul">
<li><img class="active" src="data:images/wm.jpg" alt=""></li>
<li><img class="active" src="data:images/6.png" alt=""></li>
<li><img src="data:images/2.png" alt=""></li>
<li><img class="active" src="data:images/w.jpg" alt=""></li>
<li><img src="data:images/4.png" alt=""></li>
<li><img class="active"src="data:images/xin1.png" alt=""></li>
</ul>
</div>
</div>
<div class="text"></div>
<!-- <audio src="music.mp3" hidden="true" loop="true" preload="auto"></audio> -->
<embed src="music.mp3" type=""/>
</body>
css部分
<style>
*{
padding:0;
margin: 0;
list-style: none;
}
img{
width: 240px;
height: 240px;
}
img.active{
width: 200px;
height: 200px;
border-radius: 60px 60px 150px 150px;
}
html,body{
width:100%;
height: 100%;
}
body{
background: url('images/3.jpg') no-repeat;
background-size:cover;
overflow: hidden;
}
.top{
width: 400px;
height: 50px;
margin: 60px auto;
font-size: 30px;
font-family: "华文行楷";
color: #fff;
}
.top marquee{
margin-top: -80px;
}
.box {
width: 310px;
height: 260px;
margin: 20px auto;
/* 景深：离视线的距离 */
perspective: 800px;
}
.box .pic{
width: 100%;
height: 100%;
position: relative;
/* 设置3d环境 */
transform-style:preserve-3d;
animation: play 10s linear infinite;
}
@keyframes play {
from{
transform: rotateY(0);
}
to{
transform: rotateY(360deg);
}
}
.box .pic li{
position: absolute;
top: 0;
left: 0;
}
.text {
width: 500px;
height: 200px;
margin: 0 auto;
font-size:22px;
color: #6fade1;
font-family: "华文行楷";
}
.xh {
animation: snow 15s infinite linear;
}
@keyframes snow{
0%{
transform: rotate(0);
}
50%{
opacity: 0.4;
}
100%{
transform: rotate(360deg);
opacity: 0.1;
}
}
</style>
js部分
<script>
// 获得元素
var box = document.getElementById('_box');
var pic = document.getElementById('_pic');
var ul = document.getElementById('_ul');
var text = document.getElementsByClassName('text')[0];
var lis = ul.children;
var deg = 360 / lis.length;
var num = 0;
var string = "朋友之间不需要谢谢，也不需要对不起。因为真正的友谊不是谢谢也不是对不起，它只是静静的，告诉你：我还在！";
// 让li元素呈圈形式展开
for(var i = 0;i < lis.length ;i++)
{
lis[i].style.transform = "rotateY("+deg*i+"deg) translateZ(216px)";
}
// 让文字一个一个的出现在屏幕上
show();
function show(){
var timer = null;
text.innerHTML += string.charAt(num);
num++;
clearInterval(timer);
timer = setTimeout(show,200);
if(num == string.length)
{
clearInterval(timer);
}
}
// 制作雪花特效
var minsize = 5;// 最小的雪花
var maxsize = 50;// 最大的雪花
var delay = 100;// 生成雪花的时间间隔
var snowColor = "#fff";// 雪花颜色
var snowDiv = document.createElement('div');// 生成一个雪花
snowDiv.className = "xh";
snowDiv.style.position = "absolute";
snowDiv.style.left = '0';
snowDiv.style.top = "0";
snowDiv.style.color = snowColor;
snowDiv.innerHTML = "❉";
var dHeight = document.documentElement.clientHeight;// 检测可视区的高度；
var dWidth = document.documentElement.clientWidth;// 检测可视区的宽度
setInterval(function(){
var snowSize = minsize + Math.random()*maxsize;// 随机雪花的大小
var startLeft = Math.random()*dWidth;// 雪花随机出现/停止的left值
var stopLeft= Math.random()*dWidth;// 雪花随机出现/停止的left值
var startOpacity = 0.7 + Math.random()*0.3;// 随机的透明度
var stopHeight = dHeight -100;// 雪花停止的高度
var speed = 3 +Math.random() *5 ;// 雪花飘落过程的速度
var div = snowDiv.cloneNode(true);
div.style.left = startLeft + 'px';
div.style.opacity = startOpacity;
div.style.fontSize = snowSize + 'px';
document.body.appendChild(div);
animate(div,speed,stopHeight,stopLeft );
},delay);
function animate(obj,speed,stopHeight,stopLeft){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
obj.style.top = speed + obj.offsetTop + 'px';
if(obj.offsetTop >= stopHeight)
{
clearInterval(obj.timer);
document.body.removeChild(obj);// 到达设置的高度就移除
}
},50);
}
</script>
HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）的更多相关文章
- 原生js实现浏览器全屏和退出全屏
全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
- 仿新浪游戏频道js多栏目全屏下拉菜单导航条
仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...
- js指定区域全屏
<html> <head> <title>js指定区域全屏</title> <style> ...
- js设置页面全屏
html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...
- 利用原生js做数据管理平台
摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...
- 原生js的联动全选
开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...
- 原生JS实现雪花特效
今天在校园招聘上被问到的问题,用JS写出雪花的效果.我打算使用多种方法来试试如何实现雪花. 这是目前按照网上某种思路模仿的第一种雪花,不太好看,但是大致意思清楚. 思路1:该思路直接由JS实现. 雪花 ...
- FullPage.js – 轻松实现全屏滚动（单页网站）效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
随机推荐
- JQuery的getJSON函数跨域
由于一开始看到“$”等类似符号就头晕,所以注定与PHP和JQuery无缘了,不过自己用JavaScript可不代表其他人也得用,这不,麻烦到了... 两个网站:A.B A站点提供了一个重要的API,由 ...
- jquery实现的时间轴
代码 样式文件style.css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ...
- BZOJ 1008 越狱 组合数学
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1008 题目大意: 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗 ...
- RedisClient的安装及基本使用
管理redis的可视化客户端目前较流行的有三个:Redis Client ; Redis Desktop Manager ; Redis Studio. 这里目前给大家介绍Redis Client 的 ...
- collecitons.deque
python队列,可以使用collections里面的deque,将列表当作队列使用. deque方法有: from collections import deque deque.append() d ...
- UVA11324 The Largest Clique
嘟嘟嘟 很自然的想到先tarjan把强联通分量缩点,因为对于一个强联通分量,要么不选,要么全选,所以可看成一个点. 然后转化成了求DAG上的一条最长路(每一个点都有权值).刚开始我想用dijkstra ...
- Ubuntu 14.04 系统安装后无法上网的问题（eth0识别不出）
Ubuntu 14.04 1.网口处网线状态等正常跳动 2.ifconfig 指令查询不到网卡信息 说明缺少了网卡驱动. 使用 lspci 指令查看系统中所有的驱动信息,找到 Ethernet Con ...
- 新闻cms管理系统 (补)-----路由优化一
修改后台的入口文件,将访问后台页面的入口文件设为admin.php,并且访问该文件的模块默认为admin模块. 添加后台入口文件具体操作步骤: (1)项目目录下新建admin.php (2)实现入口文 ...
- [LuoguP2403][SDOI2010]所驼门王的宝藏
题目描述 在宽广的非洲荒漠中,生活着一群勤劳勇敢的羊驼家族.被族人恭称为"先知"的Alpaca L. Sotomon是这个家族的领袖,外人也称其为"所驼门王". ...
- [USACO06NOV]玉米田$Corn \ \ Fields$ （状压$DP$）
#\(\mathcal{\color{red}{Description}}\) \(Link\) 农场主\(John\)新买了一块长方形的新牧场,这块牧场被划分成\(M\)行\(N\)列\((1 ≤ ...