css实现w3cschool广告轮播图

最新推荐文章于 2021-10-28 15:50:18 发布

qwe111qsx

最新推荐文章于 2021-10-28 15:50:18 发布

阅读量1.2k

点赞数 2

分类专栏： CSS 文章标签：轮播

本文链接：https://blog.csdn.net/qwe111qsx/article/details/89203884

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先来看下效果

主要用了css3的3D转换和动画(transform,animation),这个轮播效果是由三个div通过transform达到折叠的效果组合而成的,然后给它们共同的父元素div一个旋转动画效果,就完成了这个轮播的效果,需要注意,父元素必须添加transform-style: preserve-3d;否则无法达到3D的效果,下面直接上代码(由于之前为子元素加了border,导致效果不是很好,已改正):

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
    <style>
        .frame {
            position: relative;
            width: 100px;
            height: 300px;
            margin: 50px;
            transform-style: preserve-3d;
            animation: myfirst 9s linear infinite 0s;
        }

        .item {
            width: 100px;
            height: 300px;
            position: absolute;
            opacity: 0.8;
        }

        .item1 {
            background-color: red;
            transform: translateZ(28.87px);  /*面到z轴的垂直距离*/
        }

        .item2 {
            background-color: blue;
            transform: rotateY(120deg) translateZ(28.87px);
        }

        .item3 {
            background-color: yellow;
            transform: rotateY(240deg) translateZ(28.87px);
        }

        @keyframes myfirst {
            0% {
                transform: rotateY(0deg);
            }
            20% {
                transform: rotateY(120deg);
            }
            34% {
                transform: rotateY(120deg);
            }
            54% {
                transform: rotateY(240deg);
            }
            67% {
                transform: rotateY(240deg);
            }
            87% {
                transform: rotateY(360deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="frame">
            <div class="item item1"></div>
            <div class="item item2"></div>
            <div class="item item3"></div>
        </div>
    </div>
</body>

</html>

qwe111qsx

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css实现w3cschool广告轮播图

先来看下效果主要用了css3的3D转换和动画(transform,animation),这个轮播效果是由三个div通过transform达到折叠的效果组合而成的,然后给它们共同的父元素div一个旋转动画效果,就完成了这个轮播的效果,需要注意,父元素必须添加transform-style: preserve-3d;否则无法达到3D的效果,下面直接上代码(由于之前为子元素加了border,导致...
复制链接

扫一扫