画奥运五环

柔情只为你懂 2023-06-05 08:09 10阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        * {
        margin: 0;padding: 0;}
        .box {
        
            width: 380px;height: 186px;
            position: absolute;
            top: 50%;left: 50%;
            margin-top: -93px; margin-left: -190px;
            /* 盒子整体在浏览器居中 */
        }
        .box div {
        
            width: 100px;height: 100px;
            border: 10px solid black;
            border-radius: 50%;
            /* 画圆 */
            position: absolute;
        }
        .box .circle1 {
        
            border-color: red;
            top: 0;left: 0;
        }
        .box .circle2 {
        
            border-color: green;
            top: 0;left: 130px;
            z-index: 1;
            /* 提升层级 */
        }
        .box .circle3 {
        
            border-color: yellow;
            top: 0;left: 260px;
        }
        .box .circle4 {
        
            border-color: blue;
            top: 70px;left: 65px;
        }
        .box .circle5 {
        
            border-color: purple;
            top: 70px;left: 195px;
        }
        /* 每个⚪设置各自颜色，添加偏移量 */
        </style>
    </head>
    <body>
        <div class="box">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
            <div class="circle5"></div>
        </div>
    </body>
    </html>

效果图： 百度>>五环（滑稽）

转载于:https://www.cnblogs.com/sandraryan/p/11112116.html

发表评论取消回复

表情：

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

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

相关阅读

相关用python画五环

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

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

相关 Python3 turtle绘制奥运五环代码实例

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIz

﹏ヽ暗。殇╰゛Y/ 2023年10月07日 11:06/ 0 赞/ 51 阅读

相关画奥运五环

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

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

相关 Java学习之AWT绘图“奥运五环”

案例代码： import java.awt.; public class Example8_9{ public static vo

川长思鸟来/ 2023年01月18日 06:41/ 0 赞/ 222 阅读

相关 Python实践：奥运五环的两种实现方法

import turtle t = turtle.Pen() for x in range(360): t.forward(x)

- 日理万妓/ 2022年12月19日 11:59/ 0 赞/ 179 阅读

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

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

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

相关 CreateJS奥运五环动画

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

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

相关 canvas画奥运五环

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

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

相关绘制自适应奥运五环

一、绘制自适应五环 1. 实现结果: 设计出五环的正确颜色和形状，并放置浏览器中间. 2. 设计思路首先我们用5个div块级元素来形成5个环的颜色和形状，并把这

怼烎@/ 2022年05月24日 12:28/ 0 赞/ 170 阅读

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

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

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