Shulou(Shulou.com)06/01 Report--

这篇文章给大家分享的是有关如何使用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实现波浪线和立方体"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.