非原创,使用html5做的旋转的太极图
2017-09-14 00:21
267 查看
<!DOCTYPE html>
<html>
<head>
<title>渐变太极图</title>
<meta charset="utf-8"><!--网页用的文字:UTF-8 万国码 -->
<meta name="keywords" content="">
<meta name="description" content="这是一个旋转的太极图,颜色有黑白两色"><!--网页传单:打广告的-->
<style>/*修饰某一区域或元素的宽,高,颜色,位置……*/
. { /*通配符选择器:选中所有元素*/
margin: 0px; /*清除浏览器默认的外边距*/
}
body {
background-color: #ccc;
}
.taichi { /*找到以class命名的叫做taichi的元素*/
/*修饰内容区*/
width: 400px; /*属性名称:属性值*/
height: 400px;
/*background-color:#6600ff;*//*给元素设置一种颜色*/
/*外边距:margin*/
margin: 100px auto 0px auto; /*外边距:上右下左*/
border-radius: 50%; /*圆角*/
background:linear-gradient(black 50%, white 30%);
display: flex; /*弹性盒模型*/
align-items: center;
animation: rotate 5s infinite linear;
}
.left {
width:50px;
height: 50px;
border: 75px solid #000; /*边框:宽度 样式 颜色*/
border-radius: 50%; /*圆角*/
background-color:#fff; /*白色*/
animation: change 1s infinite alternate linear; /*动画: 动画 名称 播多长时间*/
transform-origin: 0 50%;
/*animation: rotate 1s infinite alternate linear;*/
}
.right {
width:50px;
height: 50px;
border: 75px solid #fff; /*边框:宽度 样式 颜色*/
border-radius: 50%; /*圆角*/
background-color:#000; /*白色*/
animation: change 1s infinite alternate linear; /*动画: 动画 名称 播多长时间*/
animation-delay: -1s; /*提前一秒变化*/
transform-origin: 100% 50%;
/*animation: rotate 1s infinite alternate linear;*/
}
/*关键帧:名字 悟空传*/
@keyframes change {
from { /*变小*/
/*变化:大小*/
transform: scale(0.5); /*变成1/2*/
}
to {
transform: scale(1.5);
}
}
@keyframes rotate {
from {
/*变化:角度*/
transform:rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body><!--页面内容存放区-->
<div class="taichi">
<div class="left"></div>
<div class="right"></div>
</div><!--在页面
8000
中划分一个区域 class:取名字 有意义的英文-->
</body>
</html>
<html>
<head>
<title>渐变太极图</title>
<meta charset="utf-8"><!--网页用的文字:UTF-8 万国码 -->
<meta name="keywords" content="">
<meta name="description" content="这是一个旋转的太极图,颜色有黑白两色"><!--网页传单:打广告的-->
<style>/*修饰某一区域或元素的宽,高,颜色,位置……*/
. { /*通配符选择器:选中所有元素*/
margin: 0px; /*清除浏览器默认的外边距*/
}
body {
background-color: #ccc;
}
.taichi { /*找到以class命名的叫做taichi的元素*/
/*修饰内容区*/
width: 400px; /*属性名称:属性值*/
height: 400px;
/*background-color:#6600ff;*//*给元素设置一种颜色*/
/*外边距:margin*/
margin: 100px auto 0px auto; /*外边距:上右下左*/
border-radius: 50%; /*圆角*/
background:linear-gradient(black 50%, white 30%);
display: flex; /*弹性盒模型*/
align-items: center;
animation: rotate 5s infinite linear;
}
.left {
width:50px;
height: 50px;
border: 75px solid #000; /*边框:宽度 样式 颜色*/
border-radius: 50%; /*圆角*/
background-color:#fff; /*白色*/
animation: change 1s infinite alternate linear; /*动画: 动画 名称 播多长时间*/
transform-origin: 0 50%;
/*animation: rotate 1s infinite alternate linear;*/
}
.right {
width:50px;
height: 50px;
border: 75px solid #fff; /*边框:宽度 样式 颜色*/
border-radius: 50%; /*圆角*/
background-color:#000; /*白色*/
animation: change 1s infinite alternate linear; /*动画: 动画 名称 播多长时间*/
animation-delay: -1s; /*提前一秒变化*/
transform-origin: 100% 50%;
/*animation: rotate 1s infinite alternate linear;*/
}
/*关键帧:名字 悟空传*/
@keyframes change {
from { /*变小*/
/*变化:大小*/
transform: scale(0.5); /*变成1/2*/
}
to {
transform: scale(1.5);
}
}
@keyframes rotate {
from {
/*变化:角度*/
transform:rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body><!--页面内容存放区-->
<div class="taichi">
<div class="left"></div>
<div class="right"></div>
</div><!--在页面
8000
中划分一个区域 class:取名字 有意义的英文-->
</body>
</html>
相关文章推荐
- 使用Phaser和HTML5特性检测移动设备旋转重力方向
- 使用HTML5 Canvas绘制一个太极,并令其转动
- [HTML5-SVG]使用raphaeljs:代替css3实现qq空间关闭按钮旋转特效
- Html5 绘制旋转的太极图
- HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
- HTML5实现旋转的太极
- 使用HTML5 canvas 标签进行图片裁剪、旋转、缩放
- [HTML5-SVG]使用svg、CSS3、raphaeljs:模拟月球绕地球,地球绕太阳旋转
- 如何使用ChemDraw Pro旋转化学结构
- 您今天就可以使用HTML5
- 【Vegas原创】Winform中使用MaskedTextBox制作IP地址输入框
- 使用html5 postMessage和window.name实现多浏览器跨域
- HTML5 标签语法变化和使用概念
- 【IOS】使用手势对UIImageView进行缩放、旋转和移动
- 使用Java 2D绘制黑白太极图案
- [置顶] 基于HTML5 WebGL实现 json工控风机叶轮旋转
- [原创]使用 NodeJS, MarkdownJS, PrettifyJS 打造个人博客写作平台 - 打包下载
- html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
- html5格式化及使用