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 ...
随机推荐
- k8spod探测
一.pod存活性探测 pod spec为容器列表中的相应容器定义其专用的探针即可启用存活性探测,目前,k8s的容器支持存活性探测的方法包含:ExecAction.TCPSocketActon和HTTP ...
- jquery 图片切换
仿着写的一个jquery的图片切换小插件,代码如下: html: <!DOCTYPE html> <html lang="en"> <head> ...
- Python CGI编程Ⅵ
GET和POST方法 浏览器客户端通过两种方法向服务器传递信息,这两种方法就是 GET 方法和 POST 方法. 使用GET方法传输数据 GET方法发送编码后的用户信息到服务端,数据信息包含在请求页面 ...
- eclipse切换 package explorer
- Luogu2000 拯救世界
题目链接:戳我 生成函数的入门题吧. 我们可以把条件限制转化为生成函数,然后用第i项的系数来表示一共使用n块石头的方案个数. (你问我为什么?你可以自己演算一下,或者去看大佬的博客-->这里面讲 ...
- vue中使用iconfont和在旧有的iconfont中添加新的图标
todo 使用参考:https://blog.csdn.net/qq_34802010/article/details/81451278 大体步骤是正确的,具体可参考官方文档和下载下来的代码中的dem ...
- 分布式-信息方式-ActiveMQ的Destination高级特性1
ActiveMQ的Destination高级特性 Destination高级特性----->Composite Destinations 组合队列Composite Destinations : ...
- C++入门经典-例4.4-循环嵌套之求n的阶乘
1:代码如下: // 4.4.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...
- C++入门经典-例3.19-使用break跳出循环
1:代码如下: // 3.19.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...
- weblogic域，管理服务器，受管服务器，集群和机器的基本知识
1.域(Domain) •它是什么? –是一个逻辑上管理的WebLogic Server组,这些组从管理上当作一个整体来操作 •域里面有什么? –服务器 –服务器集群 –机器 •规则: –同一个域中的 ...