纯css写出来的小彩虹

文章目录

下面是效果图
下面是源代码
学到的知识点

今天在CodePen上看见一个用纯css写出来的动画，所以就自己敲了一下 源代码链接

下面是效果图

下面是源代码

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {box-sizing: border-box;/* border: black 10px solid; */}html {background-color: #09f;height: 100vh;}.wrapper {border-bottom: solid 2px rgb(255, 255, 255);height: 40vmin;left: 50%;top: 50%;transform: translate(-50%, -50%);overflow: hidden;position: fixed;width: 120vmin;/* border: black 1px solid;       */}.wrapper .rainbow {animation: spin 4s ease-in-out infinite;height: 80vmin;margin: 0 auto;position: relative;width: 80vmin;/* border: rgb(230, 26, 26) 1px solid;        } */}.wrapper .rainbow::after {animation: fadeInOut 4s ease-in-out infinite;/* 和内容一起转，遮盖住彩虹 */background-color: #09f;bottom: 40vmin;color: #fff;content: "Stay Home Stye Safe";font-family: sans-serif;font-size: 8vmin;left: 0;padding: 8vmin 11.4285714286vmin;position: absolute;right: 0;text-align: center;text-transform: uppercase;top: 0;/* margin: 50px; *//* border: rgb(230, 26, 26) 1px solid; */}.wrapper .rainbow .arc {border: solid 3.2vmin;border-radius: 50%;position: absolute;bottom: 0;left: 0;right: 0;top: 0;}/* .arc.red这两个选择器之间没有空格，得写在一起 */.wrapper .rainbow .arc.red {border-color: red;}.wrapper .rainbow .arc.orange {border-color: orange;margin: 3.2vmin;}.wrapper .rainbow .arc.yellow {border-color: yellow;margin: 6.4vmin;}.wrapper .rainbow .arc.green {border-color: yellowgreen;margin: 9.6vmin;}.wrapper .rainbow .arc.blue {border-color: skyblue;margin: 12.8vmin;}.wrapper .rainbow .arc.violet {border-color: violet;margin: 16vmin;}.wrapper .rainbow .arc.purple {border-color: mediumpurple;margin: 19.2vmin;}@keyframes spin {0% {transform: rotate(0);}50%,100% {transform: rotate(360deg);}}@keyframes fadeInOut {0%,50%,100% {color: #09f;}/* 60%{color: rgb(226, 156, 27);} */70%,80% {color: #fff;}}</style>
</head><body><div class="wrapper"><div class="rainbow"><div class="arc red"></div><div class="arc orange"></div><div class="arc yellow"></div><div class="arc green"></div><div class="arc blue"></div><div class="arc violet"></div><div class="arc purple"></div></div></div>
</body>

学到的知识点

这段代码表示居中

            left: 50%;top: 50%;transform: translate(-50%, -50%);

vmin
说明：
相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
示例代码：

h1 {
font-size: 8vm;
font-size: 8vmin;
}
如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100，因为高度比宽度要小，所以计算的时候相对于高度。
vh
说明：
相对于视口的高度。视口被均分为100单位的vh
示例代码：

h1 {
font-size: 8vh;
}
如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

纯css写出来的小彩虹相关推荐

android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
22.纯 CSS 创作出美丽的彩虹条纹文字
22.纯 CSS 创作出美丽的彩虹条纹文字原文地址:https://segmentfault.com/a/1190000014858628 感想: 利用四个span的::before 和 ::aft ...
纯css写的类似花纹图案的立体动态旋转
纯css写的类似花纹图案的立体动态旋转动态中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&qu ...
纯css实现各种方向小箭头
在开发页面的时候,遇到很多的列表都需要用到箭头,可以直接用图片作背景铺垫,纯CSS也能实现,并且没有兼容性顾虑,不用CSS3,相比而言,比图片更好用. 原理:一个高宽相等的正方形,选取你所需要的某一边 ...
css如何实现一个小三角形,用纯css写一个常见的小三角形
js小技巧 js判断字符长度直接使用String对象的属性,空格亦算一个字符 myString = "Hello world"; length = myString.length ...
html div添加天气,web前端入门到实战：纯CSS写一个动态太阳的天气图标
效果效果图如下实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构用两个嵌套的div容器,父容器来控制 ...
html中擦窗效果,纯CSS写的小雨打在窗户上效果
华灯初上,窗外的雨淅淅沥沥飘打在窗户的玻璃之上.站在室内的你,望着雨中的夜色,是不是让你增添几分惆帐.似乎如此的场景只有在诗中才会出现.那么今天我们一起来用CSS技术来描绘这样的一个场景. 这里仅是用 ...
纯css写滚动的弹幕特效
最近在写一个春节活动,里面有一个类似拼多多展示中奖用户的弹幕滚动. 后台给了随机滚动将近一百条数据,之前写过一版,是使用定位,将数据顶上去,但是一秒一动的效果略略有些卡顿.后来决定使用css动画来实现 ...

纯css写出来的小彩虹

文章目录

下面是效果图

下面是源代码

学到的知识点

纯css写出来的小彩虹相关推荐

最新文章

热门文章