主动式动画

最新推荐文章于 2024-04-21 08:29:44 发布

天翊

最新推荐文章于 2024-04-21 08:29:44 发布

阅读量141

点赞数

分类专栏：前端web

本文链接：https://blog.csdn.net/zh_flowers/article/details/108928484

版权

前端web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

布局、定位、动画、渐变
```cpp
 <style>
        #box1{
            width: 30px;
            height: 13px;
            background-color: rgb(68, 158, 243);
            margin:105px auto 0px;
            border-radius:5px;
            
            
        }
        #content{
            width: 100px;
            height: 200px;
            border: 2px solid #ccc;
            box-shadow: 0px 0px 2px 1px;
            border-radius: 10px;
            margin: -2px auto;  
        
            overflow: hidden; 
        }
        #color{
            width: 100px;
            height: 200px;
            animation: name 2s  ease-in 0.5s infinite ;
            background: linear-gradient(to top,rgb(66, 66, 248) 0%, #21cc21 50%, rgb(78, 78, 209) 80%);
        }
        @keyframes name{
            0% {
               transform: translateY(100%);
            }
           
            100% {
                transform: translateY(0%);
                }
        }


    </style>
</head>
<body>
    <div id="box">
        <div id="box1"></div>
        <div id="content">
            <div id="color"></div>
        </div>
    </div>
</body>
</html>