转动的八卦图纯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那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
随机推荐
- elasticsearch kibana简单查询
kibana CRUD 操作页面 一.简单的CRUD操作 1.添加 PUT /index/type/id { "json数据" } 2.查询 GET /index/type/id ...
- c# Config配置文件读写
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...
- mybatis的CRUD实例(三)
前面的文章我们已经实现了根据id查询用户信息的功能,下面我们进行其他业务功能的实现. 一.根据用户名模糊查询用户列表 查询使用的sql : select * from user where usern ...
- Angular material mat-icon 资源参考_Av
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- Windows搭建Go语言环境·
对于Windows用户,Go语言提供两种安装方式(源码安装除外): .MSI安装:程序会自动配置你的安装 .ZIP安装:需要你手动设置一些环境变量 一.MSI安装 1.下载安装包(根据操作系统选择相应 ...
- 分分钟钟学会Python - 数据类型（int、bool、str）
第三天学习内容 今日内容 1.整型(int) 2.布尔类型(bool) 3.字符串(str) 内容详细 1.整型 Python中的整型用int表示. 1.python2中: 在32位机器上,整数的位数 ...
- UML-6.1-用例-示例
1.总览要点:用例.摘要.非正式.详述.测试用例.用例分析与迭代联系起来. 2.示例:Process Sale 1).客户携带所购商品到达收银台. 2).收银员使用pos系统记录每件商品. 操作契约: ...
- UML-5-进化式需求
1.需求管理定义 瀑布式式中,研发之前,完全定义和固化需求. 但,需求是不断变化的,你之前可能会有45%的需求,不会被使用到,经常使用到的只占20%左右. 因此,如何寻找这20%的需求,是重点.其方法 ...
- pip升级最新版本
1.如果是python2.7输入以下指令 python -m pip install --upgrade pip 2.如果是python 3.+输入以下指令 python3 -m pip instal ...
- 微服务~Consul服务注册与发现
服务发现是基于微服务架构的关键原则之一.尝试配置每个客户端或某种形式的约定可能非常困难,可以非常脆弱.Consul通过HTTP API和DNS提供服务发现服务.Spring Cloud Consul利 ...