用css怎样实现波浪线,css如何实现波浪线和立方体
css如何实现波浪线和立方体
发布时间:2020-10-22 14:39:51
来源:亿速云
阅读:91
作者:小新
这篇文章将为大家详细讲解有关css如何实现波浪线和立方体,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
最近的项目有做到要画出波浪线效果,这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆;
利用css3属性perspective加旋转实现立方体
1.css实现波浪线html
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;
}
效果图
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,然后对每个面旋转、平移
关于css如何实现波浪线和立方体就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
用css怎样实现波浪线,css如何实现波浪线和立方体相关推荐
- HTML怎么在字体下方加波浪线,CSS实现文字下面波浪线动画效果
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8607 本文可全文转载,个人网站无需授权,但需要保留原作者.出处以及文中链接,任 ...
- [css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
- html实现波浪,纯CSS实现波浪移动效果的示例
在某些页面上常常看到波浪的效果,虽然只有装饰的作用,但是却让页面看上去更生动了,同时某些情况下也能起到进度条的作用,而波浪的形式却比普通进度条更美观有趣. 如果想要实现波浪的效果,作者想到的第一个方法 ...
- c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线?(代码示例)...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
- css海浪动画代码,CSS3实现的线条波浪动画效果
演示: http://demo.shanhubei.com/demo/waveAnimation/ 这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使 ...
- dw在html中删除css样式表,DW里CSS的详细介绍
单击"确定". 类 型 属 性 [定义 CSS 类型属性]使用"CSS 样式定义"对话框中的"类型"类别能够定义 CSS 样式的基本字体和类 ...
- css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发 来源 | web前端开发 我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
- java基础57 css样式、选择器和css定位(网页知识)
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一 ...
- 前端:CSS/10/伪类选择器,CSS列表属性,CSS边框属性,CSS内边距属性,CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
- CSS(一):CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性;CSS选择器;尺寸和颜色单位、背景和文本设置
目录 一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...
最新文章
- pdo mysql防注入_Php中用PDO查询Mysql来避免SQL注入风险的方法
- 【开源项目】一个GitHub项目,囊括人脸图像要读的重要论文
- docker报错:OCI runtime create failed...process_linux.go:449: container init caused “write /proc/self/
- 【Java注解系列】内置注解与AOP实现自定义注解
- python装饰器的顺序_python中多个装饰器的执行顺序详解
- 如何把表格做成源代码_他来了,他来了,文字、表格、公式图片识别神器V0.1测试版...
- Openstack api security testing tools
- cad 打开硬件加速卡_CAD运行用加速技巧
- 【内网穿透笔记】NAPT类型测试与XTCP点对点内网穿透适用例外
- 黑马程序员---visual studio 快捷键大全
- 百度地图API 拾取坐标
- 计算机编码器的工作原理,优先级编码器74LS148的电路结构、工作原理及使用方法...
- 阿里云服务器的登录方法
- 保健品消费者需求调查方案
- 教你快速爬取哔哩哔哩整部番剧的视频弹幕
- IP,ARP,以太网--网络层与数据链路层详解
- python 存储字典_python 字典存储
- python应用——用python实现对excel的查找替换
- cuda/cudnn/cuda 10.1安装教程
- 图像、图形、图片文件格式
热门文章
- 安卓6.0、7.0、8.0新特性总结异同
- 调节pycharm字体大小
- 联想Y410P:合上盖子用teamviewer远程黑屏问题
- 共轭梯度法(FR法)
- android自定义引导页,Android仿大众点评引导页(ViewPage)+主页面(Fragment)的实现
- 【愚公系列】2023年06月 网络安全(交通银行杯)-APFS
- java计算机毕业设计基于安卓Android的升降式停车场管理系统APP
- 1007 素数对猜想(python)
- 关于如何在Google Play Store 购买付费APP
- python石头剪刀布代码带注释_Python石头剪刀布