How to use css to realize wavy line and cube
这篇文章给大家分享的是有关如何使用css实现波浪线和立方体的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
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;
}
效果图
1497230186-5bb425d64e21c_articlex.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);
}
}
感谢各位的阅读!关于"如何使用css实现波浪线和立方体"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧!
