CSS动画实例

最新推荐文章于 2023-06-24 15:31:56 发布

晚生隆海

最新推荐文章于 2023-06-24 15:31:56 发布

阅读量262

点赞数

分类专栏： web前端 # CSS 文章标签： css css3

本文链接：https://blog.csdn.net/thlchina/article/details/115867209

版权

web前端同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

CSS动画实例

一、进度条
二、涨水
三、纯CSS实现轮番播图

一、进度条

html代码

    <div class="d1">
        <div class="bar"></div>
    </div>

css代码

        .d1 {
            width: 400px;
            height: 20px;
            background-color: gray;
        }
        
        .bar {
            width: 10%;
            height: 20px;
            background-color: blue;
            animation-name: jindu;
            animation-duration: 3s;
        }

        @keyframes jindu {
            0% {}

            100% {
                width: 90%;
            }
        }

二、涨水

html代码

    <div class="d2">
        <div class="shui">111</div>
    </div>

css代码

        .d2 {
            margin-top: 50px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: #ccc;
            border: 5px solid black;
            overflow: hidden;
        }

        .shui {
            width: 100%;
            height: 20%;
            background-color: skyblue;
            /* 定位到底下 */
            position: relative;
            top: 100%;
            /* 倒立 */
            transform: scaleY(-1);
            /* 改变焦点 */
            transform-origin: top;
            animation-name: shui;
            animation-duration: 3s;
            animation-timing-function: linear;
        }

        @keyframes shui {
            0% {}

            100% {
                height: 100%;
            }
        }

三、纯CSS实现轮番播图

html

<body>
    <div class="center">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .center {
            width: 1000px;
            height: 150px;
            margin: 0 auto;
            background-color: gray;
            overflow: hidden;
        }

        ul {
            width: 200%;
            list-style: none;
            font-size: 50px;
            color: white;
            line-height: 150px;
            text-align: center;
        }

        ul:hover li {
            animation-play-state: paused;
        }

        li {
            width: 250px;
            height: 150px;
            background-color: #ccc;
            float: left;
            border: 1px solid blue;
            box-sizing: border-box;
            animation: move 6s linear infinite;
            cursor: pointer;
        }

        @keyframes move {
            0% {}

            100% {
                transform: translateX(-1000px)
            }
        }
    </style>

晚生隆海

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS动画实例

CSS动画实例一、进度条二、涨水一、进度条html代码 <div class="d1"> <div class="bar"></div> </div>css代码 .d1 { width: 400px; height: 20px; background-color: gray; }
复制链接

扫一扫