纯纯的css画美美的彩虹
效果
效果图如下
实现思路
- 使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起
- after伪元素写投影样式
- 彩虹和投影都有动画
dom结构
用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写彩虹的样式。
<div class="container"><div class="rainbow"></div>
</div>
css样式
1、定义父容器样式,控制图标位置,顺便给整个页面加个背景色,方便预览
body{background: rgba(73,74,95,1);
}.container{width: 170px;height: 170px;position: relative;margin: 250px auto;
}
2、彩虹样式,彩虹有一个左右摇摆的动画效果
.rainbow{width: 70px;height: 70px;position: absolute;top: 70px;left: 80px;margin-left: -40px;border-radius: 170px 0 0 0;box-shadow: #fb323c -2px -2px 0 1px,#f99716 -4px -4px 0 3px,#fee124 -6px -6px 0 5px,#afde2e -8px -8px 0 7px,#6ad7f8 -10px -10px 0 9px,#60b1f5 -12px -12px 0 11px,#a3459b -14px -14px 0 13px;animation: rainbow 5s ease-in-out infinite;transform: rotate(40deg);
}@keyframes rainbow{50%{transform: rotate(50deg);}
}
3、投影样式,别忘了是同样有动画的哟
.rainbow::after{content: '';width: 120px;height: 15px;position: absolute;bottom: -23px;left: 17px;background: #000;border-radius: 50%;opacity: 0.2;animation: rainbow_shadow 5s ease-in-out infinite;transform: rotate(-40deg);transform-origin: 50% 50%;
}@keyframes rainbow_shadow{50%{transform: rotate(-50deg) translate(10px) scale(0.7);opacity: 0.05;}
}
搞定,很简单有没有,跟着实现一遍,你也可以画出美丽的彩虹咯~
纯纯的css画美美的彩虹相关推荐
- 如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长 ...
- html用css画多边形,Sass绘制多边形_Preprocessor, Sass, SCSS, clip-path, CSS处理器, 会员专栏 教程_W3cplus...
CSS画图形在Web运用中时常看到,比如三角形.五角星,心形,Ribbon等.不过以前使用CSS绘制图形一般都是借助于border来绘制,但这样的方式受到一定的限制,而且实用价值也有所限制.这篇文章将 ...
- [css] 用css画一个太阳
[css] 用css画一个太阳 // css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: ...
- [css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法 先画一个圆,外加两个绝对定位的半圆 扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现 这只能切出180°以内的扇形 超过180°的 ...
- [css] 请使用css画一个圆,方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
- [css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
- [css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- [css] 用css画一个五边形和一个六边形
[css] 用css画一个五边形和一个六边形 五边形:clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 六边形:cli ...
- [css] 用css画出一个圆圈,里面有个对号
[css] 用css画出一个圆圈,里面有个对号 #right {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;bor ...
最新文章
- ((ios开发学习笔记 十一))自定义TableViewCell 的方式实现自定义TableView(带源码)...
- 浅谈代码的执行效率(1):算法是关键
- GDB下查看内存命令(x命令)
- Linux Shell脚本中点号和source命令
- python数独代码_python 实现计算数独
- 最全Java锁详解:独享锁/共享锁+公平锁/非公平锁+乐观锁/悲观锁
- python实现视频关键帧提取(基于帧间差分)
- 关于PHP各种循环,关于php迭代循环(无限分类)
- 返回JSON出现Infinite recursion无限循环错误的解决
- JAVA POI处理WORD
- yii2 清除asset资源缓存
- 使用ConcurrentDictionary实现轻量缓存
- 刚从阿里、头条面试回来,java程序员社招自我介绍
- 超简单直观理解懒加载(Lazyload)
- BOF和EOF的区别
- 如何成为全栈工程师?
- 软件测试和软件开发哪个发展更好
- 【Matlab验证码识别】遗传算法和最大熵优化+大津法(OTSU)+自定义阈值数字验证码识别【含GUI源码 1694期】
- Keystore、Key attestation
- SAGA GIS使用———加载以及显示影像