用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中某个标志符的目标元素(比如 ...
随机推荐
- Django - 路由对应关系
1.对url路由关系命名,以后可以根据此名称,生成自己想要的url urls.py中: url('^fdsaafdf(\d+)/',views.index,name='indexx') url('^f ...
- [C#] Linq 动态条件查询
应用背景:以货品为例,在基础数据中配置货品的判断规则,要根据这个规则筛选出符合条件的集合. 创建货品类 public class Product { public string Name { get; ...
- C++入职学习篇--代码规范（持续更新）
C++入职学习篇--代码规范(持续更新) 一.头文件规范 在头文件中大家一般会定义宏.引入库函数.声明.定义全局变量等,在设计时最后进行分类,代码示范(自己瞎琢磨的,请多多指点): #ifndef T ...
- C++字符串处理函数
#include<iostream> #include<stdlib.h> #include<string> #include <assert.h> u ...
- 24.通过ngram分词机制实现index-time搜索推荐
一.ngram和index-time搜索推荐原理 1.什么是ngram 假设有一个单词:quick,在5种长度下的ngram情况如下: ngram length=1,q u i c k ...
- JavaSE 学习笔记之StringBuilder（十六）
< java.lang >-- StringBuilder字符串缓冲区:★★★☆ JDK1.5出现StringBuiler:构造一个其中不带字符的字符串生成器,初始容量为 16 个字符.该 ...
- 几个有用的shell命令
1.!$ 是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样: $mkdir mydir$mv mydir yourdir$cd yourdir 可以改成: $mkdir my ...
- poj1330 lca 最近公共祖先问题学习笔记
首先推荐两个博客网址: http://dongxicheng.org/structure/lca-rmq/ http://scturtle.is-programmer.com/posts/30055. ...
- node.js 如何完美的从命令行接收参数所传递进来的值
https://segmentfault.com/q/1010000000367285
- nyoj 1238 最少换乘 (河南省第八届acm程序设计大赛)
题目1238 题目信息 执行结果 本题排行 pid=1238" style="text-decoration:none; color:rgb(55,119,188)"&g ...