转动的八卦图纯css实现
这类的东西网上一搜就是大把的，看着比较空旷的博客，所以自己也来写一个。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#yin-yang{
position: absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
/*上面一段代码是垂直居中定位*/
width:192px;
height:96px;
background-color:white ;
border-color: black;
border-style: solid;
border-width: 2px 2px 98px 2px;
border-radius: 100%;
animation-name: turn; /*动画名称*/
animation-delay: 1s; /*动画延迟时间*/
animation-direction: normal; /*动画效果有反复交递等*/
animation-duration: 1s; /*动画执行时间*/
animation-timing-function: linear; /*动画执行方法此为匀速方法*/
animation-iteration-count: infinite; /*执行动画的次数此为无限次数*/
}
#yin-yang:before{
content:'';
position: absolute;
top:50%;
left:0;
width:24px;
height:24px;
background-color: white;
border:36px solid black;
border-radius: 100%;
}
#yin-yang:after{
content:'';
position: absolute;
top:50%;
right: 0;
width:24px;
height:24px;
background-color: black;
border:36px solid white;
border-radius: 100%;
}
@keyframes turn{
0{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
</style>
</head>
<body>
<div id="yin-yang"></div>
</body>
</html>
转动的八卦图纯css实现的更多相关文章
- 使用CSS达到阴阳八卦图等图形
CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- 用CSS伪类制作一个不断旋转的八卦图？
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- 用CSS实现阴阳八卦图等图形
CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- 纯CSS手动滑动轮播图（隐藏滚动条）
HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...
- css 纯css轮播图 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css实例——“旋转”太极八卦图
话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
随机推荐
- 程序设计中的dry原则
DRY:dont repeat yourself 假设一个逻辑(代码块)会重复两次或者以上,应该写成函数被调用 为什么呢,实际上,我们处处可见重复性的代码.这除了增加工作量之外,还会增加维护难度. d ...
- 51 Nod 1042 数位dp
1042 数字0-9的数量 1 秒 131,072 KB 10 分 2 级题 给出一段区间a-b,统计这个区间内0-9出现的次数. 比如 10-19,1出现11次(10,11,12,13,14,1 ...
- 基础篇：6.7）形位公差-检测方法Measurement
本章目的:了解行为公差的检测方法,简单评估公司和制作方的检测能力. 1.形位公差检测规定 形状和位置公差检测规定GB/T 1958 -2004 2.形位公差的种类 3.形位公差的测量仪器 人工测量仪器 ...
- 数组和arguments
Arguments(Array-Like Objects) arguments对象是所有(非箭头)函数中都可用的局部变量 拥有四个属性(按照规范来说只有三个了----caller) arguments ...
- 'node' 不是内部或外部命令，也不是可运行的程序或批处理文件
状况:安装完nodejs之后,命令行输入node -v, 提示 'node' 不是内部或外部命令,也不是可运行的程序或批处理文件原因:检查环境变量没有配置正确配置环境变量: windows系统里, 需 ...
- 云计算、大数据和 AI
我今天要讲这三个话题,一个是云计算,一个大数据,一个人工智能,我为什么要讲这三个东西呢?因为这三个东西现在非常非常的火,它们之间好像互相有关系,一般谈云计算的时候也会提到大数据,谈人工智能的时候也会提 ...
- maxscript批量设置摄像机并保存渲染图
代码可直接运行 fn renderr = ( a=box() --新建一个立方体 ambientcolor = (color ) --设置环境光(搞不太懂,白的不出错就行) to do ( dis = ...
- vue 路由更新页面视图未更新问题
最近项目做面包屑的时候遇到一个问题就是路由变化的时候页面视图并没有发生变化,后来上网查,发现是vue-router的特性导致的. vue-router的切换不同于传统的页面的切换.路由之间的切换,其实 ...
- selenium 多窗口(windows)及ITargetLocator使用总结
1. selenium能实现窗口切换的原理 2. 常见命令 2.1 WindowHandle 2.2 WindowHandles 2.3 SwitchTo 3. 使用JavaScript新建窗口 4. ...
- hibernate抓取问题
当使用xml配置类之间的关系时 ,例如 学生 班级,多对一关系 /** * 默认情况会发出2条SQL语句,一条取student,一条取Classroom,其实这只需要一条sql ...