CSS动画实例

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">111div>
    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>1li>
            <li>2li>
            <li>3li>
            <li>4li>
            <li>1li>
            <li>2li>
            <li>3li>
            <li>4li>
        ul>
    div>
body>
  • css
    

你可能感兴趣的:(web前端,#,CSS,css,css3)