css3做太极图

最新推荐文章于 2023-04-14 20:48:04 发布
最新推荐文章于 2023-04-14 20:48:04 发布
阅读量480 收藏 4
点赞数 1
分类专栏： css 文章标签： 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121525626
版权

使用 css3 制作炫酷的会转的太极图：

先做出基本外观：

<body>
    
    <div class="box"></div>

</body>

最外层样式：

 <style>
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            /* 最外层大盒子倒圆角边 */
            border-radius: 50%;
            /* 加上盒子阴影，方便查看 */
            box-shadow: 0 0 50px rgba(0,0,0,0.8);
            position: relative;
        }
        /* 使用伪类，做出左右黑白两块区域 */
        /* 黑色 */
        .box:before{
            content: '';
            display: block;
            width: 200px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #000;
            /* 倒圆角边 */
            border-top-left-radius:200px;
            border-bottom-left-radius:200px;
        }

        /* 白色 */
        .box:after{
            content: '';
            display: block;
            width: 200px;
            height: 400px;
            background-color: #fff;
            position: absolute;
            right: 0;
            top: 0;
            /* 倒圆角边 */
            border-top-right-radius:200px;
            border-bottom-right-radius:200px;
        }
    </style>

现在是这个样子：

image.png

 在 .box 盒子中加上两个小盒子，做出交汇的半圆:

<body>
    
    <div class="box">
        <div class="banyuan1"></div>
        <div class="banyuan2"></div>
    </div>

</body>

样式：

  /* 黑色半圆 */
        .banyuan1{
            width: 200px;
            height: 200px;
            background-color: #000;
            z-index: 2;
            position: absolute;
            top: 0;
            left: 100px;
            border-radius: 300px;
        }
        /* 白色半圆 */
        .banyuan2{
            width: 200px;
            height: 200px;
            background-color: #fff;
            z-index: 2;
            position: absolute;
            top: 200px;
            right: 100px;
            border-radius: 300px;
        }

大致这个样子：

image.png

 在使用伪类，做出半圆中的小圆：

.banyuan1:after{
            content: '';
            width:75px;
	        height:75px;
	        background-color:white;
	        border-radius:75px;
	        position:absolute;
	        top: 60px;
	        left: 55px;
	        z-index:3;
        }
        .banyuan2:after{
            content:"";
            width:75px;
            height:75px;
            background-color:black;
            border-radius:75px;
            position:absolute;
            bottom: 60px;
            right: 55px;
            z-index:3;
        }

样式做好了：

image.png

 

给外层盒子添加动画：

/*动画*/

animation: mymove 2s linear infinite;

给太极图做旋转效果，360度旋转：

 .box{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            /* 最外层大盒子倒圆角边 */
            border-radius: 50%;
            /* 加上盒子阴影，方便查看 */
            box-shadow: 0 0 50px rgba(0,0,0,0.8);
            position: relative;
            
            animation: xuanzhuan 2s linear infinite;
        }
        @keyframes xuanzhuan {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }

查看效果：

旋转的太极图1.gif

 

huxiaoxiao.
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用css3绘制太极
m0_46862838的博客
05-07 275
<div class="circle"> <div class="maxcircle"> <div class="mblack"> <div class="minwhite"></div> </div> <div class="mwhite"> <div class="minblack"></div> </div> </div> </di
CSS3绘制旋转太极图特效代码
03-20
制作过程： 第一步创建一个1:1的DIV(width和height)自定义： 第二步创建两个矩形，高度为宽度的一半拼合则为一个正方形 第三步设置上矩形和下矩形的角度使其成为半圆，切设置边框 第四步每个矩形里创建圆（且创建内...
css3制作太极图
qq_44711316的博客
11-10 455
CSS3实现自转太极图 动态的，是有动画效果的，只是我没弄gif格式 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
css3动画制作太极图
军魂L
03-06 1167
css3：animation制作太极图（匀速逆方向旋转）【转载】：我们先来看下效果图截图： 制作时主要用到了css3的animation属性html:<div class="taiji"> <div class="a"> <div class="inner"></div> </div> <div class="b"> <div class="
css3 画太极图——用三个div实现
且听风吟的博客
10-16 560
css3 画太极图——用三个div实现
css3 画太极图——用一个div实现
且听风吟的博客
10-21 795
css3 画太极图——用一个div实现
css画太极图(阴阳八卦)
09-25
总结起来，这个CSS太极图的实现主要涉及以下几个知识点： 1. CSS选择器：`id`选择器用于选中特定元素，伪元素`:before`和`:after`用于添加额外内容。 2. 盒模型：`border`属性设置边框，`border-radius`创建圆角，`...
纯CSS3实现阴阳太极动画
11-24
阴阳太极图是中华文化中的一个重要符号，象征着宇宙万物的平衡与对立统一，而在网页设计中，通过CSS3实现这一动画效果，可以为用户带来视觉上的独特体验。 首先，要理解CSS3的关键帧动画（@keyframes）是实现这一...
纯CSS3实现太极图形样式代码.zip
11-25
最后，为了让太极图更生动，我们可以添加一些CSS3动画。例如，让阴阳鱼缓慢地旋转，可以使用`animation`属性和`@keyframes`规则： ```css @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform...
html+css3实现可以旋转的太极图案效果.zip
最新发布
09-25
在本项目中，"html+css3实现可以旋转的太极图案效果.zip" 是一个包含HTML和CSS3技术的实现，用于创建一个动态旋转的太极图案的示例。这个压缩包可能还包括JavaScript，尤其是jQuery库，因为标签中提到了"jquery插件...
旋转的阴阳鱼太极图源程序
08-21
本资源是孔令德开发的阴阳鱼太极图的旋转程序。使用MFC编写。阴阳鱼使用定时器驱动，开机后可以一直顺时针旋转。程序的解释见孔令德《计算机图形学基础教程（Visual C++版）》（第2版），清华大学出版社
用CSS3做一个会旋转的太极图
weixin_45336716的博客
09-02 269
先看源码： <style> * { margin: 0; padding: 0; } body { background-color: rgb(79, 200, 248); } div { width: 200px; height: 4...
CSS3实现太极图教程
小鑫の随笔
12-23 3559
我们先来看效果： 制作步骤： 1、先画个半圆 .box{ width: 300px; height: 150px; margin: 10em auto; border-width: 150px 0 0 0; border-style: solid; border-color: #000; border-radius: 50%; position: relat...
CSS3制作太极图
wangxinwang996的博客
04-14 100
在盒子里面绘制上下两个小圆，这两个小圆的特点，都是绝对定位在外层盒子上的某个点上。利用伪类before绘制 两个圆，将这两个对象定位在 外层盒子的某个点上。
css3 实现 太极图
她的猿的博客
05-22 1343
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;太极图&lt;/title&gt; &lt;style type="text/css"&gt; .taiji{position: relative;
【CSS3】太极图----三层div实现
zuncle的博客
02-09 2792
【CSS3】太极图—-三层div实现<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>太极</title> <style class="cp-pen-styles"> *{ padding:0; margin:0; } .
绘制太极图（CSS）
weixin_47340917的博客
09-22 1665
绘制太极图（CSS）预览图思路html布局代码部分CSS样式部分 Hello！大家好，这里是万物之恋。今天给大家带来的是CSS3动画制作一个旋转的太极图案。 预览图 貌似有些卡顿 是录制软件的锅。。。 思路 先在页面中绘制出一个大的白色圆形，再将其分为两个一黑一白的半圆。然后各自延伸出一个大小适合的同颜色小圆，里面居中绘制一个对立颜色的中心圆，最后利用css3动画让其旋转。 html布局代码部分 <body> <!-- 先是html代码部分 --> <div cla
CSS强大的功能--太极图的实现
yangguang3004的博客
03-11 714
text-shadow阴影，font-face属性，border-radius属性，border-image属性， box-shadow属性以及更炫的支持动画，放大，旋转，以及媒体查询等等功能。对于CSS的认识如果你还只停留在网页的一些元素的美化，版面样式的调整那你就是大错特错了,现在的CSS3所具备的特性真的是让人惊艳。是不是 很神奇，老实讲小编在一开始也是兴奋的一晚上都睡不着，css的强大之处真是妙不可言，当然，如果还想再加点效果的话，我们可以再加上以下代码，让它可以真正的滚动起来。
css3 如何画太极 和 奥运五环
Strugglin的博客
05-08 538
太极首先要明白太极的原理，如果手动去画一个太极应该怎么画如下图是一个不完整的太极但说明了其组成最终效果图：代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="tex
css太极图
05-25
以下是一个简单的 CSS 太极图示例： HTML 代码： ``` <div class="taichi"></div> ``` CSS 代码： ``` .taichi { width: 200px; height: 200px; border-radius: 50%; background: black; position: relative; } .taichi:before { content: ""; width: 100px; height: 100px; border-radius: 50%; background: white; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .taichi:after { content: ""; width: 100px; height: 100px; border-radius: 50%; background: black; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } ``` 解释： - 使用 `border-radius` 属性设置圆形形状。 - 使用 `background` 属性设置黑色背景。 - 使用 `position` 属性设置相对定位。 - 使用 `:before` 和 `:after` 伪元素来绘制阴阳鱼图案。 - 伪元素的 `content` 属性用于插入内容，这里设置为空。 - 设置 `width`、`height`、`border-radius` 和 `background` 属性来创建白色和黑色半圆形。 - 使用 `position: absolute` 等属性将伪元素定位在正确的位置。 - 使用 `transform: translateX(-50%)` 属性将伪元素水平居中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值