css实现五环

ゞ浴缸里的玫瑰 2023-09-29 16:30 8阅读 0赞

## 一、代码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
          
                margin: 0;
            }
            div{
          
                border-radius: 50%;
                width: 100px;
                height: 100px;
                position: relative;
            }
            #div1{
          
                border: 5px solid blue;
            }
            #div2{
          
                border: 5px solid black;
                bottom: 110px;
                left: 110px;
            }
            #div3{
          
                border: 5px solid red;
                bottom: 220px;
                left: 220px;
            }
            #div4{
          
                border: 5px solid orangered;
                bottom: 270px;
                left: 55px;
            }
            #div5{
          
                border: 5px solid greenyellow;
                bottom: 380px;
                left: 165px;
            }
        </style>
    </head>
    <body>
    
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    </body>
    </html>

## 二、效果预览 ##

![在这里插入图片描述][506fcbf3c69845d48a1b86beedc44081.jpeg_pic_center]

[506fcbf3c69845d48a1b86beedc44081.jpeg_pic_center]: https://img-blog.csdnimg.cn/506fcbf3c69845d48a1b86beedc44081.jpeg#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关用python画五环

1 问题利用python程序画一个奥运五环。 2 方法奥林匹克标志中五个环的大小，颜色，间距有固定的比例，规定圆的半径为45，五个圆的起始坐标为（-110，-25），

雨点打透心脏的1/2处/ 2024年02月26日 02:51/ 0 赞/ 56 阅读

相关 css实现五环

一、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

ゞ浴缸里的玫瑰/ 2023年09月29日 16:30/ 0 赞/ 9 阅读

相关画奥运五环

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

柔情只为你懂/ 2023年06月05日 08:09/ 0 赞/ 11 阅读

相关 html css 奥运五环,CSS3 奥运五环加载动画

CSS 语言： CSSSCSS 确定 html \{ height: 100%; \} body \{ display: -webkit-box; displ

柔情只为你懂/ 2022年10月07日 08:51/ 0 赞/ 145 阅读

相关 HTML+CSS+JS实现 ❤️3D奥运五环图形特效❤️

> 效果演示： ![20210903221657828.gif][] > 代码目录： ![watermark_type_ZHJvaWRzYW5zZ

绝地灬酷狼/ 2022年09月10日 03:16/ 0 赞/ 212 阅读

相关 CreateJS奥运五环动画

索契奥运会结束了，今天给大家看一个利用CreateJS实现的奥运五环动画，在线把玩请点[这里][Link 1]，下载收藏请戳[这里][Link 2]。 ![SouthEast

太过爱你忘了你带给我的痛/ 2022年08月25日 08:49/ 0 赞/ 144 阅读

相关 SVG奥林匹克五环动画

引言昨天晚上索契冬奥会开幕，开幕式上还出现了五环变四环的乌龙，哈哈。我们用SVG弄个五环动画加以弥补。先来看看[效果][Link 1]，效果如下图所示。根据大家留言

r囧r小猫/ 2022年08月24日 14:22/ 0 赞/ 164 阅读

相关 canvas画奥运五环

效果如下： ![Center][] 代码如下： <!DOCTYPE html> <html> <head> <title>奥运五环

落日映苍穹つ/ 2022年07月15日 08:37/ 0 赞/ 175 阅读

相关 html+css制作五环（代码极简）

html+css制作五环（代码极简）五环把五环做成一个浮动，总是位于屏幕中央的效果。难点定位的练习 position ：fixed 位于body中间的时

港控/mmm°/ 2022年04月24日 14:16/ 0 赞/ 252 阅读

相关用css写一个有趣的奥运五环~。

用css实现奥运五环样式，并且于页面居中显示，不随页面滚动条而移动，一直处于居中位置。 html代码部分就一个div里边包含5个div。代码如下： <!DOC

Love The Way You Lie/ 2022年03月30日 15:38/ 0 赞/ 408 阅读