CSS动画：太极

最新推荐文章于 2024-01-05 09:42:33 发布
最新推荐文章于 2024-01-05 09:42:33 发布
阅读量174 收藏
点赞数 1
分类专栏： web开发——作品 文章标签： css css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44645934/article/details/105561338
版权

CSS动画：太极

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>太极</title>
		<link rel="stylesheet" type="text/css" href="css/TaiChi.css"/>
	</head>
	<body>
		<div class="taichi">
			<div class="white"></div>
			<div class="black"></div>
		</div>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
html,body{
	box-sizing: border-box;
	width:100%;
	height: 100vh;
	justify-content: center;/*水平居中*/
	align-items: center;/*垂直居中*/
	display: flex;
}

.taichi{
	width:350px;
	height: 350px;
	border: 2px solid black;
	border-radius: 50%;
	background: linear-gradient(to top, black 50%, white 50%);/*将背景色设置成两个不同的颜色*/
	position: absolute;
	animation: go 2s linear infinite;/*盒子旋转*/
}
.taichi:hover{
	animation-play-state: paused;/*暂停动画*/
}
@keyframes go{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
.taichi>.white{
	width: 175px;
	height: 175px;
	border-radius: 50%;
	background: white;
	position: relative;
	top:25%;
	left: 0;
	float: left;
}
.taichi>.black{
	width: 175px;
	height: 175px;
	border-radius: 50%;
	background: black;
	position: relative;
	top:25%;
	left: 0;
	float: left;
}
.taichi>*:after{
	content: " ";
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	transform: translate(-50%);
	position: relative;
	top:50%;
	left: 50%;
}
.taichi>.white:after{
	background: black;
}
.taichi>.black:after{
	background: white;
}

 

吃素的黑猫
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css实现太极阴阳鱼动画
weixin_42686892的博客
01-12 486
昨天看到一个有意思的效果，闲来无事做一个： 把2d静态的太极图改成了3d，阴极和阳极分到了两个平面里实现旋转效果，这个好实现，重点是实现它的透明效果，平面太极图显示出两极是用另加的块元素挡住底面的颜色，但如果上图的两极用遮挡来实现效果的话并不能实现透明，将遮挡的块设为透明又会显示出底面原本的样子，所以这个思路不对。那就只能将底面本身变为透明，但怎么实现既透明又能出现这种样子呢？渐变，而且为了能出现圆的样子选择了径向渐变。 效果： 思路明确，开始操作 一个极分成四个块，圆...
CSS--动画（太极案例）
苛性钠的博客
10-19 158
过渡动画 transition: all n1s n2s steps(n3); 参数1 : 参与过渡动画的属性 all 表示所有的属性都参与过渡动画 参数2 : 过渡动画的持续时间 参数3 : 动画延迟的时间 参数4 : 动画的运动曲线 默认是缓动 linear 匀速(线性变化) steps() 分步 ！通过和伪类选择器的配合简单使用动画 动画剧本 @keyframes 动画名{ 动画过程 } 1.form{动画开始状态}…to{动画结束状态} 2.百分比动画 ！百分比代表动画时长的百分
纯css太极动画(源码)
x_xiNan9416的博客
09-26 294
<html> <head> <title>过渡</title> <meta charset="utf-8"/> <style type="text/css"> body{ margin:0; background-color:#ddd; } .taiji{ display:flex; align-items:center; height:400px; wi
利用CSS构造太极动画图网页
weixin_45723705的博客
03-24 330
利用CSS构造太极动画图网页 废话少说，直接上代码，然后再详细介绍构造过程。 代码 <!DOCTYPE html> <html> <head> <title>太极动画</title> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } body { background-color: #ccc; } .taiji { w
CSS动画实战：创建一个太极Loading图
王乐平 技术博客
08-01 4878
这里主要是使用CSS的animation和伪类来构建，分析设定关键帧的执行顺序和时间断。效果动画分析首先通过效果对动画执行进行一下分析： 边框的四条边进行按顺序动画加载 。 矩形边框变为圆行边框。 太极图内部图案渐渐出现。 太极图旋转。 整个动画逆序执行。 针对上面的1效果是需要思考一下的，其他都比较容易实现。5效果只需设置属性animation-direction: alternate即可，整体动
css3 太极动画,css
weixin_30821291的博客
08-03 79
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...
css 跳跃动画,CSS动画实例：跳跃的字符
weixin_28836507的博客
08-03 898
1．翻转的字符在页面中放置一个类名为container的层作为容器，在该层中放置5个字符区域，HTML代码描述如下：HELLO为container和span定义CSS样式规则，并定义实现5个字符翻转的动画关键帧。完整的HTML文件内容如下。字符翻转.container{margin: 0 auto;width: 500px;height: 300px;position: relative;over...
css3 太极动画,纯css实现太极阴阳鱼动画
weixin_42098830的博客
08-03 147
原标题：纯css实现太极阴阳鱼动画 今天看到一个有意思的效果，闲来无事做一个：把2d静态的太极图改成了3d，阴极和阳极分到了两个平面里实现旋转效果，这个好实现，重点是实现它的透明效果，平面太极图显示出两极是用另加的块元素挡住底面的颜色，但如果上图的两极用遮挡来实现效果的话并不能实现透明，将遮挡的块设为透明又会显示出底面原本的样子，所以这个思路不对。那就只能将底面本身变为透明，但怎么实现既透明又能出...
纯CSS3实现阴阳太极动画
11-24
纯CSS3实现阴阳太极动画
CSS3太极周易风水罗盘动画代码.zip
05-25
CSS3太极周易风水罗盘动画代码，纯CSS3代码。
css3 实现太极旋转
06-27
css3动画效果实现太极旋转效果，配合border实现，无图片
HTML和CSS制作太极
05-28
用HTML和CSS做了一个太极图，非常炫酷，主要用到了动画属性transform和animation，以及高级选择器伪元素等
CSS画卡通人物：皮卡丘
qq_44645934的博客
04-13 1890
皮卡丘 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pikachu</title> <link rel="stylesheet" href="css/Pikachu.css" /> </head> ...
CSS画卡通人物：哆啦A梦
qq_44645934的博客
04-12 1637
哆啦A梦 HTML代码块 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>哆啦A梦</title> <link rel="stylesheet" type="text/css" href="css/doraemon.css...
【web】制作计算器
qq_44645934的博客
10-06 1260
这是HTML结构` 计算器 ] **这是css样式**` 在这里插入代码片 ```*{ margin: 0; padding: 0; } #header{ margin:10px auto; margin-bottom: 0px; width: 498px; height:...
表情包——爱你哦
qq_44645934的博客
09-11 606
表情包——爱你哦 <!--定死视窗大小--> <meta name="viewport" content="width=750 ,user-scalable=no" /> 1.现将表情包划分为：头，身体，脚三个部分。 2.设计头部时用border边框样式，position定位，transform变换。 3.设计眼睛，爱心时用animation动画。 4.胡须，爱心，腰用到了before和after伪类。 5.脚用到了display：flex弹性盒子。 ...
web——德州扑克
最新发布
qq_44645934的博客
01-05 507
web——德州扑克
用javascript设计时钟
qq_44645934的博客
09-03 291
时钟 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>clock</title> <link rel="stylesheet" type="text/css" href="css/clock.css"/> <script type="text/javascript" src="js/clock.js"></
css动画
05-28
CSS动画是通过CSS属性的变化来实现动画效果的一种技术。可以使用CSS动画来实现各种效果，比如旋转、缩放、移动、渐变等等。以下是一个简单的CSS动画示例： ```css .box { width: 50px; height: 50px; background...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值