html+css实现奥运五环(环环相扣)
<!DOCTYPE html>
<html>
<head>
<title>奥运五环</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 780px;
height: 370px;
border:1px solid black;
position: absolute;
left: 50%;
top: 50%;
margin-left: -390px;
margin-top: -185px;
}
.circle{
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
}
/*蓝黑红黄绿*/
.blue{
border:20px solid blue;
}
.blue2{
border:20px solid transparent;
border-right-color: blue;
z-index: 2;
}
.black{
border:20px solid black;
left: 270px;
}
.black2{
border:20px solid transparent;
border-bottom-color: black;
border-right-color: black;
left: 270px;
z-index: 2;
}
.red{
border:20px solid red;
left: 540px;
}
.red2{
border:20px solid transparent;
border-left-color: red;
left: 540px;
z-index: 2;
}
.yellow{
border:20px solid yellow;
left: 140px;
top:130px;
}
.green{
border:20px solid green;
left: 410px;
top:130px;
}
.green2{
border:20px solid transparent;
border-left-color: green;
left: 410px;
top:130px;
z-index: 2;
}
</style>
</head>
<body>
<div class="wrapper">
<div class = "circle blue"></div>
<div class = "circle blue2"></div>
<div class = "circle black"></div>
<div class = "circle black2"></div>
<div class = "circle red"></div>
<div class = "circle red2"></div>
<div class = "circle yellow"></div>
<div class = "circle green"></div>
<div class = "circle green2"></div>
</div>
</body>
</html>
效果：
实现原理：在有重叠部分，每个环对应位置有两个环，一个有色环，一个透明环，根据重叠部分应有的颜色设置透明环边框的颜色。
例如:
transparent属性：
用来指定全透明色彩
- transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
- 在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
- 在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
- 在CSS3中，transparent被延伸到任何一个有color值的属性上。
html+css实现奥运五环(环环相扣)的更多相关文章
- 用html和css制作奥运五环
<html><head><meta charset="utf-8"> <style>.circle1,.circle2,.circl ...
- Div+Css中transparent制作奥运五环
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas一周一练 -- canvas绘制奥运五环（1）
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- 【MATLAB】用MATLAB绘制奥运五环
[MATLAB]用MATLAB绘制奥运五环 今天用MATLAB绘制了一个奥运五环,好吧,实际上是帮人做作业,嘿嘿. 贴代码: clear; clc; N = 1000; angle = linspac ...
- Python绘制奥运五环
绘制奥运五环主要涉及到Python中的turtle绘图库运用: turtle.forward(distance) 向当前画笔方向移动distance像素长度 turtle.backward(dista ...
- 第一讲：使用html5——canvas绘制奥运五环
<html> <head> <title>初识canvas</title> </head> <body> <canvas ...
- python3 turtle画正方形、矩形、正方体、五角星、奥运五环
python3 环境 turtle模块 分别画出 正方形.矩形.正方体.五角星.奥运五环 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:H ...
- 【scratch3.0教程】 2.3 奥运五环
(1)编程前的准备 在设计一个作品之前,必须先策划一个脚本,然后再根据脚本,收集或制作素材(图案,声音等),接着就可以启动Scratch,汇入角色.舞台,利用搭程序积木的方式编辑程序,制作出符合脚本的 ...
- python使用turtle库绘制奥运五环
效果图: #奥运五环 import turtle turtle.setup(1.0,1.0) #设置窗口大小 turtle.title("奥运五环") #蓝圆 turtle.pen ...
随机推荐
- 开始PHP，常量/变量与内存间的关系--传值
一.常见的PHP代码嵌入式方式,与html结合 要注意:文件名后缀必须形如xxx.php否则html将无法解析 二.php脱离html代码独立工作,没有其他代码 不需要借助Apache工作,只需要ph ...
- qt5--表格控件QTableWidget
需要 #include <QTableWidget> #include <QTableWidgetItem> #include "win.h" ...
- Tomcat部署多个Springboot项目报错 InstanceNotFoundException: com.alibaba.druid:type=DruidDataSourceStat
在一个tomcat服务器下部署了多个采用阿里druid作为数据连接池,结果启动报错.原因是不能在一个tomcat服务器下不能直接部署多个druid作为数据连接池的项目,需要配置. 解决办法: 在spr ...
- oracle 循环的一种写法
for v_n in( select bb.temNum, bb.LOANTYPE from (select decode(bns.assignstate, '{016D68F9-719B-4EFC- ...
- 项目的Servlet类找不到
先右击项目,
- CDOJ 图论专题 A.不是图论 强连通分量+拓扑排序 经典
题目链接 在其中纠错第一次wa代码 #include <cstdio> #include <cstring> #include <cstdlib> #includ ...
- 洛谷P1576 最小花费x
题目背景 题目描述 在n个人中,某些人的银行账号之间可以互相转账.这些人之间转账的手续费各不相同.给定这些人之间转账时需要从转账金额里扣除百分之几的手续费,请问A最少需要多少钱使得转账后B收到100元 ...
- OCWA提高组模拟赛一 Solution
Problem A RecMin 给出一个$n \times m$的矩阵,其中$1 \leq n,m \leq 3\ times 10^3$ 给出整数$a,b$,求出在矩阵中所有$a\ times b ...
- 在线PDU格式编码/解码
在线PDU格式编码/解码 使用GSM/GPRS AT指令发送中文短信,汉字时,需要先将短信内容编码成PDU格式,然后通过AT+CMGS AT+CMGW等指令发送. 注意:需要先通过AT+CMG ...
- Unity3D_(游戏)卡牌01_启动屏界面
卡牌2D游戏展示 (游戏代码放到 卡牌04_游戏界面 文章最后面~) 游戏项目已托管到github上(里面有个32bit可执行文件) 传送门 规则 开始游戏每张卡牌初始翻开展示 展示几秒后卡牌 ...