找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3制作标签云效果

2019-01-27 分类：CSS 阅读(1290) 评论(0)
前端开发怎样禁止页面滚动
前端开发页面时被插入广告
前端开发页面优化
<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>云标签</title>
        <style type=”text/css”>
            body {
                perspective: 800;
                -webkit-perspective: 800;
                background: #000;
            }
            a {
                display: block;
                width: 50px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                font-size: 16px;
                color: #fff;
                text-decoration: none;
            }
            a:hover {
                border: 1px solid #fff;
            }
            #wrap {
                transform-style: preserve-3d;
                width: 500px;
                height: 500px;
                margin: 100px auto;
                animation: rotate 6s linear infinite;
            }
            #wrap > div {
                width: 50px;
                height: 20px;
                text-align: center;
                line-height: 20px;
            }
            #wrap > div:hover {
                animation-play-state: paused;
            }
            #wrap > div:nth-child(1) {
                transform: translateX(230px) translateY(220px) translateZ(50px)
                    rotateY(360deg);
                animation: fan1 6s linear infinite;
            }
            #wrap > div:nth-child(2) {
                transform: translateX(260px) translateY(120px) translateZ(150px)
                    rotateY(360deg);
                animation: fan2 6s linear infinite;
            }
            #wrap > div:nth-child(3) {
                transform: translateX(130px) translateY(100px) translateZ(0px)
                    rotateY(360deg);
                animation: fan3 6s linear infinite;
            }
            #wrap > div:nth-child(4) {
                transform: translateX(330px) translateY(250px) translateZ(0px)
                    rotateY(360deg);
                animation: fan4 6s linear infinite;
            }
            #wrap > div:nth-child(5) {
                transform: translateX(130px) translateY(150px) translateZ(120px)
                    rotateY(360deg);
                animation: fan5 6s linear infinite;
            }
            #wrap > div:nth-child(6) {
                transform: translateX(50px) translateY(220px) translateZ(50px)
                    rotateY(360deg);
                animation: fan6 6s linear infinite;
            }
            @keyframes rotate {
                0% {
                    transform: rotateY(360deg);
                }
                100% {
                    transform: rotateY(0deg);
                }
            }
            @keyframes fan1 {
                0% {
                    transform: translateX(230px) translateY(220px)
                        translateZ(50px) rotateY(0deg);
                }
                100% {
                    transform: translateX(230px) translateY(220px)
                        translateZ(50px) rotateY(360deg);
                }
                /*translateX(230px) translateY(220px)*/
            }
            @keyframes fan2 {
                0% {
                    transform: translateX(260px) translateY(120px)
                        translateZ(150px) rotateY(0deg);
                }
                100% {
                    transform: translateX(260px) translateY(120px)
                        translateZ(150px) rotateY(360deg);
                }
            }
            @keyframes fan3 {
                0% {
                    transform: translateX(130px) translateY(100px)
                        translateZ(0px) rotateY(0deg);
                }
                100% {
                    transform: translateX(130px) translateY(100px)
                        translateZ(0px) rotateY(360deg);
                }
            }
            @keyframes fan4 {
                0% {
                    transform: translateX(330px) translateY(250px)
                        translateZ(0px) rotateY(0deg);
                }
                100% {
                    transform: translateX(330px) translateY(250px)
                        translateZ(0px) rotateY(360deg);
                }
            }
            @keyframes fan5 {
                0% {
                    transform: translateX(130px) translateY(150px)
                        translateZ(120px) rotateY(0deg);
                }
                100% {
                    transform: translateX(130px) translateY(150px)
                        translateZ(120px) rotateY(360deg);
                }
            }
            @keyframes fan6 {
                0% {
                    transform: translateX(50px) translateY(220px)
                        translateZ(50px) rotateY(0deg);
                }
                100% {
                    transform: translateX(50px) translateY(220px)
                        translateZ(50px) rotateY(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div id=”wrap”>
            <div><a href=”#”>魅力</a></div>
            <div><a href=”#”>美丽</a></div>
            <div><a href=”#”>大方</a></div>
            <div><a href=”#”>可爱</a></div>
            <div><a href=”#”>鲜花</a></div>
            <div><a href=”#”>掌聲</a></div>
        </div>
    </body>
</html>
前端页面开发模板
如何快速开发前端页面
前端开发中跳转页面的方式总结
赞(0)
前端开发者 » 前端开发CSS3制作标签云效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论