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;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...
随机推荐
- js的动态表格的增删改查完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 洛谷P5364 [SNOI2017]礼物 题解
传送门 /* 热情好客的小猴子请森林中的朋友们吃饭,他的朋友被编号为 1∼N,每个到来的朋友都会带给他一些礼物:大香蕉.其中,第一个朋友会带给他 11 个大香蕉,之后,每一个朋友到来以后,都会带给他之 ...
- C# -- Quartz.Net入门案例
1. 入门案例 using Quartz;using Quartz.Impl; public class PrintTime : IJob { public Task Execute(IJobExec ...
- python网络编程：UDP方式传输数据
UDP --- 用户数据报协议(User Datagram Protocol),是一个无连接的简单的面向数据报的运输层协议. UDP不提供可靠性,它只是把应用程序传给IP层的数据报发送出去,但是并不能 ...
- 如何利用随机数产生验证码（java基础知识）
以前我们通用的验证码都是五个不同的大小写字母,那么今天我就带大家学习一下利用Java基础怎么生成验证码.首先我们应该有一个清晰的思路:首先定义一个固定长度的数组用来存储需要生成的字母:其次生成随机数, ...
- MySql报错(持续更新)
目录 MySql报错 1. 重复键报错1062- duplicate entry '0' for key 'xxx' 1.1 报错场景 1.2 报错原因 1.3 解决方法 1.4 具体举例 2. VS ...
- uml统一建模语言学习笔记(一)
UML是一种统一建模语言,他是以面向对象的方式来实现对任何的系统进行描述的一种语言, 它包括9种图形+包图,分为静态和动态两种,也就是结构图和行为图 “静态”图有:用例图.类图.对象图.部署图.构件图 ...
- 43.QT-访问远程SQLite数据库
在上章42.QT-QSqlQuery类操作SQLite数据库(创建.查询.删除.修改)详解学习了如何操作SQLite,本章来学习如何访问远程SQLite 1.首先设置共享,映射(用来实现远程访问) 将 ...
- Linux基础命令---ntpstat显示时间服务器同步
ntpstat ntpstat指令用于显示本机上一次和服务器同步时间的情况. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora. 1.语法 ntpstat 2 ...
- 实训第六天（mybatis）
今天实训第六天,我们学习了mybatis这个数据库框架,虽然说框架的环境搭建非常的繁琐,但是在了解原理和流程之后是非常的舒服的.因为有一个强大的工具被我掌握了,所以今天感觉非常的开心. 首先我们是在s ...