效果图如下
实现思路
使用 box-shadow 画赤橙黄绿蓝靛紫 7 个弧形, 拼接在一起
after 伪元素写投影样式
彩虹和投影都有动画
dom 结构
用两个嵌套的 div 容器, 父容器来控制图标显示的位置, 子容器用来写彩虹的样式.
- <div class="container">
- <div class="rainbow"></div>
- </div>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
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);
- }
- }
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
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;
- }
- }
搞定, 很简单有没有, 跟着实现一遍, 你也可以画出美丽的彩虹咯~
来源: http://www.jianshu.com/p/8ffab38f6aa9