用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中某个标志符的目标元素(比如 ...
随机推荐
- hbase + phoenix 单机版安装
1. 环境: centos 6.5 jdk 1.8.0 http://www.oracle.com/te ...
- 洛谷——P2814 家谱
P2814 家谱 题目背景 现代的人对于本家族血统越来越感兴趣. 题目描述 给出充足的父子关系,请你编写程序找到某个人的最早的祖先. 输入输出格式 输入格式: 输入由多行组成,首先是一系列有关父子关系 ...
- Maximum Value(unique函数，lower_bound()函数，upper_bound()函数的使用)
传送门 在看大佬的代码时候遇到了unique函数以及二分查找的lower_bound和upper_bound函数,所以写这篇文章来记录以备复习. unique函数 在STL中unique函数是一个去重 ...
- uva-679 Dropping Balls UVA - 679
题目大意 总共有一个深度为D的满二叉树,I个小球,每个节点具有开关,小球经过节点后节点开关会有变化,初始都关闭,若关闭往左右否则往右走 只需要循环一下每层的情况即可 代码 #include <b ...
- hadoop balancer
一.balancer是当hdfs集群中一些datanodes的存储要写满了或者有空白的新节点加入集群时,用于均衡hdfs集群磁盘使用量的一个工具.这个工具作为一个应用部署在集群中,可以由集群管理员在一 ...
- 混合了RBAC和ACL的权限系统(一) -- 用户组织结构
最近的工作是一个基础设计,打造一个基于RBAC和ACL的权限基础组件. 这个基础组件的特点是:同时混合了RBAC和ACL的认证方式,也就是说同时提供系统级别的授权(RBAC)和对象级别的授权(ACL) ...
- noip模拟赛 时之终末
题目背景 圣乔治:不用拘泥,剩下的时间已不多…… 圣乔治:直呼我的真名—— 丝佩碧雅:圣乔治大人 圣乔治:如今,已无法维持结界,或是抑制深渊的前进 圣乔治:既然如此,我将献上这副身躯,期望最后的战斗 ...
- HDU - 1403 - Longest Common Substring
先上题目: Longest Common Substring Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- php ip伪装访问
打算做个采集,无记录下来备用 php的curl搞定ip伪装来采集内容.以前写过一段代码采集一个数据来处理.由于数据量过大,同一ip采集.经常被限制,或者列为黑名单. 写了段代码伪装ip,原理是,客 ...
- R语言 EFA（探索性因子分析）
EFA的目标是通过发掘隐藏在数据下的一组较少的.更为基本的无法观测的变量,来解释一组可观测变量的相关性.这些虚拟的.无法观测的变量称作因子.(每个因子被认为可解释多个观测变量间共有的方差,也叫作公共因 ...