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 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
随机推荐
- 两天学会css基础（一）
什么是css?css的作用是什么? CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等. 学 ...
- 「LGP4719【模板】动态dp」
题目 尽管知道这个东西应该不会考了,但是还是学一学吧 哎要是去年noip之前学该多好 动态\(dp\)就是允许修改的一个\(dp\),比如这道题,我们都知道这是一个树上最大点权独立集 众所周知方程长这 ...
- Asp.net Web Api添加异常筛选器
一.定义一个异常筛选器 using System;using System.Collections.Generic;using System.Linq;using System.Web;using S ...
- gulp基础使用及进阶
提示:路径中不允许出现中文,否则scss编译会出错,大概. 按照惯例,先检查一下Node.js.npm(cnpm).gulp的版本号 1.新建package.json 我们可以通过手动新建这个配置文件 ...
- xgboost和gbdt区别
1. xgboost在目标函数中加入了正则化项,当正则化项为0时与传统的GDBT的目标函数相同2. xgboost在迭代优化的时候使用了目标函数的泰勒展开的二阶近似,paper中说能加快优化的过程!! ...
- QTP基本方法2------截取字符串
1.instr: 返回字符串在另外一个字符串中第一次出现的位置 结构:instr([start],string1,string2[,compare]) start:开始位置,可选参数,默认为1 str ...
- Linux Ubuntu出去看看
转到Ubuntu开发之后,发现不能像之前在Windows下一样直接使用GUI客户端出去看看.于是开始找梯子. 由于我的服务器端已经配置好了,只需要配置本地端即可.整个配置过程分为两步:第一步是安装本地 ...
- CGContextRef 用法总结
0 CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文1 CGContextMoveToPoint 开始画线2 CGContext ...
- 使用mongodb提供的dotnet core sdk进行地理位置运算
mongodb提供地理位置运算功能,比较常用的场景比如,先判断用户所在的街道,然后看看街道附近有啥餐厅,然后算算用户与餐厅的距离什么的,官网里提供了比较详细的demo介绍不同api的用法 此处记录下d ...
- ASP.NET Core AD 域登录 （转载）
在选择AD登录时,其实可以直接选择 Windows 授权,不过因为有些网站需要的是LDAP获取信息进行授权,而非直接依赖Web Server自带的Windows 授权功能. 当然如果使用的是Azure ...