html5+css3画太极并添加动画效果
可兼容移动端视图
效果图如下：太极图是可以旋转的
具体实现如下：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>八卦</title>
<style>
body{
background: #eee;
}
* {
box-sizing: border-box;
padding: 0%;
margin:0%;
}
@keyframes x{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
} #bagua {
width: 400px;
height: 400px;
/* border: 1px solid red; */
border-radius: 300px;
position: relative;
overflow: hidden;
animation: x 5s infinite linear;
box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.75);
}
@media (max-width: 500px){
#bagua {
width: 200px;
height: 200px;
/* border: 1px solid red; */
border-radius: 300px;
position: relative;
overflow: hidden;
animation: x 5s infinite linear;
box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.75);
}
} #bagua>div:first-child {
/* border: 10px solid green; */
width: 50%;
height: 100%;
position: absolute;
left: 0;
background: black;
} #bagua>div:nth-child(2) {
/* border: 10px solid blue; */
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: white;
}
#bagua>div:nth-child(3){
/* border: 10px solid yellow; */
position: absolute;
width: 50%;
height: 50%;
left:50%;
margin-left: -25%;
background: black;
border-radius: 50%;
}
#bagua>div:nth-child(4){
/* border: 10px solid red; */
position: absolute;
width: 50%;
height: 50%;
left:50%;
bottom: 0;
margin-left: -25%;
background: white;
border-radius: 50%;
}
#bagua>div:nth-child(5){
/* border: 10px solid red; */
position: absolute;
width: 12.5%;
height: 12.5%;
left:50%;
top:18.5%;
margin-left: -6.25%;
background: white;
border-radius: 50%;
}
#bagua>div:nth-child(6){
/* border: 10px solid red; */
position: absolute;
width: 12.5%;
height: 12.5%;
left:50%;
bottom: 18.5%;
margin-left: -6.25%;
background: black;
border-radius: 50%;
}
#bagua_wrapper{
/* border: 1px solid red; */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#bagua_description{
margin-top: 1em; }
a{
text-decoration: none;
}
</style>
</head> <body>
<div id="bagua_wrapper">
<div id="bagua">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="bagua_description">
<a href="face.html">道可道，非常道</a>
</div> </div>
</body> </html>
html5+css3画太极并添加动画效果的更多相关文章
- html5+css3第一屏滚屏动画效果
详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...
- 推荐9款使用CSS3实现的超酷动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
- 实用CSS3的transform实现多种动画效果
查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...
- css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)
源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
- Java 给PPT添加动画效果（预设动画/自定义动画）
PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
- 分享9款用HTML5/CSS3制作的动物人物动画
1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...
- css3中的过渡效果和动画效果
一.CSS3 过渡 (一).CSS3过渡简介 CSS3过渡是元素从一种样式逐渐改变为另一种的效果. 实现过渡效果的两个要件: 规定把效果添加到哪个 CSS 属性上 规定效果的时长 定义动画的规则 过渡 ...
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...
随机推荐
- springcloud Config 入门，带视频
疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...
- 关于css布局的记录(一) --table和flex布局
1.table方式布局 效果图: 直接用table等标签布局,table布局自动垂直居中 亦可用 display:table == <table>.display:table-cell = ...
- 牛客集训 湖南省赛E题 Grid 动态开点线段树
国庆牛客集训的题,正好准备好好训练线段树,想起来就补一下. 题意很简单,两种操作行合并或者列合并,每个操作后计算有多少个子块. 这题应该先推导公式,行操作或者列操作只有一种的时候,很简单,总数就是n* ...
- Graylog 笔记
安装 基本上有3种方式,1 yum安装2 rpm安装3 docker安装 yum安装 yum安装,参照官方文档是最好的:http://docs.graylog.org/en/3.0/pages/ins ...
- Python小技巧：打印出来的文本文档中间有空格
问题描述: 在file.txt中存了内容如下 AAAAAA BBBBBB CCCCCC 然后采用python显示,发现显示出来的是这样的 A A A A A A B B B B B B C C C C ...
- python3装饰器用法示例
装饰器在编写后台的逻辑时有可能会用到,比方说一个场景:公司的员工想要登录自己公司的考勤记录系统去修改自己的考勤,以前是随便谁都有权限去修改,这样老板不同意了,现在,要在你登录前加一个权限验证的逻辑,如 ...
- 用python重新定义【2019十大网络流行语】
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:朱小五 PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...
- C# ling to sql 取多条记录最大时间
var _setList = (from f in _postgreDbContext.settlements group f by ( new { f.settlement_code })into ...
- C#本地文件下载以及FTP文件服务下载（以Pdf文件为例）
一.C#实现本地文件下载 1.文件下载的路径 文件名称 以及文件下载之后要放的位置 这三个变量是必须要的 2.定义以下四个对象: FileWebRequest ftpWebRequest = nu ...
- Geodesic 什么是“测地线的”？
确定是使用上椭球体(测地线)还是平地上(平面)的最短路径.强烈建议将 Geodesic 方法用于在不适合进行距离测量的坐标系(例如 Web 墨卡托或任何地理坐标系)中存储的数据,以及任何地理区域跨度较 ...