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>

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: rotate(90deg);    background: radial-gradient(circle, #fff 2px, #fff, transparent 3px, transparent 4px, transparent 4px, transparent);    background-size: 8px 8px;
}

效果图

image.png

2.实现立方体

html文件

<div class="content">
    <div class="leftContent">
        <div class="leftContentItem">
            <div class="itemImg">
                <img class="leftContentImg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/rabbit.jpg" alt=""/>
                <img class="leftContentImg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/rabbit.jpg" alt=""/>
                <img class="leftContentImg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/rabbit.jpg" alt=""/>
                <img class="leftContentImg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/rabbit.jpg" alt=""/>
                <img class="leftContentImg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/rabbit.jpg" alt=""/>
                <img class="leftContentImg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/rabbit.jpg" alt=""/>
            </div>
        </div>
    </div>

css文件

.content{    position: relative;    display: flex;    margin: 0 auto;    padding-top: 50px;    width: 1200px;    height: 380px;    background: url(../images/bg2.jpg) no-repeat;    background-size: 1200px 100%;
}.content .leftContent{    margin-right: 25px;    padding-left: 45px;    padding-bottom: 30px;    box-sizing: border-box;
}/* 旋转的图片 */.content .leftContent .leftContentItem{    width: 350px;    height: 350px;    /* 设置景深 */
    perspective: 1000px;    /* 设置背景颜色在中间为椭圆形 */
    /*background: radial-gradient(ellipse at center, #430d6d 0%, #000 100%);*/}.leftContent .leftContentItem .itemImg{    position: absolute;    left: 20%;    top: 20%;    width: 200px;    height: 200px;    /* 实现3D呈现 */
    transform-style: preserve-3d;    transform: rotateX(-20deg) rotateY(-20deg);    -webkit-animation: 6s imgRotate linear infinite;    -o-animation: 6s imgRotate linear infinite;    animation: 6s imgRotate linear infinite;
}.leftContent .leftContentItem .itemImg *{    position: absolute;    width: 100%;    height: 100%;    box-shadow: 0 0 25px rgba(0, 128, 0, .4);
}.leftContentItem .itemImg .leftContentImg{    position: absolute;    width: 100%;    height: 100%;
}/* 分别对各个面进行旋转、平移操作 */.leftContentItem .itemImg .leftContentImg:nth-child(1){    transform: translateZ(100px);
}.leftContentItem .itemImg .leftContentImg:nth-child(2){    transform: rotateX(180deg) translateZ(100px);
}.leftContentItem .itemImg .leftContentImg:nth-child(3){    transform: rotateY(-90deg) translateZ(100px);
}.leftContentItem .itemImg .leftContentImg:nth-child(4){    transform: rotateY(90deg) translateZ(100px);
}.leftContentItem .itemImg .leftContentImg:nth-child(5){    transform: rotateX(90deg) translateZ(100px);
}.leftContentItem .itemImg .leftContentImg:nth-child(6){    transform: rotateX(-90deg) translateZ(100px);
}
@-webkit-keyframes imgRotate {    from{        transform: translateZ(-100px) rotateX(0) rotateY(0);
    }    to{        transform: translateZ(-100px) rotateX(360deg) rotateY(360deg);
    }
}

效果图

image.png

作者：IT智云编程
链接：https://www.jianshu.com/p/811b39f8da6c