前端实现奥运五环图标

最新推荐文章于 2024-11-06 22:41:26 发布
最新推荐文章于 2024-11-06 22:41:26 发布
阅读量700 收藏
点赞数 20
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69304031/article/details/141687354
版权

 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/奥运五环.css">
</head>
<body>
        <div class="olympic-rings">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
</body>
</html>

css

body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    transform-style:preserve-3d;
}
.olympic-rings {
    width: 800px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transform-style:preserve-3d;
  }
  .olympic-rings span{
    width: 200px;
    height: 200px;
    border: 15px ,solid, blue;
    margin: 5px;
    box-sizing: border-box;
    border-radius: 60%;
  }
  .olympic-rings span:nth-child(2){
    border-color: black;
    transform: rotateY(-3deg);
  }
  .olympic-rings span:nth-child(3){
    border-color: red;
    transform: rotateY(-3deg);
  }
  .olympic-rings span:nth-child(4){
    border-color: yellow;
    transform: translateY(-105px) rotateX(2deg) rotateY(2deg);
  }
  .olympic-rings span:nth-child(5){
    transform: translateY(-105px) rotateY(3deg);
    border-color: green;
  }

小刘|
关注
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 4339
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
HTML5弹性布局
qiansixi的博客
01-04 1161
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
前端-变形例子2：奥运五环
m0_75163045的博客
08-28 211
2.设置内容区的宽、高，弹性盒子布局（上面三个，下面两个-->换行）并让子元素是否呈现正确的3d嵌套关系。1.设置body的高，弹性盒子布局（文字横着分布），居中分布在排列方向上以及居中对齐。3.设置每一个元素的边框，颜色等，让每个元素微微旋转以达到效果。
html5弹性布局
2201_75463016的博客
03-24 340
内容对齐（）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（）对齐。
Html5弹性布局（虽然是很简单的东西，但是也有记不住的时候）
黄瓜炒鸡蛋的博客
01-06 265
一、弹性布局Css公共样式 /* 公共弹性布局样式 */ /* 父容器 */ .flex{ display:flex; flex-wrap: wrap; justify-content: space-around; } /* 各种速度变化的弹性子节点类名 / / 子节点 */ .flex-cell-1{ flex-grow: 1; flex-shrink:1; text-align: center; } .flex-cell-2{ flex-grow: 2; flex-shrink:1; text-ali
前端项目实现——奥运五环
XIAO_A_fighting的博客
02-21 633
说起五环，第一反应肯定是很好实现 ，无非就是ul无序列表，然后利用position进行定位，最后改变颜色。但我们仔细观察，五环的实现其实并没有那么简单，由于每个环的位置关系，我们需要设置两层——（利用z-index调整，最后实现环之间的位置） html代码如下： <div class="wrap"> <ul> <li class="blue"></li> <li class="blue new">&l
HTML+CSS学习——奥运五环代码
ciscosong的博客
06-28 5566
HTML代码： test CSS代码： *{ margin: 0px; padding: 0px; } .plat{ position: absolute; border: 5px solid black; width: 380px; height: 190px; left: 50%; top: 50%; margin-top: -...
css3实现奥运五环颜色样式特效代码
03-20
**CSS3实现奥运五环颜色样式特效代码详解** 在网页设计中，利用CSS3的特性可以创建出各种吸引人的视觉效果。本篇文章将详细介绍如何利用CSS3中的`border-radius`属性来实现奥运五环的颜色样式特效。奥运五环是国际...
奥运五环旗
m0_38073539的博客
10-13 1144
上面三个圆的圆心a、b、c的y坐标相同，下面两个圆的圆心d、e的y坐标相同，ab=bc=ad=de,为保证两个圆相交，两个圆的圆心距离必须小于2r（r代表圆的半径).f为ab的中点，adf组成直角三角形，af=ad/2，只要给定五个圆的任何一个圆心坐标，就可以推倒出其他几个圆的圆心坐标。观察奥运五环旗的图案，直观的感觉，由五个圆组成，每个圆的颜色不一样，大小一样，按照一定的位置摆放，找到圆心坐标的规律，就可以通过Graphics类提供的绘制椭圆的方法drawOval（)来实现画圆操作.PLAIN,20);
OlympicRingsDemo:Android Canvas的基本使用，实现奥运五环效果
05-13
在"OlympicRingsDemo"项目中，开发者利用Canvas的基本功能，成功地实现了奥运五环的绘制效果。这个例子深入浅出地展示了如何通过编程来创建复杂图形，对于理解和掌握Android图形绘制有极大的帮助。 首先，我们来...
奥运五环的含义及其颜色对应码
热门推荐
猿小白的博客
04-30 5万+
奥运五环依次为黄、黑、蓝、红、绿色，五个环五种颜色分别代表着五大洲。 黄色代表的是亚洲、黑色表示的是非洲、蓝色表示的是欧洲、红色表示的是美洲、绿色表示的是大洋洲 其对应的颜色值： 蓝色，代表欧洲；RGB:0/107/176，#006BB0；CMKY：92/60/9/1 黄色：代表亚洲；RGB：239/169/13，#EFA90D；CMYK：9/37/99/0 黑色：代表非洲；RGB：29...
HTML写一个奥运五环
快扶我起来搬砖
09-08 1761
*{ margin: 0; padding: 0; } div{ width: 150px; height: 150px; } div.wrapper { width: 550px; height: 250px; } .green{ position: absolute; left:280px; top: 80px; border: 10px solid green; } ....
纯HTML+CSS 画奥运五环标志，我就是闲的
小神仙他爹老神经的博客
12-20 2007
  &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;link rel="stylesheet" href="css/css01a.css"&gt; &lt;title&
Webserver(3.3)生产者消费者模型
学习历程记录和分享
11-05 240
解决该问题需要用互斥量确保线程同步，用条件变量或者信号量去解决生产者和消费者之间同步的问题，生产者把数据生产满了要通知消费者去消费。会产生数据安全问题，比如生产者还未生产出来，就去消费。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 140
vxe-grid新增空行，并且定位到空行位置。
前端react常见面试题目（basic)
警警的博客
11-02 1001
react常见面试题目（basic)
前端性能优化2
最新发布
Cwhat的博客
11-06 349
常见问题：首屏速度，白屏时间等。操作速度以及渲染速度。一打开网页时白屏，是因为还需要从服务器那边请求HTML、JS这些过来，加载下来后才有东西渲染首屏速度参考两方面：白屏时间（资源加载时间、首屏js执行）、渲染页面（首屏数据请求、Dom渲染）渲染页面是比较快的，所以大多数时间是花在了白屏时间上，而其中的资源加载时间是占比比较大的。
基于 SpringBoot 实现QQ邮箱验证码注册功能
2301_79201049的博客
11-06 285
找到并开通以下的邮件协议服务，而且服务开启也较为简单，需要我们发送一个短信到指定的号码，开启后平台会提供一个授权码，一定要记住这个授权码，发邮件的时候需要这个。host 是根据服务主机区分，网易邮箱是 smtp.163.com, qq邮箱是 smtp.qq.com。其中的 username 是你第一步中操作的邮箱账号，nickname 是接收者收到邮件中显示的发件人。发送邮件的核心依赖是 mail ，由于该项目还涉及其他依赖就全都导进来了。（1）首先打开QQ邮箱，点击设置并来到账号页面。
python 绘制奥运五环图标
07-13
你可以使用 Python 的 matplotlib 库来绘制奥运五环图标。以下是一个示例代码： ```python import matplotlib.pyplot as plt import matplotlib.patches as patches fig, ax = plt.subplots() # 绘制蓝色圆环 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值