介绍 <李> html & lt; p类=癱ard-list"比;
类& lt; p=皐ave-container"祝辞
类& lt; p=皐ave"祝辞& lt;/p>
& lt; !——实现波浪线的p——比;
类& lt; p=皐ave-left-decorate"祝辞& lt;/p>
类& lt; p=皐ave-right-decorate"祝辞& lt;/p>
& lt;/p>
& lt;/p> <李> 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;
} <李> & lt; p类=癱ontent"比;
类& lt; p=發eftContent"祝辞
类& lt; p=發eftContentItem"祝辞
类& lt; p=癷temImg"祝辞
& lt; img类=發eftContentImg"src=https://www.yisu.com/zixun/巴枷?rabbit.jpg”alt="/>
<李> .content {
位置:相对;
显示:flex;
保证金:0汽车;
padding-top: 50 px;
宽度:1200 px;
身高:380 px;
背景:url(. ./图片/bg2.jpg)不再重演;
background-size: 1200 px 100%;
}
.content .leftContent {
margin-right: 25 px;
padding-left: 45 px;
padding-bottom: 30 px;
box-sizing: border-box;
}/*旋转的图片*/.content .leftContent .leftContentItem {
宽度:350 px;
身高:350 px;/*设置景深*/角度:1000 px;/*设置背景颜色在中间为椭圆形*//*背景:径向渐变(椭圆中心,# 430 d6d 0%, # 000 100%); */}
.leftContent .leftContentItem .itemImg {
位置:绝对的;
左:20%;
上图:20%;
宽度:200 px;
身高:200 px;/*实现3 d呈现*/传输格式:preserve-3d;
变换:rotateX(-20度)rotateY(-20度);
-webkit-animation: 6 s imgRotate线性无限;
-o-animation: 6 s imgRotate线性无限;
动画:6 s imgRotate线性无限;
}
.leftContent .leftContentItem .itemImg * {
位置:绝对的;
宽度:100%;
高度:100%;
不必:0 0 25 px rgba (0 128, 0。4);
}
.leftContentItem .itemImg .leftContentImg {
位置:绝对的;
宽度:100%;
高度:100%;
}/*分别对各个面进行旋转,平移操作*/.leftContentItem .itemImg .leftContentImg: nth-child (1) {
变换:translateZ (100 px);
}
.leftContentItem .itemImg .leftContentImg: nth-child (2) {
变换:rotateX(180度)translateZ (100 px);
}
.leftContentItem .itemImg .leftContentImg: nth-child (3) {
变换:rotateY(-90度)translateZ (100 px);
}
.leftContentItem .itemImg .leftContentImg: nth-child (4) {
变换:rotateY(90度)translateZ (100 px);
}
.leftContentItem .itemImg .leftContentImg: nth-child (5) {
变换:rotateX(90度)translateZ (100 px);
}
.leftContentItem .itemImg .leftContentImg: nth-child (6) {
变换:rotateX(-90度)translateZ (100 px);
}
@-webkit-keyframes imgRotate {
从{
变换:translateZ (-100 px) rotateX rotateY (0) (0);
}
, {
变换:translateZ (-100 px) rotateX(360度)rotateY(360度);
}
}
这篇文章主要介绍css实现波浪线及立方体的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
最近的项目有做到要画出波浪线效果,这里是利用线性渐变来实现,也就是画圆,然后利用底色来遮住部分圆;
利用css3属性角度加旋转实现立方体
,1。css实现波浪线,,
效果图
<李>
html文件
css文件
