CSS3初级学习(三) 绘制彩虹

绘制弧形彩虹

仅使用CSS+部分CSS3绘制出七种颜色的弧形彩虹

html部分：

<div class="box"><div class="rainbow" id="oneRed"></div><div class="rainbow" id="twoOrange"></div><div class="rainbow" id="threeYellow"></div><div class="rainbow" id="fourGreen"></div><div class="rainbow" id="fiveBlue"></div><div class="rainbow" id="sixCyan"></div><div class="rainbow" id="sevenPurple"></div></div>

style样式部分：

         .rainbow{border-radius: 50% 50% 0 0/100% 100% 0 0;border-width: 10px;border-style: solid;border-bottom: none;}#oneRed{width: 230px;height: 110px;border-color: red;transform: translate(13px,119px);}#twoOrange{width: 210px;height: 101px;border-color: orange;transform: translate(23px,8px);}#threeYellow{width: 190px;height: 92px;border-color:yellow;transform: translate(33px,-94px);}#fourGreen{width: 170px;height: 82px;border-color: green;transform: translate(43px,-186px);}#fiveBlue{width: 150px;height: 73px;border-color:blue;transform: translate(53px,-269px);}#sixCyan{width: 130px;height: 63px;border-color: cyan;transform: translate(63px,-342px);}#sevenPurple{width: 110px;height: 53px;border-color: purple;transform: translate(73px,-406px);}

不熟悉使用transform:translate()的小伙伴也可以直接用定位。
注意设置第一道彩虹的大小，以免影响其余几道；如果想直接使用我设置的大小，又怕跟自己的页面不匹配，可以使用transform: scale()放大。

CSS3初级学习(三) 绘制彩虹相关推荐

CSS3初级学习（二）背景图片叠加
CSS3初级学习(二) 背景图片叠加 Hello!大家好久不见,这里是学业日渐繁忙的万物之恋,沉迷学习无心写博客(并不是),久违的来和大家分享下自己在学习过程中碰到的一些有趣案列.话不多说: 先看效果 ...
PHP初级学习(三)
PHP初级学习(三) PHP函数 php函数名以字母或下划线开头. 语法风格类似于javascript. 看一下语法 <?phpfunction functionName(){//函数体} ?& ...
学生python编程--学习列表绘制彩虹
学生python编程--学习列表绘制彩虹 # _*_ coding: UTF-8 _*_ # 开发团队: 信息化未来 # 开发人员: Administrator # 开发时间:2022/8/23 11 ...
Python学习之绘制彩虹图
from turtle import *#控制彩虹路径 def path(pen, r, g, b):pen.penup()pen.goto(-400, -300)pen.pendown()pen.p ...
python彩虹图_Python学习之绘制彩虹图
from turtle import * #控制彩虹路径 def path(pen, r, g, b): pen.penup() pen.goto(-400, -300) pen.pendown() ...
HTML5+CSS3的学习(一)
HTML5+CSS3的学习(一) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
HTML5+CSS3的学习(五)
HTML5+CSS3的学习(五) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
HTML5+CSS3的学习(四)
HTML5+CSS3的学习(中) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
HTML5+CSS3的学习(六)
HTML5+CSS3的学习(六) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...

CSS3初级学习(三) 绘制彩虹

绘制弧形彩虹

CSS3初级学习(三) 绘制彩虹相关推荐

最新文章

热门文章