轮播图（2）

最新推荐文章于 2021-03-25 20:49:53 发布

贰拾壹先生

最新推荐文章于 2021-03-25 20:49:53 发布

阅读量91

点赞数 1

分类专栏： Web前端文章标签：旋转木马轮播 js css html

本文链接：https://blog.csdn.net/zheng18237111686/article/details/114679435

版权

Web前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

轮播（2）

轮播，又称旋转木马（二）

1，需求，

旋转木马，通过CSS动画实现，也参考了网络牛人思路，实现了不同的两种，其实本质都一样，特此分享出来，方便有需要的同学

2，原理

通过设置CSS动效，设置容器里面的每一个DIV的旋转角度，和背景颜色，这里，我们依然没有图片，通过背景代替图片，

其中：添加 perspective 属性时，其子元素会获得透视效果，而不是元素本身，视为了增强视觉

3，代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现3D旋转木马效果</title>
    <style type="text/css">
    body {
        perspective: 1000px;
    }
     section {
         position: relative;
         width: 300px;
         height: 200px;
         margin: 150px auto;
         animation: rotate 20s linear infinite;
         transform-style: preserve-3d;
     }   
     section div{
         position: absolute;
         top: 0px;
         left: 0px;
         width: 200px;
         height: 200px;
         cursor: pointer;
     }
     section:hover {
         animation-play-state: paused;
         background-color: red;
     }
     section div:nth-child(1) {
         transform: rotateY(0deg) translateZ(300px);
         background-color: palegreen;
     }
     section div:nth-child(2) {
         transform: rotateY(60deg) translateZ(300px);
         background-color: royalblue;
     }
     section div:nth-child(3) {
         transform: rotateY(120deg) translateZ(300px);
         background-color: slateblue;
     }
     section div:nth-child(4) {
         transform: rotateY(180deg) translateZ(300px);
         background-color: black;
     }
     section div:nth-child(5) {
         transform: rotateY(240deg) translateZ(300px);
         background-color: yellowgreen;
     }
     section div:nth-child(6) {
         transform: rotateY(300deg) translateZ(300px);
         background-color: blue;
     }
     @keyframes rotate {
         0% {
             transform: rotateY(0deg);
         }
         100% {
             transform: rotateY(360deg);
         }
     }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

4, 运行效果

在这里插入图片描述

贰拾壹先生

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图（2）

轮播（2）轮播，又称旋转木马（二）1，需求，旋转木马，通过CSS动画实现，也参考了网络牛人思路，实现了不同的两种，其实本质都一样，特此分享出来，方便有需要的同学2，原理通过设置CSS动效，设置容器里面的每一个DIV的旋转角度，和背景颜色，这里，我们依然没有图片，通过背景代替图片，其中：添加 perspective 属性时，其子元素会获得透视效果，而不是元素本身，视为了增强视觉3，代码<!DOCTYPE html><html lang="en"
复制链接

扫一扫