码迷,mamicode.com
首页 > Web开发 > 详细

CSS3—正方体广告轮播

时间:2020-03-31 22:53:30      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:frame   stat   info   广告轮播   alt   ima   lin   lang   center   

正方体4个面广告滚动:

纵向4个面为广告图片,通过动画自动旋转播放显示如图:

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 200px;
            height: 200px;
            /*border: 1px solid #000;*/
            margin: 0 auto;
            margin-top: 150px;
            list-style: none;
            transform-style:preserve-3d;/*给父元素设置该属性可将子元素以3D效果展示,默认为2D*/
            position: relative;
            transform: rotateX(0deg) rotateY(0deg);
            animation: xuanzuan 10s linear 0s infinite;
        }
        ul:hover{
            animation-play-state:paused;
        }
        @keyframes xuanzuan {
            from{
                transform: rotateX(0deg);
            }
            to{
                transform: rotateX(360deg);
            }
        }
        ul li{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 40px;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul li:nth-of-type(1){
            background-color: red;
            transform:rotateX(360deg) translateZ(100px);
        }
        ul li:nth-of-type(2){
            background-color: green;
            transform:rotateX(270deg) translateZ(100px);
        }
        ul li:nth-of-type(3){
            background-color: blue;
            transform:rotateX(180deg) translateZ(100px);
        }
        ul li:nth-of-type(4){
            background-color: yellow;
            transform:rotateX(90deg) translateZ(100px);
        }
        ul li:nth-of-type(5){
            background-color: salmon;
            transform:rotateY(90deg) translateZ(100px) ;
        }
        ul li:nth-of-type(6){
            background-color: fuchsia;
            transform:rotateY(270deg) translateZ(100px) ;
        }
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div>
    <hr>
    <ul>
        <li><img src="video/images/girl.jpg" alt=""></li>
        <li><img src="video/images/banner2.jpg" alt=""></li>
        <li><img src="video/images/banner3.jpg" alt=""></li>
        <li><img src="video/images/banner4.jpg" alt=""></li>
        <li><img src="video/images/banner4.jpg" alt=""></li>
        <li><img src="video/images/banner4.jpg" alt=""></li>
    </ul>
    <hr>
</div>

</body>
</html>

 

CSS3—正方体广告轮播

标签:frame   stat   info   广告轮播   alt   ima   lin   lang   center   

原文地址:https://www.cnblogs.com/2020-2-12/p/12608984.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!