主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
css3设计伪元素实现太极阴阳图并旋转
2020-07-13
网页编程网
网页编程网
<style> body{margin:0;} .wrap{ position:relative; width:200px; height:100px; background-color:#fff; margin:50px auto; border-width:1px 1px 100px 1px; border-style: solid; border-radius: 50%; animation:rote 2s linear infinite;/*动画名，执行时间*/ } .wrap:before, .wrap:after{ content:''; position: absolute; top: 50%; width:20px; height:20px; border-radius:50%; } .wrap:before{ left: 0; background-color: #fff; border:40px solid #000; } .wrap:after{ right: 0; background-color: #000; border:40px solid #fff; } @keyframes rote{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .wrap:hover{ animation-play-state: paused; } </style> </head> <body> <div class="wrap"></div> </body>
阅读原文
阅读
3703
123
显示电脑版