技术思绪摘录旅行
CSS3,让你的网页更加酷炫,这个动效是我看到qq浏览器的时候,被这个惊艳的效果所震撼,网页还能这个样子的吗?

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3D动画</title>
    <style>
        @-webkit-keyframes x {
            from {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) 
                rotateX(0deg) rotateY(0deg) rotateZ(0deg) 
                scaleX(1) scaleY(1) scaleZ(1);
                -moz-transform: translateX(0) translateY(0) translateZ(0) 
                rotateX(0deg) rotateY(0deg) rotateZ(0deg) 
                scaleX(1) scaleY(1) scaleZ(1);
                -ms-transform: translateX(0) translateY(0) translateZ(0) 
                rotateX(0deg) rotateY(0deg) rotateZ(0deg) 
                scaleX(1) scaleY(1) scaleZ(1);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) 
                rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
            }
            to {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(360deg) 
                rotateY(0deg) rotateZ(0deg) 
                scaleX(1) scaleY(1) scaleZ(1);
                -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(360deg) 
                rotateY(0deg) rotateZ(0deg) 
                scaleX(1) scaleY(1) scaleZ(1);
                -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(360deg) 
                rotateY(0deg) rotateZ(0deg) 
                scaleX(1) scaleY(1) scaleZ(1);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(360deg)
                 rotateY(0deg)
                rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
            }
        }

        @-webkit-keyframes y {
            from {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) 
                rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
                -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg)
                 rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
                -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) 
                rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg)
                 rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
            }
            to {
                -webkit-transform: translateX(0) translateY(0) 
                translateZ(0) rotateX(0deg) rotateY(360deg)
                 rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
                -moz-transform: translateX(0) translateY(0) 
                translateZ(0) rotateX(0deg) rotateY(360deg)
                 rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
                -ms-transform: translateX(0) translateY(0) 
                translateZ(0) rotateX(0deg) rotateY(360deg)
                 rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg)
                 rotateY(360deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
            }
        }

        @-webkit-keyframes z {
            from {
                -webkit-transform: translateX(0) translateY(0)
                 translateZ(0) rotateX(0deg) rotateY(0deg)
                 rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
                -moz-transform: translateX(0) translateY(0)
                 translateZ(0) rotateX(0deg) rotateY(0deg) 
                rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
                -ms-transform: translateX(0) translateY(0) 
                translateZ(0) rotateX(0deg) rotateY(0deg) 
                rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) 
                rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
            }
            to {
                -webkit-transform: translateX(0) translateY(0) 
                translateZ(0) rotateX(0deg) rotateY(0deg)
                 rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
                -moz-transform: translateX(0) translateY(0) 
                translateZ(0) rotateX(0deg) rotateY(0deg)
                 rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
                -ms-transform: translateX(0) translateY(0) 
                translateZ(0) rotateX(0deg) rotateY(0deg)
                 rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg)
                 rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
            }
        }

        * {
            padding: 0;
            margin: 0;
        }

        div, ul, span, li, img {
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        html, body {
            width: 100%;
            height: 100%;
            background: #305EA3;
        }

        .main {
            padding: 50px;
            width: 500px;
            height: 500px;
            margin: 0px auto 0px auto;
            position: relative;
            -webkit-transform: translateX(30px) translateY(-20px) translateZ(200px)
             rotateX(75deg) rotateY(0deg) rotateZ(15deg) scaleX(1) scaleY(1) scaleZ(1);
            -moz-transform: translateX(30px) translateY(-20px) translateZ(200px)
             rotateX(75deg) rotateY(0deg) rotateZ(15deg) scaleX(1) scaleY(1) scaleZ(1);
            -ms-transform: translateX(30px) translateY(-20px) translateZ(200px)
             rotateX(75deg) rotateY(0deg) rotateZ(15deg) scaleX(1) scaleY(1) scaleZ(1);
            transform: translateX(30px) translateY(-20px) translateZ(200px) 
            rotateX(75deg) rotateY(0deg) rotateZ(15deg) scaleX(1) scaleY(1) scaleZ(1);
        }
        .main ul, .main li,.main img{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 500px;
            height: 500px;
            list-style: none;
        }
       .main ul li   .round {
            -webkit-animation: z 3s linear 0s infinite;
            -moz-animation: z 3s linear 0s infinite;
            -ms-animation: z 3s linear 0s infinite;
            animation: z 3s linear 0s infinite;
        }
        .main ul li{
            border: 2px solid #5ec0ff;
            border-radius: 1000px;
        }
        .main ul li:nth-child(1){
            -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) 
            rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
            -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) 
            rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
            -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg)
             rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
            transform: translateX(0) translateY(0) translateZ(0)
             rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
        }
        .main ul li:nth-child(2){
            -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg)
             rotateY(60deg) rotateZ(120deg) scaleX(1) scaleY(1) scaleZ(1);
            -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg)
             rotateY(60deg) rotateZ(120deg) scaleX(1) scaleY(1) scaleZ(1);
            -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg)
             rotateY(60deg) rotateZ(120deg) scaleX(1) scaleY(1) scaleZ(1);
            transform: translateX(0) translateY(0) translateZ(0)
             rotateX(0deg) rotateY(60deg) rotateZ(120deg) scaleX(1) scaleY(1) scaleZ(1);
        }
        .main ul li:nth-child(3){
            -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg)
             rotateY(-60deg) rotateZ(-120deg) scaleX(1) scaleY(1) scaleZ(1);
            -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg)
             rotateY(-60deg) rotateZ(-120deg) scaleX(1) scaleY(1) scaleZ(1);
            -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg)
             rotateY(-60deg) rotateZ(-120deg) scaleX(1) scaleY(1) scaleZ(1);
            transform: translateX(0) translateY(0) translateZ(0)
             rotateX(0deg) rotateY(-60deg) rotateZ(-120deg) scaleX(1) scaleY(1) scaleZ(1);
        }
      .main ul {
            -webkit-animation: y 20s linear 0s infinite;
            -moz-animation: y 20s linear 0s infinite;
            -ms-animation: y 20s linear 0s infinite;
            animation: y 20s linear 0s infinite;
        }
        .glowlogo img{
            width: 150px;
            height: 150px;
        }
        .glowlogo {
            width: 200px;
            height: 200px;
             -webkit-transition: All 0.4s 0s;
             -moz-transition: All 0.4s 0s;
             -ms-transition: All 0.4s 0s;
             transition: All 0.4s 0s;
             -webkit-transform: translateX(110px) translateY(0px) translateZ(-55px)
              rotateX(-75deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
             -moz-transform: translateX(110px) translateY(0px) translateZ(-55px)
              rotateX(-75deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
             -ms-transform: translateX(110px) translateY(0px) translateZ(-55px)
              rotateX(-75deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
             transform: translateX(110px) translateY(0px)
              translateZ(-55px) rotateX(-75deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);

         }
    </style>
</head>
<body>
<div>
    <div>
        <img src="images/page2_glowlogo.png">
    </div>
    <ul>
        <li>
             <img src="images/ttround.png">
        </li>
        <li>
             <img src="images/ttround.png">
        </li>
        <li>
             <img src="images/ttround.png">
        </li>
    </ul>
</div>
</body>
</html>


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫