转动的八卦图纯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那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
随机推荐
- Linux 包管理器
RPM: rpm(Red-Hat Package Manager) 为 Redhat 提出的包管理器, 用于在 Redhat 及其衍生版本中安装 rpm 格式的软件包 rpm 的优点: 1.简化了源码 ...
- 基础篇：4.1）规范化：3d工程图纸出图步骤详解
本章目的:按照工程图出图步骤,更方便出具规范的工程图. 1.工程出图步骤 这是作者个人归纳的步骤,供同行业工程师参考完善. 以solidworks为例,工程出图步骤如下:1.1)打开绘制的3d零件图, ...
- 【算法笔记】B1045 快速排序
1045 快速排序 (25 分) 著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一个元素作为主元,通过交换,把比主元小的元素放到它的左边,比主元大的元素放到它的右边. 给定划分后 ...
- flask开发笔记
目录 虚拟环境 Debug模式 配置文件 url传入参数 url反转 重定义向 模板 创建 jinjia2语法 模板继承 flash 加载静态文件 MySQL数据库命令 配置 更新.提交.删除 模型操 ...
- 分分钟钟学会Python - 数据类型（dict）
今日内容 字典(dict) 具体内容 1.字典含义 帮助用户去表示一个事物的信息(事物是有多个属性). 基本格式 data = {键:值,键:值,键:值,键:值,键:值,键:值,} # 练习题 use ...
- UGUI Slider的onValueChanged事件
在本文,你将学到如何将UGUI Slider的onValueChanged事件进行统一管理. using System; using UnityEngine; using UnityEngine.UI ...
- [目录]ASP.NET web api开发实战
第一章:Restful web service v.s. RPC style web service 第二章:ASP.NET web api v.s. WCF v.s. ASP.NET web ser ...
- Linux下jdk安装过程
注意:rpm 与软件相关命令 相当于 window 下的软件助手 管理软件 1 查看当前 Linux 系统是否已经安装 java 1)在命令窗口输入,可以查看系统自带的OpenJDK版本信息. jav ...
- c++ 常用的遍历，删除，分割等等文件处理函数代码实现
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9622851.html 删除文件目录函数: void myDeleteDirectory(CSt ...
- 改修jquery支持cmd规范的seajs
手动包装jquery1.10.2,firebug说$没有定义 define(function (require, exports, module) {//jquery源码module.exports= ...