html中怎么做彩虹,web前端入门到实战：纯CSS画动态彩虹

效果

效果图如下

实现思路

使用box-shadow画赤橙黄绿蓝靛紫7个弧形，拼接在一起

after伪元素写投影样式

彩虹和投影都有动画

dom结构

用两个嵌套的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;

}

搞定，很简单有没有，跟着实现一遍，你也可以画出美丽的彩虹咯~

html中怎么做彩虹,web前端入门到实战：纯CSS画动态彩虹相关推荐

html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
web前端入门到实战：CSS中字体单位：px、em、rem和%
对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的C ...
web前端入门到实战：css中border-style 属性
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式.只有当这个值不是 none 时边框才可能出现. 例子 1 border-style:dotted solid d ...
web前端入门到实战：CSS颜色、背景和剪切
颜色 CSS 中可以改变文字的颜色还有元素的背景颜色.可以用颜色关键字来定义颜色,如red,但是这些颜色关键字并不常用. transparent transparent可以让文字或背景变的完全透明的颜 ...
web前端入门到实战：CSS 滚动捕捉技术（Scroll Snapping）
CSS 滚动捕捉允许用户完成滚动之后将视口锁定到某个元素的位置.非常适合用来建立下面这样的应用: 基本使用实现滚动捕捉主要依靠两个属性:容器元素的 scroll-snap-type 属性,以及子元素 ...
web前端入门到实战：CSS实现雨滴动画效果
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. <div class='window'></div> ...
web css圆弧波浪线,web前端入门到实战：css实现波浪线及立方体
这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html css .card-lis ...
web前端入门到实战：CSS实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果? 一.skewX的局限一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而 ...
web前端入门到实战：CSS mix-blend-mode滤色screen混合模式
一.滤色screen混合模式速览 screen混合模式,国内称为"滤色",其计算公式是: 公式中的C表示最终混合的RGB色值(范围是0-255),A和B表示用来混合的两个颜色的RG ...

html中怎么做彩虹,web前端入门到实战：纯CSS画动态彩虹

html中怎么做彩虹,web前端入门到实战：纯CSS画动态彩虹相关推荐

最新文章

热门文章