布局、定位、动画、渐变
```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>
Processed:
0.017, SQL:
9
