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>

View Code

效果：

实现原理：在有重叠部分，每个环对应位置有两个环，一个有色环，一个透明环，根据重叠部分应有的颜色设置透明环边框的颜色。

例如:

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值的属性上。

转载于:https://www.cnblogs.com/2016-zck/p/10695457.html

html+css实现奥运五环(环环相扣)相关推荐

通过CSS实现奥运五环效果、实现环环相扣效果
<!DOCTYPE html> <html> <head> <title>奥运五环</title> <style type=" ...
HTML+CSS实现奥运五环
奥运五环是很经典的存在,现在用代码写一遍. 重点在于,第二行的环和第一行并不是直接覆盖叠加,而是互相环绕. 主要是transform: rotateY()的作用; //HTML代码 <div c ...
纯HTML+CSS 画奥运五环标志，我就是闲的
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8&q ...
html css 奥运五环,用css写一个有趣的奥运五环~。
用css实现奥运五环样式,并且于页面居中显示,不随页面滚动条而移动,一直处于居中位置. html代码部分就一个div里边包含5个div.代码如下: Document div.main{ positio ...
使用CSS中clip-path属性实现奥运五环
今天偶然看见一个使用css实现奥运五环的效果,感觉还挺新奇的,参考了别人连接好的两个环,自己尝试将剩下的三个环连接上.其主要是使用到了一个css:clip-path的polygon属性. 完整代码如下 ...
html css 奥运五环,用css3实现一个奥运五环
css3实现奥运五环的方法:首先给5个div设置border-radius样式,制作五个圆环:然后使用position属性设置五个圆环的位置:最后使用z-index属性调整各环的层级关系即可. 本教程 ...
用Python画环环相扣的奥运五环
要实现五环环环相扣,我采取的方法就是先画半圆,根据五环重叠顺序,确定半圆生成顺序! 具体代码如下: c=['blue','black','red','yellow','green'] t.pensiz ...
PS如何制作奥运五环
在photoshop中制作奥运五环,可以很好的练习图层和选区运算两个知识点.下图为制作效果: 奥运五环,也称为奥林匹克环,从左至右颜色分别为蓝.黄.黑.绿.红五色.五环代表以奥林匹克精神参赛的五大洲, ...
弘扬奥运精神，我们49行画个奥运五环
虽然这届奥运遇到重重阻碍,疫情影响而延后,延后了要举办民众反对,再然后彩排后还爆出xq案件,更有小道爆出黑幕.这些种种我们就忽略掉吧- 截止本文发表,我们看看战况: 弘扬奥运精神,今天我们用49行写歌 ...

html+css实现奥运五环(环环相扣)

html+css实现奥运五环(环环相扣)相关推荐

最新文章

热门文章