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对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...
随机推荐
- Kubernets二进制安装(2)之Bind9安装
1.修改主机名 hostnamectl set-hostname mfyxw10 hostnamectl set-hostname mfyxw20 hostnamectl set-hostname m ...
- docker理论题-02
1.什么是namespace? 答:名称空间,作用隔离容器 2.namespace隔离有那些? 答:ipc:共享内存.消息队列 mnt:挂载点 net:网络栈 uts:域,主机名 user:用户,组 ...
- vagrant + virtualbox安装centos环境+docker安装
1. 下载vagrant 并安装,安装完成后,输入vagrant回车查看是否安装成功 2. 下载virtualbox.box并安装,安装完成后. 3. 创建虚拟机文件夹,例如.F:/vmimg/fir ...
- POJ 2923 Relocation（状压DP）题解
题意:有2辆车运货,每次同时出发,n(<10),各自装货容量c1 c2,问最少运几次运完. 思路:n比较小,打表打出所有能运的组合方式,用背包求出是否能一次运走.然后状压DP运的顺序. 代码: ...
- Hacker101 CTF-Micro-CMS v2
一.打开网站是这个样子 找到一个登录框,存在注入漏洞 3.我们可以这样更改用户名中的输入: admin' or 1=1 -- 4.错误消息显示Invalid Password,因此我们也应该尝试构造一 ...
- Linux Centos7发送QQ邮件
一.关闭本机的sendmail服务或者postfix服务 #sendmial service sendmail stop chkconfig sendmail off #postfix service ...
- how to auto open demo and create it in a new codesandbox
how to auto open demo and create it in a new codesandbox markdown & iframe https://ant.design/do ...
- JavaScript var, let, const difference All In One
JavaScript var, let, const difference All In One js var, let, const 区别 All In One 是否存在 hoisting var ...
- HTML5 drag & drop & H5 DnD
HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...
- node.js & Unbuntu Linux & nvm & npm
node.js & Unbuntu Linux & nvm & npm https://websiteforstudents.com/install-the-latest-no ...