这是我参与更文挑战的第9天
效果：
实现：
1. 首先讲css的var()函数 * ；
定义：
随着sass，less预编译的流行，css也随即推出了变量定义var函数。var()函数，就如同sass和less等预编译软件一样，可以定义变量并且进行对应的使用。
使用： var(custom-property-name, value)； custom-property-name 必需。自定义属性的名称，必需以 - - 开头。 value 可选。备用值，在属性不存在的时候使用。
例子：定义了- -size ：20px
body {
--size: 20px;
font-size: var(--size); // 20px
padding:var(--size); // 20px
}
注意： 只有通过在:root定义的字段，就相当于css中的全局变量，可以在css中任意的样式中进行使用。 如：
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
2. 定义标签，每个.line的盒子都定义了var（）函数的属性 - - h与相应的值 ，这样等会写css能节约大量代码。
<div class="dna">
<div class="line" style=" --h: 1;"></div>
<div class="line" style=" --h: 2;"></div>
<div class="line" style=" --h: 3;"></div>
<div class="line" style=" --h: 4;"></div>
<div class="line" style=" --h: 5;"></div>
<div class="line" style=" --h: 6;"></div>
<div class="line" style=" --h: 7;"></div>
<div class="line" style=" --h: 8;"></div>
<div class="line" style=" --h: 9;"></div>
<div class="line" style=" --h: 10;"></div>
</div>
3. 定义底层盒子样式：
.dna{
position: relative;
width: 200px;
height: 502px;
transform: rotate(30deg) skew(-20deg);
}
rotate(30deg) 旋转30度。 skew(-20deg) 倾斜负20度。
4. 定义DNA每条线，也就是.line的样式，用绝对定位：
.line{
position: absolute;
left: 0;
top: calc( var(--h) * 50px );
height: 2px;
width: 200px;
background-color: rgb(248, 154, 14);
box-shadow: 0 0 10px rgb(248, 154, 14),
0 0 10px rgb(248, 154, 14);
animation: round 3s linear calc( var(--h) * 0.2s ) infinite;
}
先说明，calc() 函数 * ： calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则；
所以： top: calc( var(--h) * 50px ); 意思是定位的top大小为每天线的 自定义属性 - -h 乘以 50 px ，因为每条线的 - -h 值不一样，所以就快速得到了全部线的top值。
box-shadow: 0 0 10px rgb(248, 154, 14), 0 0 10px rgb(248, 154, 14); 阴影，写两行是为了阴影更亮。
animation: round 3s linear calc( var(--h) * 0.2s ) infinite; 定义动画。round是动画名字。3s是动画时长。linear 动画运动曲线为匀速。calc( var(--h) * 0.2s ) 是动画延迟播放，通过calc函数计算每条线延迟多少秒再播放。infinite是动画重复播放。
5. 定义每条线左边和右边的圆，通过双伪类实现：
.line::after,.line::before{
content: '';
position: absolute;
top: -20px;
width: 40px;
height: 40px;
border-radius: 50%;
}
.line::after{
left: -20px;
background-color: rgb(0, 26, 255);
box-shadow: 0 0 15px rgb(0, 26, 255),
0 0 20px rgb(0, 26, 255) ;
}
.line::before{
right: -20px;
background-color: rgb(61, 248, 3);
box-shadow: 0 0 15px rgb(61, 248, 3),
0 0 20px rgb(61, 248, 3);
}
6. 定义动画
@keyframes round{
100%{
transform: rotateY(360deg);
}
}
transform: rotateY(360deg); 旋转360度。
完整源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0);
}
.dna{
position: relative;
width: 200px;
height: 502px;
transform: rotate(30deg) skew(-20deg);
}
.line{
position: absolute;
left: 0;
top: calc( var(--h) * 50px );
height: 2px;
width: 200px;
background-color: rgb(248, 154, 14);
box-shadow: 0 0 10px rgb(248, 154, 14),
0 0 10px rgb(248, 154, 14);
animation: round 3s linear calc( var(--h) * 0.2s ) infinite;
}
@keyframes round{
100%{
transform: rotateY(360deg);
}
}
.line::after,.line::before{
content: '';
position: absolute;
top: -20px;
width: 40px;
height: 40px;
border-radius: 50%;
}
.line::after{
left: -20px;
background-color: rgb(0, 26, 255);
box-shadow: 0 0 15px rgb(0, 26, 255),
0 0 20px rgb(0, 26, 255) ;
}
.line::before{
right: -20px;
background-color: rgb(61, 248, 3);
box-shadow: 0 0 15px rgb(61, 248, 3),
0 0 20px rgb(61, 248, 3);
}
</style>
</head>
<body>
<div class="dna">
<div class="line" style=" --h: 1;"></div>
<div class="line" style=" --h: 2;"></div>
<div class="line" style=" --h: 3;"></div>
<div class="line" style=" --h: 4;"></div>
<div class="line" style=" --h: 5;"></div>
<div class="line" style=" --h: 6;"></div>
<div class="line" style=" --h: 7;"></div>
<div class="line" style=" --h: 8;"></div>
<div class="line" style=" --h: 9;"></div>
<div class="line" style=" --h: 10;"></div>
</div>
</body>
</html>
总结：
这个效果并不难，但是涉及的知识点还是挺全面的，所以拿来练习是很不错的~
其它文章~： 气泡浮动背景特效 html+css 简约时钟特效 html+css+js 赛博朋克风格按钮 html+css 响应式卡片悬停效果 html+css 水波加载动画 html+css 导航栏滚动渐变效果 html+css+js 书本翻页 html+css 3D立体相册 html+css 炫彩流光按钮 html+css 记一些css属性总结（一） Sass总结笔记 ......等等
