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;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...
随机推荐
- ElasticSearch 安装, 带视频
疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 疯狂创客圈 高并 ...
- 【STM32-V5】STM32F407开发板开源, 丰富软件资源, 强劲硬件配置, 配套500实例, 10套手册带视频教程2019-12-12
淘宝购买地址:购买地址链接 从2013年5月份发布至今,开发板硬件更新过6个版本,软件资料更新过85次.当前标准库最新版本V8.8,HAL库最新版本V1.1 安富莱微信公共平台,欢迎大家关注(打造高质 ...
- 让终端更好看--Ubuntu OhMyZsh配置指南
查看shell列表 cat /etc/shells 如果发现没有zsh就安装 安装zsh sudo apt install zsh 设置默认shell chsh -s $(which zsh) 重启主 ...
- TortoiseGit 保存账号密码
TortoiseGit下载网址:http://download.tortoisegit.org/tgit/ 修改.gitconfig .gitconfig 用于记录git配置信息 路径:系统盘:\Us ...
- Flask 教程 第十四章：Ajax
本文翻译自The Flask Mega-Tutorial Part XIV: Ajax 这是Flask Mega-Tutorial系列的第十四部分,我将使用Microsoft翻译服务和少许JavaSc ...
- JS基础语法---Array对象的方法
Array对象的方法 Array.isArray(对象)---->判断这个对象是不是数组 instanceof关键字 判断对象是不是数组类型:两种方法: //1 instanceof var ...
- ABAP分享五 ALV修改单元格并将修改数据更新到数据表中示例1
*下面的代码是在alv字段中修改字段的内容,点击保存后就可以保存数据至数据表. TABLES: spfli. DATA: wa_fieldcat TYPE lvc_s_fcat , " 相 ...
- C lang: Compound literal
Xx_Introduction C99 stantard. Upate array and struct a compound literal. Literal is date type value. ...
- webpack css模块化和ant-design按需加载冲突
其实具体出现了什么问题,我也记得不清楚了,今天突然回想起来必须记录一下,一个思想就是用exclude将node_module目录下的文件排除,网上有很多相关例子,但不知是不是因为时间久远,都不生效,无 ...
- @supports特性查询
特性查询也就是@supports规则,这个属性是作为CSS2.0扩展被引入的,是检测浏览器是否支持css属性值,是由逻辑与,逻辑或和逻辑非组合而成.主要的目的就是为了作者能够在不同的浏览器上根据不同的 ...