web css圆弧波浪线,web前端入门到实战：css实现波浪线及立方体

这里是利用linear-gradient来实现，也就是画圆，然后利用底色来遮住部分圆；利用css3属性perspective加旋转实现立方体

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(to right, rgb(85, 181, 255), rgb(207, 224, 232));

}

/* 波浪线 */

.wave-left-decorate{

position: absolute;

top: -4px;

width: 90px;

height: 8px;

transform-origin: center left;

transform: rotate(90deg);

background: radial-gradient(circle, #fff 2px, #fff, transparent 3px, transparent 4px, transparent 4px, transparent);

background-size: 8px 8px;

}

效果图

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，正因为我不是211，985，只是个普通的本科生，英语不是特别好，数学不是特别好。所以我选择了前端。工作第六个年头了，我庆幸自己选择了这条路。767-273-102 秋裙。在鹅厂做过，跟着创业头子混过。想把自己的技术分享给大家，如果你还在迷茫，也希望能进我一些绵薄之力，帮助到你。都是一群有梦想的人，我们可能在不同的城市，但我们会一起结伴同行前端前端前端

2.实现立方体

html文件

css文件

.content{

position: relative;

display: flex;

margin: 0 auto;

padding-top: 50px;

width: 1200px;

height: 380px;

background: url(../images/bg2.jpg) no-repeat;

background-size: 1200px 100%;

}

.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(ellipse at center, #430d6d 0%, #000 100%);*/

}

.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: 6s imgRotate linear infinite;

-o-animation: 6s imgRotate linear infinite;

animation: 6s imgRotate linear infinite;

}

.leftContent .leftContentItem .itemImg *{

position: absolute;

width: 100%;

height: 100%;

box-shadow: 0 0 25px rgba(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-keyframes imgRotate {

from{

transform: translateZ(-100px) rotateX(0) rotateY(0);

}

to{

transform: translateZ(-100px) rotateX(360deg) rotateY(360deg);

}

效果图

主要就是设置景深perspective，然后对每个面旋转、平移

web css圆弧波浪线,web前端入门到实战：css实现波浪线及立方体相关推荐

web无序列表去掉点_web前端入门到实战：css如何玩转有序无序列表项list样式
在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有( ...
css hover变成手_web前端入门到实战：彻底掌握css动画「transition」
马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了 ...
html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
web前端入门到实战：CSS文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...
web前端入门到实战：五个最新的CSS特性以及如何使用它们
虽然CSS简单,但CSS是一门非常有意思的语言,CSS每年都有变化,而且都有不同的博主都在不同的时间段总结一些CSS的新特性.虽然这些新特性无法立刻得到众多浏览器的支持,但总是随着时间的发展,这些特性 ...
html弧形列表效果,web前端入门到实战：html5网页特效-弧形菜单
效果: 弧形菜单,文字按规则变形以及变换透明度简单的javascript,上手难度:简单学习笔记: text-decoration: 最主要的功能就是给文字加上附着在文字底部,上方,或者中间的线( ...
web前端入门到实战：3种姿势实现26个英文字母的案例
一.借助CSS border实现案例实现效果如下(为实时渲染效果): 如何使用? 引用CSS文件,例如: <link rel="stylesheet" href=" ...
web前端入门到实战：SCSS 常用属性合集
Scss 文档太多了,但还是耐心看完了,总结自己常用的一些语法. 1.规则嵌套 Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如: #main p { ...
CSS学习（上）前端入门很简单
@最好有HTML基础哦一 CSS入门基础为什么要在网页中加入CSS 浏览器与CSS 选择器类型二用CSS设置文本样式设计网页中的文字样式设计文本的段落样式一 CSS入门基础为什么要在网 ...

web css圆弧波浪线,web前端入门到实战：css实现波浪线及立方体

web css圆弧波浪线,web前端入门到实战：css实现波浪线及立方体相关推荐

最新文章

热门文章