用CSS伪类制作一个不断旋转的八卦图？
前言
介绍一下如何制作一个不断旋转的八卦图。快速预览代码及效果，点击：八卦图
代码如下：
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="yinyang"></div>
</body>
</html> CSS部分 body{
background: #;
}
@keyframes spin{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
#yinyang{
width: 100px;
height: 100px;
border-radius: %;
position: relative;
margin: 100px auto;
background: linear-gradient(to bottom,#ffff %,#ffff %,# %,# %);
animation-duration: 3s;
/*animation-duration属性指定一个动画周期的时长。默认值为0s，表示无动画。*/
animation-name: spin;
animation-iteration-count: infinite; /*infinite 无限循环播放动画.*/
/*animation-iteration-count CSS 属性 定义动画在结束前运行的次数 可以是1次 无限循环.*/
animation-timing-function:linear;
/*CSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。*/
}
#yinyang:before{
position: absolute;
width: 10px;
height: 10px;
content: "";
top: %;
left:;
border-radius: %;
border: 20px black solid;
background: white;
}
#yinyang:after{
position: absolute;
width: 10px;
height: 10px;
content: "";
top: %;
right:;
border-radius: %;
border: 20px white solid;
background: black;
}
用CSS伪类制作一个不断旋转的八卦图？的更多相关文章
- 用css伪类制作三角形的三种方法
在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) ...
- CSS-用伪类制作小箭头（轮播图的左右切换btn）
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- css伪类制作三角箭头
<meta charset="utf-8"> <style type="text/css"> .tip{ padding: 5px 10 ...
- CSS 伪类
Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...
- CSS伪类整理笔记
0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...
- CSS伪类before，after制作左右横线中间文字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 12、第十二节课，css伪类 （转）
一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）
原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...
随机推荐
- c3p0 连接池配置
C3P0 可使用properties 配置文件方式,将c3p0.properties放在classpath目录下,如果为WEB应用,放在WEB-INF\classes下 c3p0.properties ...
- ajax 禁用按钮防止重复提交
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 【js】数组置空的其他方式及使用场景
数组在js中属于引用型类型. var arr = [1, 2, 3]; a = []; 通常使用以上方式.如果使用场景必须使用方法置空, 可以采用arr.length = 0; 或者使用a.splic ...
- 总结这几天js的学习内容
对js中难点的理解 1.把变量对象像遍历数组一样简单 对于数组 ,迭代出来的是数组元素,对于对象 ,迭代出来的是对象的属性: var obj = { w: "wen", j: &q ...
- (C/C++学习)6.数组指针和指针数组
说明:int (*p)[4] 和 int *p[4](数组指针和指针数组),如果你是一个初学者,也许当你看到这两个名词的时候,已经懵了.其实,只要你理解了其中的含义.这两个名词对你来说会相当简单并且很 ...
- Problem 63
Problem 63 https://projecteuler.net/problem=63 Powerful digit counts The 5-digit number, 16807=75, i ...
- Flask-SQLAlchemy中解决1366报错
会报下面这个1366的错 安装MySQL驱动(我升级过Python,所以要再装一遍) 本想安装MySQL官方驱动mysql-connector-python的,然而官方目前只支持到3.4 我又懒,所以 ...
- pandas中选取某行为缺失值的数据，并返回
1.df.dropna() 可以返回去掉NaN的df结果集. 2.pandas中dataframe取差集: df=pd.DataFrame({"name":[1,2,3,np.Na ...
- CentOS 6.5下mysql的安装与配置
一.通过yum自动安装mysql yum install mysql-server my-client 二.初始化及相关配置 安装完mysql数据库以后,会发现会多出一个mysqld的服务,通过输入 ...
- 当前，我们的DJANGO项目的requirements.txt文件
晒一晒,看用得多不多..:) amqp==1.4.7 anyjson==0.3.3 billiard==3.3.0.21 celery==3.1.19 celery-with-redis==3.0 c ...