web前端——HTML+CSS实现奥运五环

这篇具有很好参考价值的文章主要介绍了web前端——HTML+CSS实现奥运五环。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

web前端——HTML+CSS实现奥运五环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgb(224, 212, 203);
        }
        
        .container {
            width: 500px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            transform-style: preserve-3d;
        }
        
        .container .item {
            width: 150px;
            height: 150px;
            border: 9px solid black;
            border-radius: 50%;
            margin: 4px;
        }
        
        .container .item:nth-child(1) {
            border-color: blue;
        }
        
        .container .item:nth-child(2) {
            border-color: black;
            transform: translateZ(-2px) rotateX(2deg);
        }
        
        .container .item:nth-child(3) {
            border-color: red;
            transform: translateZ(-3px) rotateX(4deg);
        }
        
        .container .item:nth-child(4) {
            border-color: yellow;
            transform-origin: center 25%;
            transform: translateY(-70px) rotateX(1deg);
        }
        
        .container .item:nth-child(5) {
            border-color: green;
            transform: translateY(-70px) translateZ(2px) rotateX(3deg);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>

web前端——HTML+CSS实现奥运五环,前端,html,css 文章来源地址https://www.toymoban.com/news/detail-743451.html

到了这里,关于web前端——HTML+CSS实现奥运五环的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web前端:HTML+CSS+JS实现美女照片3D立方体旋转(1),网易资深Web前端架构师

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新Web前端全套学习资料》,

    2024年04月23日
    浏览(53)
  • web前端——HTML+CSS

    HTML CSS CSS进阶 CSS盒子模型 定位装饰 CSS精灵图 目录 基础认识  HTML  一、HTML概念 二、HTML页面固定结构  三、HTML标签的结构   四、标签学习 1、排版标签 1)标题标签  2)段落标签  3)换行标签 4)水平线标签  2、文本格式化标签  3、媒体标签 1)图片标签 2)路径  3)音

    2024年01月16日
    浏览(55)
  • CSS变形与动画(二):perspctive透视效果 与 preserve-3d 3d效果(奥运五环例子)

    perspective 指定了观察者与 z=0 平面的距离,使具有三维位置变换的元素产生透视效果。z0 的三维元素比正常大,而 z0 时则比正常小,大小程度由该属性的值决定。 作用于在 父级 上。 相互可以视觉上 插入 和 覆盖 transform-style: preserve-3d; 也是用在 父级 上 例子 奥运五环 通过每

    2024年02月12日
    浏览(66)
  • Web 前端—HTML+CSS系列

    (1)知识点 :是制作网页的编程语言 浏览器把代码解析后的样子就是我们看到的网站 一个网站是由很多个网页组成的 查看网页代码源 (2).html网页制作 新建一个文件夹——新建记事本——把记事本格式改成demo.html模式——打开方式(打开记事本)——输入要输入的内容—

    2024年02月04日
    浏览(56)
  • Web前端开发:HTML、CSS

    在介绍Web网站工作流程的时候提到, 前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序 ,如下图所示: 1.   网页有哪些部分组成 ? 文字、图片、音频、视频、超链接、表格等等。 2.  我们看到的网页,背后的本质是什么 ? 程序员写的前端

    2023年04月18日
    浏览(40)
  • web前端综合案例——小兔鲜首页(html+css)

    前言:我这里只使用了html和css,js没有使用 项目源代码:https://pan.baidu.com/s/1alnekYEu5F9XwHTW7dO5RA?pwd=qjhd 页面效果:   1.准备项目相应的图片素材,设计稿。 2.创建项目: 2.1 项目名字为:xtx-pc-client 2.2 css里面创建了三个分别为         base.css 这个是全局设置的元素       

    2024年02月07日
    浏览(50)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(72)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(68)
  • 【Web前端HTML+CSS基础——小米官网项目实战】

    小米官网是学习前端实战项目锻炼最多的一个项目,基本上就是学习完HTML和CSS之后就可以开始锻炼自己实战的能力,学习如何搭建自己一个完整的页面实战,对之后的学习打下很好的基础,在这个博客的代码中,我只是涉及到相关的HTML和CSS,图片路径可以自己改并且找一些

    2024年02月04日
    浏览(58)
  • Web前端大作业制作个人网页(html+css+javascript)

    🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。 ⭐个人网页设计网站模板采用DIV CSS布局制作,网页作品有多个页面,如 :个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页

    2024年02月10日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包