转动的八卦图纯css实现
这类的东西网上一搜就是大把的，看着比较空旷的博客，所以自己也来写一个。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#yin-yang{
position: absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
/*上面一段代码是垂直居中定位*/
width:192px;
height:96px;
background-color:white ;
border-color: black;
border-style: solid;
border-width: 2px 2px 98px 2px;
border-radius: 100%;
animation-name: turn; /*动画名称*/
animation-delay: 1s; /*动画延迟时间*/
animation-direction: normal; /*动画效果有反复交递等*/
animation-duration: 1s; /*动画执行时间*/
animation-timing-function: linear; /*动画执行方法此为匀速方法*/
animation-iteration-count: infinite; /*执行动画的次数此为无限次数*/
}
#yin-yang:before{
content:'';
position: absolute;
top:50%;
left:0;
width:24px;
height:24px;
background-color: white;
border:36px solid black;
border-radius: 100%;
}
#yin-yang:after{
content:'';
position: absolute;
top:50%;
right: 0;
width:24px;
height:24px;
background-color: black;
border:36px solid white;
border-radius: 100%;
}
@keyframes turn{
0{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
</style>
</head>
<body>
<div id="yin-yang"></div>
</body>
</html>
转动的八卦图纯css实现的更多相关文章
- 使用CSS达到阴阳八卦图等图形
CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- 用CSS伪类制作一个不断旋转的八卦图？
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- 用CSS实现阴阳八卦图等图形
CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- 纯CSS手动滑动轮播图（隐藏滚动条）
HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...
- css 纯css轮播图 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css实例——“旋转”太极八卦图
话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
随机推荐
- C++11 template parameter deduction
C++11 引入了右值引用的概念,由此在引出 an rvalue reference to a cv-unqualified template parameter. 在template functio ...
- sql 列集合
STUFF((SELECT ','+CAST( TYZ_Bh as varchar(10)) FROM #1 where 片区划分='江东' for xml path('')),1,1,'')
- 12.2.0.1 restart环境执行root.sh 报 CLSRSC-400 错误
问题描述: 在LINUX 7.5 的环境上安装12.2.0.1 Restart Grid环境,执行root.sh 报 CLSRSC-400 错误 错误如下: 解决办法: 1. 参考(文档ID 136 ...
- jQuery示例 | 分级菜单
<!DOCTYPE html> Title .header{ background-color: black; color: wheat; } .content{ min-height: ...
- linux(ubuntu-16.1) 下安装 odoo10 新版
1.虚拟机(VMware)中安装 ubuntu-16.1(网络适配器选择桥接模式). 安装成功后,运行 ubuntu 提示 "CPU已被客户机操作系统禁用" 时,需要修改配置文件解 ...
- js函数声明提升与变量提升
变量提升 变量提升: 在指定作用域里,从代码顺序上看是变量先使用后声明,但运行时变量的 “可访问性” 提升到当前作用域的顶部,其值为 undefined ,没有 “可用性”. alert(a); // ...
- (转)CentOS7 LVM添加硬盘及扩容
原文:http://blog.51cto.com/qicheng0211/1620171 9818人阅读 一.LVM简介 LVM是 Logical Volume Manager(逻辑卷管理)的简写 ...
- MySQL通过SQL语句来直接生成新表
1. 既复制表结构,也复制表数据 mysql> CREATE TABLE tmp_table SELECT * FROM dede_news; 说明:这种方法的缺点就是新表中没有了旧表的prim ...
- 九度oj 1001 A+B for Matrices 2011年浙江大学计算机及软件工程研究生机试真题
题目1001:A+B for Matrices 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:15235 解决:6172 题目描述: This time, you are supposed ...
- solr 索引库的维护
一.配置中文分析器:IK-analyzer,在FieldType中指定中文分析器:1 复制IK-analyzer到你的服务器指定目录中.2 在该目录中,我们需要的东西有:IKAnalyzer的jar包 ...