css实现波浪线及立方体

最新推荐文章于 2024-08-06 15:15:40 发布

一只叮code的小蚊子

最新推荐文章于 2024-08-06 15:15:40 发布

阅读量1.3k

点赞数 1

分类专栏： html与css 文章标签： css画波浪线实现立方体 perspective景深 rotate

本文链接：https://blog.csdn.net/ZJW222/article/details/83019489

版权

本文介绍了如何使用CSS来创建波浪线效果和实现立方体展示。在第一部分中，通过CSS代码展示了波浪线的实现过程，而在第二部分则详细解释了利用CSS的perspective和rotate属性来构建立方体的步骤。最后，文中还提及了相关主题，如微信小程序的3D轮播图、webpack打包和纯CSS瀑布流布局。

摘要由CSDN通过智能技术生成

最近的项目有做到要画出波浪线效果，这里是利用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>

.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: