CSS3折页扇子翻转动画效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3折页扇子翻转动画效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML5纸带翻转动画</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>

    <h2 id="msg" class="msg">Move the mouse around</h2>
    <div id="cont" class="cont">
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
        <div class="fold"></div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

(function(){
	var cont = document.querySelector('#cont');
	document.addEventListener('mousemove',updRotation,false);
	function updRotation(e){
	document.querySelector('#msg').style.opacity = 0;
	cont.style.webkitTransform = 'rotateY(' + e.x / 10 + 'deg) rotateZ(-' + e.y / 10 + 'deg)';
	cont.style.transform = 'rotateY(' + e.x / 10 + 'deg) rotateZ(-' + e.y / 10 + 'deg)';
}
}
)();

CSS代码(style.css):

html,body{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:#334D5C;}
.cont{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1000px;-ms-perspective:1000px;perspective:1000px;-webkit-transform:translate3d(0,0,0) rotateY(40deg);-ms-transform:translate3d(0,0,0) rotateY(40deg);transform:translate3d(0,0,0) rotateY(40deg);}
.msg{color:#fff;-webkit-transition:opacity .4s ease;transition:opacity .4s ease;font-family:"Myriad Pro","Trebuchet MS",sans-serif;font-size:2em;font-weight:200;}
.fold{background:rgba(255,255,255,0.8);height:150px;width:20px;-webkit-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top;-webkit-animation:rotate-fold 4s infinite ease;animation:rotate-fold 4s infinite ease;}
.fold:nth-child(1){-webkit-animation-delay:0.05s;animation-delay:0.05s;}
.fold:nth-child(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;}
.fold:nth-child(3){-webkit-animation-delay:0.15s;animation-delay:0.15s;}
.fold:nth-child(4){-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.fold:nth-child(5){-webkit-animation-delay:0.25s;animation-delay:0.25s;}
.fold:nth-child(6){-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.fold:nth-child(7){-webkit-animation-delay:0.35s;animation-delay:0.35s;}
.fold:nth-child(8){-webkit-animation-delay:0.4s;animation-delay:0.4s;}
.fold:nth-child(9){-webkit-animation-delay:0.45s;animation-delay:0.45s;}
.fold:nth-child(10){-webkit-animation-delay:0.5s;animation-delay:0.5s;}
.fold:nth-child(11){-webkit-animation-delay:0.55s;animation-delay:0.55s;}
.fold:nth-child(12){-webkit-animation-delay:0.6s;animation-delay:0.6s;}
.fold:nth-child(13){-webkit-animation-delay:0.65s;animation-delay:0.65s;}
.fold:nth-child(14){-webkit-animation-delay:0.7s;animation-delay:0.7s;}
.fold:nth-child(15){-webkit-animation-delay:0.75s;animation-delay:0.75s;}
.fold:nth-child(16){-webkit-animation-delay:0.8s;animation-delay:0.8s;}
.fold:nth-child(17){-webkit-animation-delay:0.85s;animation-delay:0.85s;}
.fold:nth-child(18){-webkit-animation-delay:0.9s;animation-delay:0.9s;}
.fold:nth-child(19){-webkit-animation-delay:0.95s;animation-delay:0.95s;}
.fold:nth-child(20){-webkit-animation-delay:1s;animation-delay:1s;}
.fold:nth-child(21){-webkit-animation-delay:1.05s;animation-delay:1.05s;}
.fold:nth-child(22){-webkit-animation-delay:1.1s;animation-delay:1.1s;}
.fold:nth-child(23){-webkit-animation-delay:1.15s;animation-delay:1.15s;}
.fold:nth-child(24){-webkit-animation-delay:1.2s;animation-delay:1.2s;}
.fold:nth-child(25){-webkit-animation-delay:1.25s;animation-delay:1.25s;}
.fold:nth-child(26){-webkit-animation-delay:1.3s;animation-delay:1.3s;}
.fold:nth-child(27){-webkit-animation-delay:1.35s;animation-delay:1.35s;}
.fold:nth-child(28){-webkit-animation-delay:1.4s;animation-delay:1.4s;}
.fold:nth-child(29){-webkit-animation-delay:1.45s;animation-delay:1.45s;}
.fold:nth-child(30){-webkit-animation-delay:1.5s;animation-delay:1.5s;}
.fold:nth-child(31){-webkit-animation-delay:1.55s;animation-delay:1.55s;}
.fold:nth-child(32){-webkit-animation-delay:1.6s;animation-delay:1.6s;}
.fold:nth-child(33){-webkit-animation-delay:1.65s;animation-delay:1.65s;}
.fold:nth-child(34){-webkit-animation-delay:1.7s;animation-delay:1.7s;}
.fold:nth-child(35){-webkit-animation-delay:1.75s;animation-delay:1.75s;}
.fold:nth-child(36){-webkit-animation-delay:1.8s;animation-delay:1.8s;}
.fold:nth-child(37){-webkit-animation-delay:1.85s;animation-delay:1.85s;}
.fold:nth-child(38){-webkit-animation-delay:1.9s;animation-delay:1.9s;}
.fold:nth-child(39){-webkit-animation-delay:1.95s;animation-delay:1.95s;}
.fold:nth-child(40){-webkit-animation-delay:2s;animation-delay:2s;}
.fold:nth-child(41){-webkit-animation-delay:2.05s;animation-delay:2.05s;}
.fold:nth-child(42){-webkit-animation-delay:2.1s;animation-delay:2.1s;}
.fold:nth-child(43){-webkit-animation-delay:2.15s;animation-delay:2.15s;}
.fold:nth-child(44){-webkit-animation-delay:2.2s;animation-delay:2.2s;}
.fold:nth-child(45){-webkit-animation-delay:2.25s;animation-delay:2.25s;}
.fold:nth-child(46){-webkit-animation-delay:2.3s;animation-delay:2.3s;}
.fold:nth-child(47){-webkit-animation-delay:2.35s;animation-delay:2.35s;}
.fold:nth-child(48){-webkit-animation-delay:2.4s;animation-delay:2.4s;}
.fold:nth-child(49){-webkit-animation-delay:2.45s;animation-delay:2.45s;}
.fold:nth-child(50){-webkit-animation-delay:2.5s;animation-delay:2.5s;}
@-webkit-keyframes rotate-fold{from{-webkit-transform:rotateX(0);transform:rotateX(0);}
to{-webkit-transform:rotateX(360deg);transform:rotateX(360deg);}
}
@keyframes rotate-fold{from{-webkit-transform:rotateX(0);transform:rotateX(0);}
to{-webkit-transform:rotateX(360deg);transform:rotateX(360deg);}
}

附件:下载该文件资源,减少时间成本(增值服务)