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 ...
随机推荐
- antd design vue 设置 v-decorator 的初始值
v-decorator="['openType', { initialValue:'1' }]" 效果:
- BZOJ1050 [HAOI2006]旅行comf[并查集判图连通性]
★ Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求 一条路径,使得路径 ...
- 【51nod1672】区间交
题目大意:给定一个长度为 N 的序列,以及 M 个区间,现从中选出 K 个区间,使得这些区间的交集区间的点权和最大,求最大值是多少. 题解: 发现直接选 K 个区间不可做,考虑从答案入手.设答案区间为 ...
- pdf转换
namespace Utilities { public static class PDFHelper { /// <summary> /// Html转Pdf /// </summ ...
- docker-compose容器互相连接
一些示例未整理 haproxy 与nginx 容器连接 ## 服务的compose 编写 mkdir /mnt/compose vim docker-compose.yml web1: image: ...
- 使用keil生成bin文件
相关文件 下载http://pan.baidu.com/share/link?shareid=478269&uk=1107426113 使用kei自带的工具的话是 打开Options f ...
- 货郎担问题（TSP问题）
货郎担问题也叫旅行商问题,即TSP问题(Traveling Salesman Problem),是数学领域中著名问题之一. 有n个城市,用1,2,…,n表示,城i,j之间的距离为dij,有一个货郎从城 ...
- 查看线程的cpu占用率
1) top -H -p 进程pid 查看线程的线程ID与CPU占用情况.或者使用 ps -eLo pid,lwp,pcpu | grep 进程pid2) pstack ...
- 出现org.maven.ide.eclipse.MAVEN2_CLASSPATH_CONTAINER， 且出现无法找到Maven的依赖的问题
解决方案:Build Path -> Java Build Path ->Libraries ->Add Library ->Maven Managed Dependences ...
- 牛客 19-5-3 QAQ
#include<iostream> #include<cstring> using namespace std; typedef long long LL; int main ...