旋转的太极

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>css3八卦</title>
	<style>
	body{background-color: lightgray;}
	@-webkit-keyframes yidong{
	100%{transform: translate(200px) rotate(720deg)}
	}
	#bagua{
	width: 200px;
	height: 100px;
	background-color: #fff;
	border-bottom: 100px solid #000;
	border-radius: 50%;
	position: relative;

	-webkit-animation: yidong 10s ease 0.1s forwards;
	}
	#bagua:before{
	content: "";
	width: 36px;
	height: 36px;
	border: 32px solid #000;
	background-color: #fff;
	position: absolute;
	top: 50px;
	border-radius: 50%;
	}
	#bagua:after{
	content: "";
	width: 36px;
	height: 36px;
	border: 32px solid #fff;
	background-color: #000;
	position: absolute;
	top: 50px;
	left: 100px;
	border-radius: 50%;
	}



	</style>
	</head>
	<body>
	<div id="bagua"></div>
	</body>
	</html>

时间： 2024-10-09 16:55:35

旋转的太极的相关文章

使用CSS3生成一个会旋转的太极八卦图

学习了CSS3 后,可以做出很多炫酷的效果,但是基本功需要打扎实,就从学习使用纯CSS技术生成太极八卦图学起. 第一步,先使用HTML进行一下简单的布局,如下,只需要一个DIV即可: <body> <div></div> </body> 第二步,插入了DIV之后, 就需要为其添加样式,以及设置其为圆形,我们宽要设置的是高的2倍,这样在为底边框添加了宽度后,保证DIV出来后是圆形,如下: div { width:500px; height:250px; bor

CSS3绘制旋转的太极图案

1.效果布局主要用了用了3个DIV,配合:before.:after利用css3中的圆角(border-radius).阴影(box-shadow)完成. 2.动画效果CSS3中的@keyframes.animation <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3绘制旋转的太极图案</title> <style> bo

超厉害的旋转的太极源码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 420px; height: 420px; /*background-color: gray;*/ margin: 0 auto; position: relative; }

八卦旋转

<!doctype html><html><head><meta charset="utf-8"><title>CSS3旋转的太极</title><style>.taiji { margin:50px auto 0; height:200px; width:200px; animation:run-inner 2s infinite linear;}@keyframes run-inner { 0% {

CSS3 实现太极图案

CSS3实现太极图案分析图片组成(如下图所示): 先给出html代码: <div class="box"> <div class="content"> <div class="left"></div> <div class="right"></div> <div class="inner-circle up"> <d

太极旋转-JS实现

刚学了js的一些函数,所以做了一个太极的旋转.做完之后是上面这个样子的,是可以旋转的. 思路: 1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动. 2.画两个半圆,主要属性是border-top-right-radius: 250px; 像素值为长边的一半. 3.然后画4个圆,以基准转盘为父元素,按照下面黑色圆一样的思路再画另外一边白色的圆,最后再在两个中等的圆上画两个小圆. 4.设置定时器: //旋转角度 var deg = 0 //设置定时器,100毫秒动一次 var tid = s

旋转太极八卦

太极八卦图,以同圆内的圆心为界,画出相等的两个阴阳鱼表示万物相互关系.阴鱼用黑色,阳鱼用白色,这是白天与黑夜的表示法.阳鱼的头部有个阴眼,阴鱼的头部有个阳眼,表示万物都在相互转化,互相渗透,阴中有阳,阳中有阴,阴阳相合,相生相克,即现代哲学中和矛盾对立统一规律表示法. 哈哈,装了个逼.其实我就是想教大家用css3画出旋转太极八卦.仅此而已. 实现效果如下图: Html的代码很简单,就一行代码,如下图: 下面对div.tl标签进行一系列属性设置,变化如下图: ............ ......

HTML 5：绘制旋转的太极图

HTML: <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>Canvas绘制旋转太极</title> </head> <body> <canvas id="face" width="200" height="200"></canvas> <

【汤鸿鑫 3D太极】学习规划

基本功篇.套路篇.实战搏击篇 5年规划:中小学3年,高中2年. 1.中小学阶段-可自学 (1)基本功篇包括武术在内的任何运动,都离不开关节的运动.人体运动大关节分为三段九节,手上一段三节:肩.肘.腕:脚上一段三节:髋.膝.踝:身上(躯干)一段三节:腰.胸.颈.如何练好这九个大关节是任何运动的基础,也就是平常人们所说的基本功. 00-A<起功方法与预备势要领-锻炼之前形体.呼吸与意念的调整> 主要内容:锻炼太极拳之前要有个准备活动,包括三个部分:形体调整.呼吸调整和意念调整. 00-B<