web前端入门到实战：css实现波浪线及立方体_前端波浪线

这里是利用linear-gradient来实现，也就是画圆，然后利用底色来遮住部分圆；利用css3属性perspective加旋转实现立方体

1.css实现波浪线

html

<div class="card-list">
    <div class="wave-container">
        <div class="wave"></div>
        <!-- 实现波浪线的div -->
        <div class="wave-left-decorate"></div>
        <div class="wave-right-decorate"></div>
    </div>
</div>

1
2
3
4
5
6
7
8
9

css

.card-list{
    display: flex;
    padding: 20px;
    width: 100%;
}
.wave-container{
    position: relative;
    margin-right: 28px;
    width: 20%;
}
.wave{
    width: 100%;
    height: 90px;
    background: linear-gradient(to right, rgb(85, 181, 255), rgb(207, 224, 232));
}
/* 波浪线 */
.wave-left-decorate{
    position: absolute;
    top: -4px;
    width: 90px;
    height: 8px;
    transform-origin: center left;
    transform: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22