zoukankan      html  css  js  c++  java
  • 利用css3渐变效果实现圆环旋转效果

    * {
                margin: 0;
                padding: 0;
            }
            
            .stage {
                width: 200px;
                height: 130px;
                margin: 100px auto;
                position: relative;
                perspective: 1300px;
                perspective-origin: 100px -400px;
            }
            
            .stage ul {
                list-style: none;
                width: 100%;
                height: 100%;
            }
            
            img {
                backface-visibility: hidden;
            }
            
            #ring {
                width: 200px;
                height: 130px;
                position: absolute;
                top: 0;
                /*transform: rotateY(0deg);*/
                left: 0;
                transform-style: preserve-3d;
                transition: all 1s ease 0s;
            }
            
            .stage ul li {
                position: absolute;
                top: 0;
                left: 0;
                /*transform-origin: 30% 50%;*/
            }
            
            .stage ul li:nth-of-type(1) {
                transform: rotateY(0deg) translateZ(308px);
            }
            
            .stage ul li:nth-of-type(2) {
                transform: rotateY(36deg) translateZ(308px);
            }
            
            .stage ul li:nth-of-type(3) {
                transform: rotateY(72deg) translateZ(308px);
            }
            
            .stage ul li:nth-of-type(4) {
                transform: rotateY(108deg) translateZ(308px);
            }
            
            .stage ul li:nth-of-type(5) {
                transform: rotateY(144deg) translateZ(308px);
            }
            
            .stage ul li:nth-of-type(6) {
                transform: rotateY(180deg) translateZ(308px);
            }
            
            .stage ul li:nth-of-type(7) {
                transform: rotateY(216deg) translateZ(308px);
            }
            
            .stage ul li:nth-of-type(8) {
                transform: rotateY(252deg) translateZ(308px);
            }
            
            .stage ul li:nth-of-type(9) {
                transform: rotateY(288deg) translateZ(308px);
            }
            
            .stage ul li:nth-of-type(10) {
                transform: rotateY(324deg) translateZ(308px);
            }
            
            h2 {
                position: absolute;
                z-index: 10;
                opacity: 0.8;
                color: hotpink;
            }
    window.onload = function() {
                var ring = document.getElementById('ring');
                var lis = ring.getElementsByTagName('li');
    
                for (var i = 0; i < lis.length; i++) {
                    lis[i].idx = i;
                    lis[i].onclick = function() {
                        ring.style.transform = 'rotateY(-' + (this.idx * 36) + 'deg)';
                    }
                }
            }
     <div class="stage">
            <h2>点我我到最前面</h2>
            <ul id="ring">
    
                <li><img src="images/88/1.jpg" alt=""></li>
                <li><img src="images/88/2.jpg" alt=""></li>
                <li><img src="images/88/3.jpg" alt=""></li>
                <li><img src="images/88/4.jpg" alt=""></li>
                <li><img src="images/88/5.jpg" alt=""></li>
                <li><img src="images/88/10.jpg" alt=""></li>
                <li><img src="images/88/6.jpg" alt=""></li>
                <li><img src="images/88/7.jpg" alt=""></li>
                <li><img src="images/88/8.jpg" alt=""></li>
                <li><img src="images/88/9.jpg" alt=""></li>
            </ul>
        </div>

    图片的选择需要选择400*400的图片

  • 相关阅读:
    输出函数
    curl
    页眉的章名和章名不统一
    水平柱状图
    目录和正文的页码生成
    protobuf的使用
    yarn vue安装
    nvm node的安装
    win安装postman
    机器码
  • 原文地址:https://www.cnblogs.com/qqfontofweb/p/6682664.html
Copyright © 2011-2022 走看看