纯CSS3 太极效果

最新推荐文章于 2023-05-31 11:26:15 发布
最新推荐文章于 2023-05-31 11:26:15 发布
阅读量440 收藏
点赞数 1
分类专栏： js 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mayslxc/article/details/50507111
版权
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>CSS3</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- <link rel="stylesheet" href="./taiji.css"> -->
  <style>
html{
width:100%;
height:100%;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
-o-text-size-adjust:none;
text-size-adjust:none;
}


body{
margin:0;
padding:0;
width: 100%;
height:100%;
    background: -webkit-linear-gradient(black, white) no-repeat; 
    background: -o-linear-gradient(black, white) no-repeat;
    background: -moz-linear-gradient(black, white) no-repeat;
    background: linear-gradient(black, white) no-repeat;
color:#000;
font-size: 1.53em;
font-family: "SimSun";
}
ul{
list-style: none;
margin: 0;
padding:0;
}


a:link,a:hover,a:visited,a:focus{
text-decoration: none;
outline: none;
}
*,*:after,*:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
}
*:after,*:before{
display: block;
content:"";
}
*:after{
clear: both;
}
/* taiji */
.box-taiji{
position: relative;
width:400px;
height:400px;
margin:100px auto;
border-radius: 50%;
background-color: #ccc;
-webkit-animation:huan 2.5s infinite linear;
animation:huan 2.5s infinite linear;

}
.box-taiji .b{
position:absolute;
left:0;
top:0;
z-index: 9999;
width:200px;
height:200px;
border-radius: 50%;
background-color: #fff;
-webkit-transform:translateX(50%);
transform:translateX(50%);
/*transform:translateY(-25%);*/
}
.box-taiji .b p{
width:200px;
height:200px;
line-height: 200px;
text-align: center;
}
.box-taiji .w{
position:absolute;
right:75px;
bottom:0;
z-index: 9999;
width:200px;
height:200px;
border-radius: 50%;
background-color: #000;
-webkit-transform:translateX(-12.5%);
transform:translateX(-12.5%);
/*transform:translateY(75%);*/
}
.box-taiji .w p{
width:200px;
height:200px;
line-height: 200px;
text-align: center;
color:#fff;
/*padding-left:50%;*/
}
.box-taiji .mask{
position:absolute;
left:0;
top:0;
z-index: 999;
width:0;
height:0;
border-width:200px;
border-style:solid;
border-top-color:#fff;
border-right-color:#000;
border-bottom-color:#000;
border-left-color:#fff;
border-radius: 50%;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
@keyframes huan{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@-webkit-frames huan{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@-webkit-keyframes huan{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@-webkit-frames huan{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.text{text-align: center;}
  </style>
</head>
<body>
<div class="box-taiji">
<div class="b"><p>•</p></div>
<div class="w"><p>•</p></div>
<div class="mask"></div>
</div>
<div class="text">
<h1>太极</h1>
<p>万物相生相克</p>
<p>两极变化无穷</p>
</div>
</body>
</html>
mayslxc
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用css3绘制太极
m0_46862838的博客
05-07 274
<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实现阴阳太极动画
11-24
综上所述，实现纯CSS3的阴阳太极动画，需要巧妙地运用关键帧动画、`transform`、`radial-gradient`以及其他的CSS3特性。这样的动画不仅可以提升网站的视觉吸引力，也展示了CSS3的强大功能和无限可能。通过不断实践和...
纯css太极运转
who_become_gods的博客
03-17 97
太极效果图如下：可以旋转的哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>change tab</title> <style> * { padding:...
CSS实现太极图效果
Zero____________的博客
07-12 238
记得要先生成一个div盒子才会有效果 <style> body { background-color: #ccc; } div { position: relative; width: 150px; height: 300px; background-color: #fff; border
css3 太极动画,css
weixin_30821291的博客
08-03 82
css*,*:before,*:after {box-sizing: border-box;}html,body {min-height: 100vh;}body {margin: 0;display: -webkit-box;display: flex;-webkit-box-pack: center;justify-content: center;-webkit-box-align: cent...
css3做太极图
最爱喝怡宝的博客
11-24 479
使用 css3 制作炫酷的会转的太极图： 先做出基本外观： <body> <div class="box"></div> </body> 最外层样式： <style> .box{ width: 400px; height: 400px; border: 1px solid #000; /* 最外层大盒子倒
纯CSS3绘制可旋转的太极图形样式效果源码.zip
10-31
这个压缩包文件“纯CSS3绘制可旋转的太极图形样式效果源码.zip”提供了一种纯CSS3实现的太极图形旋转效果，无需借助JavaScript或者其他图形库。这个例子展示了CSS3的强大功能，特别是其在动画和图形设计方面的应用。...
纯CSS3实现的3D阴阳八卦（太极）图旋转动画效果源码.zip
11-20
在本资源中，我们拥有一个使用纯CSS3技术实现的3D阴阳八卦（太极）图旋转动画效果的源代码。这个项目展示了CSS3的强大功能，尤其是其在创建动态图形和动画方面的潜力。以下是对这个技术实现的详细解析： 1. **CSS3 ...
太极css样式
zh_flowers的博客
05-06 227
使用boeder-radius 在这里插入代码片` **HTML** <div class="cricle" > <ul> <li class="cricleone"></li> <li class="cricletwo"></li> ...
css3 画太极图——用一个div实现
且听风吟的博客
10-21 795
css3 画太极图——用一个div实现
运用CSS径向渐变制作旋转太极图
m0_71982624的博客
05-31 72
一段很简单的代码，需要的时候直接Ctrl+C啦~
【CSS】使用渐变画一个太极图案
点滴记忆
06-05 215
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
css3效果联系（太极图、对话框）
hard_days的博客
09-27 359
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css&quot
纯css3实现的太极八卦并且会转动的css3特效
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
09-22 1088
纯CSS3实现太极图形样式代码 - 代码笔记 .square{ width:400px;height:400px;position:relative; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); animation:rota
【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实现太极图案例
xu_yuxuyu的博客
11-05 4479
概述： 所谓太极即是阐明宇宙从无极而太极，以至万物化生的过程。其中的太极即为天地未开、混沌未分阴阳之前的状态。太极也指：“一阴一阳之谓道”也正是对太极的解释。 话不多说，先让我们看看太极图的形状~ 乍看好像挺难的，其实通过我们CSS是可以实现的，我们需要用到圆角边框属性和径向渐变、线性渐变属性就可以了，如果对这两个属性不是很熟悉的话，建议您先移步看下我的前面CSS的第八章和第九章的讲解，还是讲的比较仔细的，零基础的也能看得懂。 思路 先准备一个正方形的盒子，把这个盒子分成上下两个部分，这两个部分都是设置一
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使用径向渐变实现太极图效果（三个div）
wangzhneg123的博客
03-05 1274
效果展示： 源码展示： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;纯CSS3使用径向渐变实现太极图（三个div）&lt;/title&gt; &lt;!--border
CSS3太极图动图
weixin_46389377的博客
08-14 698
今天看到太极图很有意思，就用css写了一个想跟大家分享一下。 步骤一：先用一个div盒子分成两份，一半是黑一半是白。先把背景颜色设置成黑色（白色），然后左边/右边盒子可以用border-left/right: 150px solid #000/#fff。 步骤二：加css样式让这个盒子变成一个圆，如下图。 步骤三：这里我用了伪元素加了相当于两个小盒子，能少写很多代码也方便理解。（但一定要注意伪类元素即使不写内容也要加上content=‘’，这个我觉得容易忘记就提醒一下大家，我的盒子就一直没出来还以为哪里写
纯css照片动态效果
最新发布
05-17
纯 CSS 照片动态效果可以通过 CSS 的一些属性和技巧来实现，以下是一些常见的动态效果： 1. 鼠标悬停放大：使用 CSS 的 `transform` 属性，设置 `scale` 值即可实现。例如： ```css img:hover { transform: scale(1.2); } ``` 2. 点击翻转：使用 CSS 的 `transform` 属性，设置 `rotateY` 或 `rotateX` 值即可实现。例如： ```css img:active { transform: rotateY(180deg); } ``` 3. 图片展示动画：使用 CSS 的 `transition` 属性，设置过渡时间和效果即可实现。例如： ```css img { transition: transform 0.5s ease-in-out; } img:hover { transform: rotate(360deg); } ``` 4. 图片滑动切换：使用 CSS 的 `transform` 和 `transition` 属性，设置 `translateX` 或 `translateY` 值即可实现。例如： ```css .container { display: flex; overflow-x: scroll; } img { margin-right: 10px; transition: transform 0.5s ease-in-out; } img:hover { transform: translateX(20px); } ``` 以上只是一些简单的示例，实际上还有很多不同的动态效果可以通过纯 CSS 实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值