用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中某个标志符的目标元素(比如 ...
随机推荐
- copy.c实现
#cat copy.c #include <stdio.h> #include <stdlib.h> #include <string.h> int copyFil ...
- Laravel实用小功能
Laravel实用小功能 1.控制访问次数 laravel5.2的新特性,通过中间件设置throttle根据IP控制访问次数 原理:通过回传三个响应头X-RateLimit-Limit,X-RateL ...
- css进阶----盒子模型，Reset CSS，css浮动，css定位，z-index属性
盒子模型 把页面上的每一个元素当成一个盒子 由内容,内边距,边框,外边距组成 盒子模型举例 <!DOCTYPE html> <html lang="en"> ...
- MINSUB - Largest Submatrix
MINSUB - Largest Submatrix no tags You are given an matrix M (consisting of nonnegative integers) a ...
- javax ee常用类
1.public interface HttpServletRequest extends ServletRequest 都在package javax.servlet.http;包下 接口继承接口p ...
- Unity Update 具体解释
0x01:简单介绍 Unity的脚本继承了Monobehaviour类,在脚本中定义函数: void FixedUpdate(){} void Update(){} void LateUpdate() ...
- Java 递归、尾递归、非递归、栈 处理 三角数问题
import java.io.BufferedReader; import java.io.InputStreamReader; //1,3,6,10,15...n 三角数 /* * # 1 * ## ...
- HPU 1002 A + B Problem II【大数】
A + B Problem II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- NS3网络仿真（2）：first.py
1 安装基本模块 11 安装Python 12 安装PTVS 13 加入对python-279的支持 2 在vs2013下编译NS3 3 编译NetAnim 4 在vs2 ...
- 【第7篇】TypeScript泛型的案例代码具体解释
8.1最简单泛型样例 Ts代码 /** * 没有泛型,我们要么必须给身份功能的特定类型 */ function identity1(arg: number): number { return arg; ...