HTML+CSS实现奥运五环

奥运五环是很经典的存在，现在用代码写一遍。
重点在于，第二行的环和第一行并不是直接覆盖叠加，而是互相环绕。
主要是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); }

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

HTML+CSS实现奥运五环相关推荐

通过CSS实现奥运五环效果、实现环环相扣效果
<!DOCTYPE html> <html> <head> <title>奥运五环</title> <style type=" ...
html+css实现奥运五环(环环相扣)
<!DOCTYPE html> <html> <head><title>奥运五环</title> <style type=" ...
纯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属性调整各环的层级关系即可. 本教程 ...
CreateJS奥运五环动画
索契奥运会结束了,今天给大家看一个利用CreateJS实现的奥运五环动画,在线把玩请点这里,下载收藏请戳这里. html文件非常简单,仅仅是弄了个canvas <canvas id=" ...
奥运五环-web前端
web前端实现奥运五环 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
HTML实现奥运五环
<!DOCTYPE html> <html> <head><title>奥运五环</title> <style type=" ...

HTML+CSS实现奥运五环

HTML+CSS实现奥运五环相关推荐

最新文章

热门文章