div+伪元素实现太极图
需求：使用div和伪元素实现阴阳太极图
图例：
代码：
<html>
<head>
<title>太极图</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
background-color: #ffffff;
border-style: solid;
border-color: #000;
border-bottom-width: 100px;
border-radius: 50%;
position: relative;
/*旋转动画*/
-webkit-animation: animal 4s infinite linear ;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
}
div::before{
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 40px solid #000000;
top: 50%;
left: 0;
border-radius: 50px;
background: #ffffff;
}
div::after{
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 40px solid #ffffff;
top: 50%;
right: 0;
border-radius: 50px;
background: #000000;
}
/*旋转动画*/
@-webkit-keyframes animal {
0%{
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<!-- 容器 -->
<div></div>
</body>
</html>
div+伪元素实现太极图的更多相关文章
- CSS伪元素before、after妙用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css---6伪元素选择器
after :在内容后边 <!DOCTYPE html> <html lang="en"> <head> & ...
- 基于CSS3伪元素和动画绘制旋转太极图
通过CSS3的动画知识来完成一个旋转的太极. 任务 1.创建一个div,用CSS控制其大小.边框.位置等,做成一个静态的圆形,一半为红色一半为白色. 2.用div的伪元素位置两个圆环并放置核实位置,使 ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...
- Effective前端4：尽可能地使用伪元素
伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅 ...
- 伪元素::after和::before
::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西).虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示, ...
- 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...
随机推荐
- Docker配置文件deamon.json详解
vim /etc/docker/daemon.json { "authorization-plugins": [], "data-root": "&q ...
- spring再学习之AOP实操
一.spring导包 2.目标对象 public class UserServiceImpl implements UserService { @Override public void save() ...
- Leetcode（215）-数组中的第K个最大元素
在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2 输出: 5 ...
- C++程序代码优化的方法
1.选择合适的算法和数据结构 选择一种合适的数据结构很重要,如果在一堆随机存放的数中使用了大量的插入和删除指令,那使用链表要快得多.数组与指针语句具有十分密切的关系,一般来说,指针比较灵活简洁,而数组 ...
- codeforces 11B Jumping Jack
Jack is working on his jumping skills recently. Currently he's located at point zero of the number l ...
- Bootstrap巨幕
这是一个轻量.灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容. jumbotron修饰 <div class="jumbotron"> <h1> ...
- mimikatz+procdump 提取 Windows 明文密码
0x00 原理 获取到内存文件 lsass.exe 进程 (它用于本地安全和登陆策略) 中存储的明文登录密码. 0x01 操作 Windows10/2012 以下的版本:1.上传 procdump 执 ...
- 记一次 Billu_b0x渗透
目录: 0x01 寻找ip 1.这边我们是使用的nmap来寻找我们的靶机IP地址,开始Ip是1,结束是254,153是我kali的ip,所以158就是我们的靶机的ip地址了. 2. 查看端口服务 这边 ...
- PyCharm 中文 字符 python 报错 的 完美 解决方案！
PyCharm 中文 字符 python 报错 的 完美 解决方案! #_*_ coding:utf-8_*_ https://www.python.org/dev/peps/pep-0263/ 到p ...
- how to create react custom hooks with arguments
how to create react custom hooks with arguments React Hooks & Custom Hooks // reusable custom ho ...