如何使用css实现波浪线和立方体

这篇文章给大家分享的是有关如何使用css实现波浪线和立方体的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

    1.css实现波浪线

    html

    <divclass="card-list">

    <divclass="wave-container">

    <divclass="wave"></div>

    <!--实现波浪线的div-->

    <divclass="wave-left-decorate"></div>

    <divclass="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(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文件

    <divclass="content">

    <divclass="leftContent">

    <divclass="leftContentItem">

    <divclass="itemImg">

    <imgclass="leftContentImg"src="images/rabbit.jpg"alt=""/>

    <imgclass="leftContentImg"src="images/rabbit.jpg"alt=""/>

    <imgclass="leftContentImg"src="images/rabbit.jpg"alt=""/>

    <imgclass="leftContentImg"src="images/rabbit.jpg"alt=""/>

    <imgclass="leftContentImg"src="images/rabbit.jpg"alt=""/>

    <imgclass="leftContentImg"src="images/rabbit.jpg"alt=""/>

    </div>

    </div>

    </div>

    </div>

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