用CSS 2D 3D实现一个简单的跑马灯效果页面

最新推荐文章于 2023-04-02 22:57:46 发布

Friday--星期五

最新推荐文章于 2023-04-02 22:57:46 发布

阅读量263

点赞数

分类专栏： CSS 学习笔记文章标签：定位 css animation css3 html

本文链接：https://blog.csdn.net/qq_45644092/article/details/105224960

版权

CSS 学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

跑马灯使用了定位+2d+3d+动画

animation-name:规定@keyframes动画的名称；
animation-duration：规定动画完成一个周期所花费的时间
animation-timing-function：规定动画的速度曲线，默认是“ease”，linear均速：
animation-delay：规定动画何时开始，默认是0；
animation-iteration-count：规定动画被播放的次数，默认是1，还有 “infinite”;
animation-direction:动画是否在下一周期逆向播放，默认是 normal，逆播放 alternate；
animation-play-state：规定动画是否运行和暂停，默认是 running 还有 paused；
animation-fill-mode：规定动画结束后的状态，保持是 forwards，回到起始 backwards
animation：是所有动画属性的简写属性

注意：简写属性顺序没有规定，第一个是时间时长，第二个是延迟

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑马灯</title>
    <style>
    /*重置默认样式*/
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        body {
            background: #1f1010;
        }
        .box {
            width: 200px;
            height: 300px;
            margin: 100px auto;
        }
        ul {
            position: relative;
            width: 200px;
            height: 300px;
            /*告诉浏览器这个盒子将来按照3d的方式渲染*/
            transform-style: preserve-3d;
            /*动画简写：名称 时长 均速 次数*/
            animation: nam 9s linear infinite ;
        }
        li {
            position: absolute;
        }
        /*计算每个图片旋转的角度 rotate  deg是单位*/
        .box li:nth-child(1) {
            transform: rotateY(0deg) translateZ(274px)
        }
        .box li:nth-child(2) {
            transform: rotateY(40deg) translateZ(274px) 
        }
         .box li:nth-child(3) {
            transform: rotateY(80deg) translateZ(274px) 
        } 
        .box li:nth-child(4) {
            transform: rotateY(120deg) translateZ(274px) 
        }
        .box li:nth-child(5) {
            transform: rotateY(160deg) translateZ(274px) 
        }
        .box li:nth-child(6) {
            transform: rotateY(200deg) translateZ(274px) 
        }
         .box li:nth-child(7) {
            transform: rotateY(240deg) translateZ(274px) 
        } 
        .box li:nth-child(8) {
            transform: rotateY(280deg) translateZ(274px) 
        }
        .box li:nth-child(9) {
            transform: rotateY(320deg) translateZ(274px) 
        }
        /*执行动画 nam*/
        @keyframes nam {
        /*开始*/
            0%{
          transform: rotateX(-15deg) rotateY(0deg);
            }
            /*结束*/
            100% {
                transform: rotateX(-15deg) rotateY(360deg);
            }
        }
        /*鼠标悬停时停止*/
        ul:hover {
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="3D转换/images/1.png" alt=""></li>
            <li><img src="3D转换/images/2.png" alt=""></li>
            <li><img src="3D转换/images/3.png" alt=""></li>
            <li><img src="3D转换/images/4.png" alt=""></li>
            <li><img src="3D转换/images/5.png" alt=""></li>
            <li><img src="3D转换/images/6.png" alt=""></li>
            <li><img src="3D转换/images/7.png" alt=""></li>
            <li><img src="3D转换/images/8.png" alt=""></li>
            <li><img src="3D转换/images/9.png" alt=""></li>
        </ul>
    </div>
</body>
</html>