这里是利用linear-gradient来实现，也就是画圆，然后利用底色来遮住部分圆；利用css3属性perspective加旋转实现立方体
1.css实现波浪线
html
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(toright,rgb(85,181,255),rgb(207,224,232));
}/*波浪线*/.wave-left-decorate{position:absolute;top:-4px;width:90px;height:8px;transform-origin:centerleft;transform:rotate(90deg);background:radial-gradient(circle,#fff2px,#fff,transparent3px,transparent4px,transparent4px,transparent);background-size:8px8px;
}
效果图
image.png
2.实现立方体
html文件
css文件.content{position:relative;display:flex;margin:0auto;padding-top:50px;width:1200px;height:380px;background:url(../images/bg2.jpg)no-repeat;background-size:1200px100%;
}.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(ellipseatcenter,#430d6d0%,#000100%);*/}.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:6simgRotatelinearinfinite;-o-animation:6simgRotatelinearinfinite;animation:6simgRotatelinearinfinite;
}.leftContent.leftContentItem.itemImg*{position:absolute;width:100%;height:100%;box-shadow:0025pxrgba(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-keyframesimgRotate{from{transform:translateZ(-100px)rotateX(0)rotateY(0);
}to{transform:translateZ(-100px)rotateX(360deg)rotateY(360deg);
}
}
效果图
image.png
作者：IT智云编程
链接：/p/811b39f8da6c
