效果如如下:
当然你也可以将颜色换成其他的颜色,代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>原生箭耙图</title><style type="text/css">*{margin: 0;padding: 0;}.centent1{width: 10px;height: 10px;background-color: red;border-radius: 50%;} .centent2{padding: 10px;background-color: white;border-radius: 50%;} .centent3{width: 30px;height: 30px;padding: 10px;background-color: red;border-radius: 50%;}.centent4{width: 50px;height: 50px;padding: 10px;background-color: white;border-radius: 50%;}.centent5{width: 70px;height: 70px;padding: 10px;background-color: red;border-radius: 50%;}.centent6{width: 90px;height: 90px;padding: 10px;background-color: white;border-radius: 50%;}.centent7{width: 110px;height: 110px;padding: 10px;background-color: red;border-radius: 50%;}.centent8{position: fixed;top:50%;left: 50%;margin-left: -65px;margin-top: -65px;border-radius: 50%;}</style>
</head>
<body><div class="centent8"><div class="centent7"><div class="centent6"><div class="centent5"><div class="centent4"><div class="centent3"><div class="centent2"><div class="centent1"> </div> </div></div></div></div></div></div></div>
</body>
</html>
本文发布于:2024-02-02 22:24:21,感谢您对本站的认可!
本文链接:https://www.4u4v.net/it/170688386146833.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |