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

　　介绍

这篇文章将为大家详细讲解有关css如何实现波浪线和立方体,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

最近的项目有做到要画出波浪线效果,这里是利用线性渐变来实现,也就是画圆,然后利用底色来遮住部分圆;

利用css3属性角度加旋转实现立方体

<强> 1。css实现波浪线

<李> html

& lt; div类=癱ard-list"比; 　　& lt; div类=皐ave-container"祝辞 　　& lt; div类=皐ave"祝辞& lt;/div> 　　& lt; !——实现波浪线的div——比; 　　& lt; div类=皐ave-left-decorate"祝辞& lt;/div> 　　& lt; div类=皐ave-right-decorate"祝辞& lt;/div> 　　& lt;/div> 　　& lt;/div> <李> css

.card-list { 　　显示:flex; 　　填充:20 px; 　　宽度:100%; 　　} 　　.wave-container { 　　位置:相对; 　　margin-right: 28 px; 　　宽度:20%; 　　} 　　.wave { 　　宽度:100%; 　　身高:90 px; 　　背景:线性渐变(向右,rgb (85、181、255), rgb (207、224、232)); 　　}/*波浪线*/.wave-left-decorate { 　　位置:绝对的; 　　上图:4 px; 　　宽度:90 px; 　　高度:8 px; 　　transform-origin:中心离开; 　　变换:旋转(90度); 　　背景:径向渐变(圆,# fff 2 px, # fff,透明3 px,透明4 px,透明4 px,透明); 　　background-size: 8 px 8 px; 　　}

效果图

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

<强> 2。实现立方体

<李>

html文件

& lt; div类=癱ontent"比; 　　& lt; div类=發eftContent"祝辞 　　& lt; div类=發eftContentItem"祝辞 　　& lt; div类=癷temImg"祝辞 　　& lt; img类=發eftContentImg"src=https://www.yisu.com/zixun/巴枷?rabbit.jpg”alt="/>