CSS3+JavaScript效果：胶卷式放映

最新推荐文章于 2022-07-17 05:37:32 发布

weixin_30929011

最新推荐文章于 2022-07-17 05:37:32 发布

阅读量186

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qiancheng123/p/6361111.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>胶卷式放映</title>
    <style type="text/css" id="style1">
        * {
            margin: 0;
            padding: 0
        }
        body{
            background: black;
        }
        #wrap {
            width: 150px;
            height: 120px;
            margin: 200px auto;
            perspective: 2000px;
        }
        #wrap ul {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation:move 12s 3.2s infinite ;
        }
        #wrap ul li {
            top: 0;
            left: 0;
            position: absolute;
            width: 148px;
            height: 118px;
            line-height: 118px;
            text-align: center;
            font-size: 118px;
            background: grey;
            border: 1px solid #ccc;
            box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            overflow: hidden;
        }
        .shadow{
            width: 1200px;
            height: 1200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -600px;
            margin-top: -600px;
            background: radial-gradient(600px 600px at center,rgba(50,50,50,0.8),rgba(0,0,0,0));
            transform: rotateX(90deg) translateZ(-150px);
        }
    </style>
</head>
<body>
<div id="wrap">
    <ul>
        <li>！</li>
        <li>师</li>
        <li>程</li>
        <li>工</li>
        <li>端</li>
        <li>前</li>
        <li>的</li>
        <li>秀</li>
        <li>优</li>
        <li>最</li>
        <li>上</li>
        <li>史</li>
        <li>历</li>
        <li>类</li>
        <li>人</li>
        <li>是</li>
        <li>成</li>
        <li>钱</li>
    </ul>
    <div class="shadow"></div>
</div>
</body>
</html>
<script>
    var oLis = document.querySelectorAll("#wrap li");
    var oStyle = document.querySelector("#style1");
    var len=oLis.length;
    var aaa=null;
    for (var i = 1; i <=len; i++) {
        (function(i){
           window.setTimeout(function(){
               oStyle.innerHTML
                       += " #wrap ul li:nth-child("
                       + i
                       + "){transform:rotateY("
                       +(len-i) * (360/len)
                       + "deg) translateZ(500px);transition:0.7s;transition-delay:"
                       +(i*0.1)
                       +"s}";
           },100);
        })(i);
    }

    for(i=0;i<=len;i++){
        aaa+=100/len*i+"%{transform: rotateY("+-360/len*i+"deg);}"
    }
    oStyle.innerHTML+="@keyframes move {"+aaa+"}";
</script>

转载于:https://www.cnblogs.com/qiancheng123/p/6361111.html

weixin_30929011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3+JavaScript效果：胶卷式放映

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>胶卷式放映</title> <style type="text/css" id="style1"> * { margin: 0...
复制链接

扫一扫