用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中某个标志符的目标元素(比如 ...
随机推荐
- display: table-cell; 自适应布局
#extras {display: table-cell;width: 180px;padding-left: 10px;border-right: 1px dotted #d7ad7b;} tabl ...
- easyui 网址
http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid23.html http://www.jeasyui.com http://fineui. ...
- Node.js之错误处理
Node.js之错误处理 1. 使用 domain 模块处理错误 try..catch 多用于捕捉同步方法中的抛出错误,但不能用try..catch捕捉异步方法中抛出de错误 如: 1 var htt ...
- uva 1587(Box UVA - 1587)
题目大意是给定6个数对,每个数对代表一个面的长和宽,判断这6个面是否能构成一个长方体. 这种题一看很复杂,但是只要不想多了实际上这就是一个水题... 首先说明一下判断的思路: 1.长方体是有三个对面的 ...
- Python3 编写登陆接口
题目选自 Alex Python自动化开发之路的题目,我是从C++转学Python的,编写的水平有限,轻喷. 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 首先应该有2个txt文件,包含用户 ...
- windows桌面远程工具连接Ubuntu
1.Ubuntu安装:sudo apt-get install xrdp sudo apt-get install vnc4server sudo apt-get install xubuntu ...
- 09springMVC对ajax的支持
u 最直接的Ajax处理 u 数据绑定@RequestBody/@ResponseBody u 使用@RequestBody/@ResponseBody来支持Ajax u 使用HttpEnti ...
- R语言 PCA
1.关键点 综述:主成分分析 因子分析 典型相关分析,三种方法的共同点主要是用来对数据降维处理的从数据中提取某些公共部分,然后对这些公共部分进行分析和处理. #主成分分析 是将多指标化为少数几个综合指 ...
- Spring MVC-控制器（Controller）-属性方法名称解析器（Properties Method Name Resolver ）示例（转载实践）
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_propertiesmethodnameresolver.htm 说明:示例基于S ...
- Oracle数据库点滴
分页查询: SELECT * FROM (SELECT A.*, ROWNUM RN FROM (SELECT * FROM TABLE_NAME) A WHERE ROWNUM <= 40)W ...