DNA螺旋结构
我们先来看看效果如何
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第五天</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="line"></div>
</div>
</body>
</html>
css代码
:root{
--background-color:#2c3e50;
--line-color:slategray;
}
*{
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.item{
position: relative;
width: 120px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
/* background-color:cadetblue; */
}
.item .line{
width: 120px;
height: 3px;
background-color: var(--line-color);
animation: line_width_change 1s linear infinite;
}
@keyframes line_width_change{
0%,100%{
width:100%;
}
50%{
width:0%;
}
}
.item::before,.item::after{
position: absolute;
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background-color: yellow;
}
.item::before{
background-color: salmon;
left: -15px;
animation: circle_move1 2s linear infinite;
z-index: 100;
}
.item::after{
background-color: seagreen;
right: -15px;
animation: circle_move2 2s linear infinite;
z-index: 200;
}
@keyframes circle_move1{
0%{
left: -15px;
width: 20px;
height: 20px;
z-index: 100;
}
25%{
width: 10px;
height: 10px;
}
50%{
left: 105px;
width: 20px;
height: 20px;
}
75%{
width: 30px;
height: 30px;
}
100%{
left: -15px;
width: 20px;
height: 20px;
z-index: 200;
}
}
@keyframes circle_move2{
0%{
right: -15px;
width: 20px;
height: 20px;
z-index: 100;
}
25%{
width: 30px;
height: 30px;
}
50%{
right: 105px;
width: 20px;
height: 20px;
}
75%{
width: 10px;
height: 10px;
}
100%{
right: -15px;
width: 20px;
height: 20px;
z-index: 200;
}
}
.item:nth-child(1) .line,.item:nth-child(1)::before,.item:nth-child(1)::after{
animation-delay: 0.1s;
}
.item:nth-child(2) .line,.item:nth-child(2)::before,.item:nth-child(2)::after{
animation-delay: 0.2s;
}
.item:nth-child(3) .line,.item:nth-child(3)::before,.item:nth-child(3)::after{
animation-delay: 0.3s;
}
.item:nth-child(4) .line,.item:nth-child(4)::before,.item:nth-child(4)::after{
animation-delay: 0.4s;
}
.item:nth-child(5) .line,.item:nth-child(5)::before,.item:nth-child(5)::after{
animation-delay: 0.5s;
}
.item:nth-child(6) .line,.item:nth-child(6)::before,.item:nth-child(6)::after{
animation-delay: 0.6s;
}
.item:nth-child(7) .line,.item:nth-child(7)::before,.item:nth-child(7)::after{
animation-delay: 0.7s;
}
.item:nth-child(8) .line,.item:nth-child(8)::before,.item:nth-child(8)::after{
animation-delay: 0.8s;
}
.item:nth-child(9) .line,.item:nth-child(9)::before,.item:nth-child(9)::after{
animation-delay: 0.9s;
}
.item:nth-child(10) .line,.item:nth-child(10)::before,.item:nth-child(10)::after{
animation-delay: 1.0s;
}
新学习的知识总结
对于CSS-var()函数案例：
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
| 标签 | 作用 |
|---|---|
| div | 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。 |
| :root | 设置HTML文档的背景色 |
| var() | 定义属性后,然后使用var()函数调用该属性 |
| flex-direction | 设置 div元素内弹性盒元素的方向,column时垂直显示 |
| @keyframes | 使用@keyframes规则，你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。 |
| animation | 使用简写属性，将动画与 div 元素绑定 |
| animation-delay | 等待，然后开始动画 |