主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
html5一个div实现太极特效
2021-01-25
网页编程网
网页编程网
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>只用一个div实现太极</title> </head> <body> <div class="box"></div> <style> .box{ position: relative; height:70px; width:140px; border-width:2px 2px 70px 2px;/*上右下左边框*/ border-style: solid; border-color: black; border-radius: 50%; animation:rote 10s linear infinite;/*动画名，执行时间*/ } .box::before{ content: ''; position: absolute; top:50%; width: 30px; height: 30px; background:black; border: 20px solid white; border-radius: 50%; } .box::after{ content: ''; position: absolute; top:50%; left: 50%; width: 30px; height: 30px; background:white; border: 20px solid black; border-radius: 50%; } @keyframes rote{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .box:hover{ animation-play-state: paused; } </style> </body> </html>
阅读原文
阅读
2822
123
显示电脑版