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 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

随机推荐

PhoneGap模仿微信摇一摇功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
BZOJ 3211 花神游历各国线段树平方开根
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3211 题目大意: 思路: 由于数据范围只有1e9,一个数字x开根号次数超过logx之后 ...
Linux下的MBR分区
MBR分区下面讲一讲如何给一块新添加入服务器的硬盘做MBR分区,那么为什么叫做MBR分区呢?后面会讲做MBR分区,使用系统自带的fdisk工具.先看一看什么是fdisk,在命令行输入“fdisk” ...
python下操作redis
python安装这里我只介绍如何在Windows上安装redis,以及接下来的实践都是在Windows上进行的.在Windows上安装python的依赖库,常用的方法有两种,第一种是直接通过pip i ...
iOS绘图事务的运行验证
结合WWDC,以我们的call stack为例,来说明这四个过程分别大概都做了什么. layout过程从上面layout的过程可以看出,其所做的主要任务就是将图层调用代理(也就是视图)实现整个视图层 ...
redis.conf 具体配置详解
redis.conf 具体配置详解 # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => ...
Linux 循环遍历文件目录
操作系统: Unbuntu 问题域:在一个文件目录下,嵌套有多个子目录,需要遍历这些子目录,并在子目录下进行相关操作,譬如:批量重命名,目录下的文件:又或者需要,设定工程目录(mvn versions ...
ROIPooing
暂时不纠结 faster rcnn 最后一步是不是全连接层(gluoncv里面是rcnn层): 说一下feature map 和 anchor (Proposal) 作为输入,怎么计算ROIPooin ...
查看oracle中表的索引
oracle中表的索引信息存在 user_indexes 和 user_ind_columns 两张表里面, 其中, user_indexes 系统视图存放是索引的名称以及该索引是否是唯一索引等信息, ...
8、Spring Cloud-配置中心 Spring Cloud Config（待补充）
8.1.Config Server 本地读取配置文件 Config Server 可以从本地仓库读取配置文件,也可以从远处 Git 仓库读取. 本地仓库是指将所有的配置文件统写在 Config ...

HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）的更多相关文章

随机推荐

热门专题