HTML+CSS实现奥运五环

最新推荐文章于 2021-11-15 21:42:25 发布

qq_41561036

最新推荐文章于 2021-11-15 21:42:25 发布

阅读量821

点赞数 1

文章标签：经典图形

本文链接：https://blog.youkuaiyun.com/qq_41561036/article/details/100638671

版权

奥运五环是很经典的存在，现在用代码写一遍。
重点在于，第二行的环和第一行并不是直接覆盖叠加，而是互相环绕。
主要是transform: rotateY()的作用;

//HTML代码
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<br>
<div class="circle circle4"></div>
<div class="circle circle5"></div>

//CSS代码
body { 
				transform-style: preserve-3d; 
			} 
			.circle { 
				border-radius: 50%; 
				height: 80px; 
				width:80px; 
				display: inline-block; 
				position: relative; 
				border-width: 10px; 
				border-style: solid; 
			} 
			.circle1 { 
				border-color: red; 
				transform: rotateY(-1deg); 
			} 
			.circle2 { 
				border-color: blue; 
				transform: rotateY(-1deg); 
			} 
			.circle3 { 
				border-color: green; 
				transform: rotateY(-1deg); 
			} 
			.circle4 { 
				top: -60px; 
				left: 53px; 
				transform: rotateY(1deg); 
			} 
			.circle5 { 
				top: -60px; 
				left: 53px; 
				border-color: gold; 
				transform: rotateY(1deg); 
			}

以上，实现奥运五环的方法很多，仅供参考。