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;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...
随机推荐
- jQuery实现回车触发登录按钮的功能
jQuery实现回车触发登录按钮的功能,代码如下: $('body').keyup(function(e){ if(e.keyCode===13){ $('.login').click() } }) ...
- spinand之data buffer
data buffer简介 spinand一般会有一个内置的data buffer. 以W25N01GV为例,一个page是2048bytes外加64bytes的spare数据,其data buffe ...
- CSS 利用 `padding-bottom` 实现固定比例的容器
复用 padding-bottom 可实现一块区域在窗口尺寸变化使始终保持自适应.对于响应式布局中的图片或视频来说比较有用. <div style="width: 100%; posi ...
- C# -- 优先获取电脑C盘之外的磁盘来保存数据
C# -- 优先获取电脑C盘之外的磁盘来保存数据 1. 优先获取电脑C盘之外的磁盘来保存数据.没有其他盘则使用C盘. public string GetSaveDataDiskPath() { str ...
- Ubuntu 创建 Pycharm 桌面快捷方式
1. 安装 Pycharm,我的运行目录是: /opt/pycharm-/bin 2. 在 /usr/share/applications/ 下创建文件 pycharm.desktop [Deskto ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- 在服务器的tomcat中部署手机apk项目，浏览器或手机下载不能根据URL下载和安装apk文件
Android的APK包不能下载或安装,需在tomcat的web.xml加入 <mime-mapping> <extension>apk</extensio ...
- ETCD:系统限制
原文地址:System limits 请求大小限制 etcd被设计用来处理小键值对典型的如元数据.较大的请求数据也起作用,但可能会增加其他请求的延迟.默认情况下,任意的请求最大的空间为1.5MiB,这 ...
- 某小公司RESTful、共用接口、前后端分离、接口约定的实践
作者:邵磊 juejin.im/post/59eafab36fb9a045076eccc3 前言 随着互联网高速发展,公司对项目开发周期不断缩短,我们面对各种需求,使用原有对接方式,各端已经很难快速应 ...
- SpringCloud的入门学习之概念理解、Eureka服务注册与发现入门
1.微服务与微服务架构.微服务概念如下所示: 答:微服务强调的是服务的大小,它关注的是某一个点,是具体解决某一个问题.提供落地对应服务的一个服务应用,狭意的看,可以看作Eclipse里面的一个个微服务 ...