用HTML与css制作八卦图

最新推荐文章于 2024-04-10 12:41:05 发布
最新推荐文章于 2024-04-10 12:41:05 发布
阅读量227 收藏
点赞数 1
文章标签： html css webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63932810/article/details/123296095
版权

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>我的第一个页面</title>

    <style>

        body {

            background: #eee;

        }

        * {

            box-sizing: border-box;

            padding: 0;

            margin: 0;

        }

        @keyframes x {

            from {

                transform: rotate(0deg);

            }

            to {

                transform: rotate(360deg);

            }

        }

        #八卦 {

            width: 400px;

            height: 400px;

            border-radius: 50%;

            position: relative;

            overflow: hidden;

            animation: x 10s infinite linear;

            box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.75);

        }

        @media(max-width:500px) {

            #八卦 {

                width: 200px;

                height: 200px;

            }

        }

        #八卦>div:first-child {

            width: 50%;

            height: 100%;

            position: absolute;

            left: 0;

            background: black;

        }


 

        #八卦>div:nth-child(2) {

            width: 50%;

            height: 100%;

            position: absolute;

            right: 0;

            background: white;

        }

        #八卦>div:nth-child(3) {

            position: absolute;

            width: 200px;

            height: 200px;

            left: 50%;

            margin-left: -100px;

            border-radius: 50%;

            background: black;

        }

        @media(max-width:500px) {

            #八卦>div:nth-child(3) {

                width: 100px;

                height: 100px;

                margin-left: -50px;

            }

        }

        #八卦>:nth-child(4) {

            position: absolute;

            width: 200px;

            height: 200px;

            left: 50%;

            bottom: 0;

            margin-left: -100px;

            border-radius: 50%;

            background: white;

        }

        @media(max-width:500px) {

            #八卦>:nth-child(4) {

                width: 100px;

                height: 100px;

                margin-left: -50px;

            }

        }

        #八卦>:nth-child(5) {

            position: absolute;

            width: 50px;

            height: 50px;

            left: 50%;

            top: 75px;

            margin-left: -25px;

            border-radius: 50%;

            background: white;

        }

        @media(max-width:500px) {

            #八卦>:nth-child(5) {

                width: 25px;

                height: 25px;

                top: 37.5px;

                margin-left: -12.5px;

            }

        }

        #八卦>:nth-child(6) {

            position: absolute;

            width: 50px;

            height: 50px;

            left: 50%;

            bottom: 75px;

            margin-left: -25px;

            border-radius: 50%;

            background: black;

        }

        @media(max-width:500px) {

            #八卦>:nth-child(6) {

                width: 25px;

                height: 25px;

                bottom: 37.5px;

                margin-left: -12.5px;

            }

        }

        #八卦-wrapper {

            height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

            flex-direction: column;

        }

        #八卦-描述 {

            margin-top: 1em;

        }

    </style>

</head>

<body>

    <div id="八卦-wrapper">

        <div id="八卦">

            <div></div>

            <div></div>

            <div></div>

            <div></div>

            <div></div>

            <div></div>

        </div>

        <div id="八卦-描述">

            道可道，非常道

        </div>

    </div>

</body>

</html>

浏览网址：我的第一个页面 (lyz828.github.io)icon-default.png?t=M1L8https://lyz828.github.io/htm5-css3-doem1/

lyz简简单单
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用HTML和CSS制作一个八卦图.md
04-01
利用HTML和CSS制作一个可以旋转的八卦图
转动的八卦图纯css实现
avg76992的博客
07-01 159
  这类的东西网上一搜就是大把的，看着比较空旷的博客，所以自己也来写一个。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="...
CSS3 旋转的八卦图
weixin_30827565的博客
09-28 81
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #container{height: 202px;width: 200px;...
html css 八卦图,CSS动画-八卦图
weixin_29005499的博客
06-30 201
该楼层疑似违规已被系统折叠隐藏此楼查看此楼Document#in>div{width:150px;height:80px;border:1pxsolid #ddd;position:absolute;top:310px;left:425px;}#c1{transform:rotatey(0deg)translatez(200px);}#c2{transform:rotatey(180deg...
html-css-js-demos:用ccs3制作一个八卦图
04-02
【标题】：“html-css-js-demos:用ccs3制作一个八卦图”指的是一个使用HTML、CSS和JavaScript技术实现的在线示例项目，其目的是创建一个具有八卦样式布局的图形。八卦图通常由八片相互连接的扇形区域组成，常常用于...
基于HTML美中华传统文化题材网页项目的设计与实现 (纯HTML+CSS制作中国茶文化网站)
08-10
此项目使用HTML5和CSS3构建了一个以中华传统文化为主题的网站，特别是围绕“茶文化”展开。这表明了HTML5与CSS3在现代网页设计中的重要性和实用性。 - **HTML5**提供了更多的语义化标签（如`<header>`、`<nav>`、`...
制作一个简单HTML宠物猫网页（HTML+CSS）
08-10
根据给定文件中的【标题】,【描述】,【标签】,【部分内容】，我们可以从中提炼出一系列与HTML、CSS以及网页设计相关的知识点： ### 1. HTML与CSS基础知识 - **HTML（HyperText Markup Language）**: 是一种用于创建...
使用css+html制作的抖音首页
08-19
在本项目中，“使用css+html制作的抖音首页”是一个简单的网页开发实例，主要目标是模仿抖音官方网站的首页布局。这个项目使用了HTML和CSS这两种基础的前端技术，旨在通过百分比布局和定位来实现页面的响应式设计，...
CSS伪类实现加号
CaseyWei
11-15 932
<!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...
旋转的八卦图.html
11-30
是用HTML、CSS代码来实现2D旋转，用定位和动画做出八卦图自动旋转，鼠标经过停止，鼠标离开，继续旋转。
HTML八卦图
weixin_73184582的博客
03-14 252
一个炫酷的原生八卦图
html制作动态八卦图源码
weixin_43474701的博客
12-14 2783
动态八卦图 自动旋转的八卦图，一个html文件就行，如下动态图所示： taijitu.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="taiji"> </div> </body> <style&gt
html5制作八卦图,使用HTML+CSS画太极八卦图
weixin_39751391的博客
06-10 743
使用HTML+CSS画太极八卦图基本语法CSS基本语法格式:选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}选择符:1.元素选择器:找到同名一系列2.类选择器:找到同类名一系列定义:web前端开发1调用:.div1{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}3.id选择器:唯一性，只能找到一个定义:web前端开发1调用:#div1{属性1:属性...
如何用html 写八卦
zwq123w的博客
11-15 955
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> html,body{ height:100%; } *{ padding:0; margin:0; }
html5 css3画八卦图,用纯CSS3绘制乾坤八卦图
weixin_34139050的博客
06-10 1624
乾坤八卦图衍生自中国古代的《河图》与《洛书》，伏羲根据燧人氏造设的这两幅星图所作。其形状经过抽象以后，成为对称感相当强的几何图形，无论是黑白两色还是形状，都非常地平衡和稳重。不难发现，乾坤八卦图的形状均为圆形。而css3绘制圆的方法也很简单，设置圆角半径等于50%即可，所以绘制起来十分方便。大体结构就是两个半圆，左白右黑，然后上下分别绘制一个半径等于大圆一半的圆，上黑下白，最后加上两个圆点即可。总...
html制作动态八卦图源码，移动智能终端开发
最新发布
m0_61369275的博客
04-10 739
left:50%;top: 0;bottom: 0;
生成一个太极八卦阵的动画HTML代码
weixin_35756892的博客
01-03 501
太极八卦阵是中国武术中的一种招式，可以用HTML代码来创建动画。下面是一个简单的示例，使用HTML、CSS和JavaScript实现： <html> <head> <style> /* 定义动画的样式 */ @keyframes spin { from { transform: rotate(0deg); } ...
html八卦绘制,HTML+CSS实现画出一个太极八卦图案
weixin_33196106的博客
06-22 915
太极八卦是中华文化的象征。今天我就用了html+css画出来一个太极八卦的图案，喜欢的可以拿去研究下！代码:太极八卦作者无陌然qq2633544207 aide技术网aidezy.com/* CSS Document */html, body, div, span, object, iframe,h1, h2,h3, h4, h5, h6, p, blockquote, pre,abbr, add...
HTML+CSS：手把手教你制作可旋转八卦图教程
本篇文章主要介绍了如何利用HTML和CSS技术制作一个可以旋转的八卦图。HTML和CSS是网页开发的基础工具，它们分别负责页面的结构和样式设计。这里通过详细的步骤来构建一个视觉上具有中国传统元素的八卦图。 首先，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值