如何用css实现太极图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>太极图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #ddd;
}
.boxs{
display: flex;
align-items: center;
width: 200px;
height: 200px;
margin: 100px auto;
/* 从上往下各占50%由黑变白的一个过程! */
background: linear-gradient(#000 50%,#fff 50%);
border-radius: 50%
}
/* 接下来用css3伪对象选择符创建内部的两个小圆形，由于<i>标签是弹性布局，
并且设置了align-items:center属性，所以创建的内部元素垂直居中： */
.boxs::before,.boxs::after{
content:"";
display: block;
width: 50%;
height: 50%;
border-radius: 50%;
background: rgb(11, 189, 165);
}
.boxs::before{
background:radial-gradient(#fff 25%, #000 25%);
transform-origin: 0% 50%;
animation-name: move;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.boxs::after{
background:radial-gradient(#000 25%, #fff 25%);
transform-origin: 100% 50%;
animation-name: move;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: -1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* 使用关键帧(@keyframes)和动画属性animation：
创建动画，从原始大小0.7倍变化到1.3倍： */
@keyframes move{
from{
transform: scale(0.7);
}
to{
transform:scale(1.3);
}
}
</style>
</head>
<body>
<i class="boxs"></i>
</body>
</html>
如何用css实现太极图的更多相关文章
- 如何用CSS实现在新窗口打开链接？
*如何用CSS实现在新窗口打开链接? <style type="text/css"> <!-- .target2 a:active {test:expressio ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 一张png图片 上面有多个图标，如何用CSS准确的知道其中某个图片的坐标
一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图 可以使用 background background:url(images/xx.png) 40px 10px n ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 如何用css实现一个三角形？
昨天被人问到说如何用css实现一个三角形?em.... 当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:
- css重修之书（一）：如何用css制作比1px更细的边框
如何用css制作比1px更细的边框 在项目的开发过程中,我们常常会使用到border:1px solid xxx,来对元素添加边框: 可是1px的border看起来还是粗了一些粗,不美观,那么有什么方 ...
- 如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- Div+Css画太极图源代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>D ...
随机推荐
- JS基础-正则
正则表达式 创建正则表达式 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 调用RegExp对象的构造函数 const regex = ne ...
- 【NPM】使用学习
[NPM]使用学习 转载: 目录 ============================================== 1.修改 npm 模块的安装路径 2.淘宝 NPM 镜像 3.vue-c ...
- 【JPA】映射
[JPA]映射 转载:https://www.cnblogs.com/yangchongxing/p/10120447.html 1.@Entity注解指定实体类 2.@Id注解指定实体主键 3.@T ...
- ueEditor第一次赋值失败
var ue=null; //在初始化富文本的地方 if (ue == null) { ue = new baidu.editor.ui.Editor(); ue.render('inspection ...
- django查询中模糊的知识点，filter(blog=blog)，filter(username=username).first()--这两者只需一招让你分清QuerySet对象，和用户字典对象
只需一招让你分清QuerySet对象,和用户字典对象 article_list = models.Article.objects.filter(blog=blog) user_obj = models ...
- 【玩转SpringBoot】翻身做主人，一统web服务器
寄人篱下的日子 一直以来受传统影响,我们的web工程总是打成war包,然后放入tomcat的webapps目录下面. 如下图01: 当tomcat启动时,会去解压war包,然后运行web工程.这大家都 ...
- Rancher 2.3实现K8S一键式升级！再也不用同步升级Rancher啦！
在Rancher 2.3之前,Rancher的新版本总是随着Kubernetes的新版本一起发布,如果你想要使用最新版本的Kubernetes,那么你需要先升级Rancher才能使用.Rancher ...
- MySql数据库之连接查询
在MySql数据库中连接查询分为以下几种方式: 1.内连接查询 内连接查询通过关键字 inner join 关键字来实现,通过代码实现: select * from 表1 inner join 表2 ...
- wx-icon和progress
基本内容 index.wxml <!--index.wxml--> <view class="container"> <!--icon text pr ...
- centos7安装python3.7.4
yum install gcc make zlib zlib-devel openssl openssl-devel libffi-devel bzip2-devel ncurses-devel g ...