CSS画圆以及CSS实现动态圆

CSS画圆以及CSS实现动态圆

  • 1. 先看基础（静态圆）
    • 1.1 效果如下：
    • 1.2 代码如下：
  • 2. 动态圆
    • 2.1 一个动态圆
      • 2.1.1 让圆渐变
      • 2.1.2 圆渐变8秒后消失
      • 2.1.3 转动的圆（单个圆）
    • 2.2 多个动态圆

1. 先看基础（静态圆）

1.1 效果如下：

  • 如下：
    在这里插入图片描述

1.2 代码如下：

  • 如下：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 正方形 */.xmbook_red_point_1 {width: 50px;height: 50px;display: inline-block;background-color: red;}/* 圆角正方形 */.xmbook_red_point_2 {width: 50px;height: 50px;display: inline-block;background-color: red;border-radius: 20%;}/* 实心圆 */.xmbook_red_point_3 {width: 50px;height: 50px;/* position: relative; *//* bottom: 2px; *//* left: 4px; */display: inline-block;/* background: url(/zh_CN/htmledition/images/icon_xmbook_red_point513f4c.png); */background-color: red;border-radius: 50%;}/* 空心圆 */.xmbook_red_point_4 {width: 50px;height: 50px;display: inline-block;/* background-color: red; */border-radius: 50%;border: 2px solid;border-color: red;}/* 圈中带字 */.xmbook_red_point_5 {width: 50px;height: 50px;display: inline-block;/* background-color: red; */border-radius: 50%;border: 2px solid;border-color: red;/* 设置圈中字体大小等 */font: 14px Arial, sans-serif;/* 下面是调整圈中字体位置的 */display: flex;justify-content: center;align-items: center;/* text-align: center; */}</style>
</head>
<body><div class="xmbook_red_point_1"></div><div class="xmbook_red_point_2"></div><div><i class="xmbook_red_point_3"></i></div><div><i class="xmbook_red_point_4"></i></div><!-- 圈中带字 --><div><i class="xmbook_red_point_5">10</i></div><div class="xmbook_red_point_5">12</div></body>
</html>

2. 动态圆

2.1 一个动态圆

2.1.1 让圆渐变

  • 效果如下：
    在这里插入图片描述

  • 实现代码如下：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 空心圆 */.xmbook_red_point_4 {width: 100px;height: 100px;/* display: inline-block; *//* background-color: red; */border-radius: 50%;/* border: 2px solid; *//* border-color: red; */position: absolute;top: 150px;left: 150px;/* identifier 3s 控制动的频率 linear infinite 让动画不断渐变不要停transform-origin 控制运动轨迹*/animation: identifier 3s infinite linear;transform-origin: 150px 150px ;}@keyframes identifier{   /*用“0%-100%” 或者 “from-to” 均可以*/  from{transform: rotate(360deg) scale(1);border: 10px solid rgb(143, 182, 222);}to{transform: rotate(360deg) scale(1);border: 10px solid rgb(2, 36, 70);}}</style>
</head>
<body><div class="xmbook_red_point_4"></div></body>
</html>

2.1.2 圆渐变8秒后消失

  • 代码实现如下：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 空心圆 */.xmbook_red_point_4 {width: 100px;height: 100px;/* background-color: red; */border-radius: 50%;/* border-color: red; */position: absolute;top: 150px;left: 150px;/* identifier 3s 控制动的频率 linear infinite 让动画不断渐变不要停transform-origin 控制运动轨迹*/animation: identifier 8s infinite linear;/* transform-origin: 150px 150px ; */}@keyframes identifier {100% {/* transform: rotate(360deg) scale(1); */border: 10px solid rgb(6, 68, 130);}}</style>
</head>
<body><div class="xmbook_red_point_4"></div></body>
</html>

2.1.3 转动的圆（单个圆）

  • 实现效果如下：

css实现圆转动（单个圆）

  • 实现代码如下：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 空心圆 */.xmbook_red_point_4 {width: 100px;height: 100px;background-color: red;border-radius: 50%;/* border-color: rgb(0, 98, 255); */position: absolute;top: 150px;left: 150px;/* identifier 3s 控制动的频率 linear infinite 让动画不断渐变不要停transform-origin 控制运动轨迹*/animation: identifier 5s infinite linear;transform-origin: 150px 150px ;}@keyframes identifier {100% {transform: rotate(360deg) scale(1);/* border: 10px solid rgb(6, 68, 130); */}}</style>
</head>
<body><div class="xmbook_red_point_4"></div></body>
</html>

2.2 多个动态圆

  • 实现效果如下：

css实现多个运动的圆

  • 实现代码如下：
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 空心圆 */.xmbook_red_point_4 {width: 100px;height: 100px;background-color: rgb(9, 163, 30);border-radius: 50%;/* border-color: rgb(0, 98, 255); */position: absolute;top: 150px;left: 150px;/* identifier 3s 控制动的频率 linear infinite 让动画不断渐变不要停transform-origin 控制运动轨迹*/animation: identifier 5s infinite linear;transform-origin: 100px 100px ;}/* 如果让三圆重叠，把下面的 120px 调成 100px 或更小即可 */.xmbook_red_point_4:nth-child(1) {animation: identifier 9s infinite linear;transform-origin: 120px 120px;}.xmbook_red_point_4:nth-child(2) {animation: identifier 9s infinite -3s linear;transform-origin: 120px 120px;}.xmbook_red_point_4:nth-child(3) {animation: identifier 9s infinite -6s linear;transform-origin: 120px 120px;}@keyframes identifier {0% {transform: rotate(0deg) scale(1);border: 10px solid rgb(4, 212, 195);}30% {transform: rotate(120deg) scale(1);border: 10px solid rgb(33, 4, 147);}100% {transform: rotate(360deg) scale(1);border: 10px solid rgb(132, 7, 9);}}</style>
</head>
<body><div class="xmbook_red_point_4"></div><div class="xmbook_red_point_4"></div><div class="xmbook_red_point_4"></div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/160855.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

在Google Kubernetes集群创建分布式Jenkins(一)

在Google Kubernetes集群创建分布式Jenkins(一)

因为项目需要&#xff0c;在GKE的集群上需要创建一个CICD的环境&#xff0c;记录一下安装部署一个分布式Jenkins集群的过程。 分布式Jenkins由一个主服务器和多个Agent组成&#xff0c;Agent可以执行主服务器分派的任务。如下图所示&#xff1a; 如上图&#xff0c;Jenkins Ag…
阅读更多...
Linux - 进程控制（上篇）- 进程创建 和 进程终止

Linux - 进程控制（上篇）- 进程创建 和 进程终止

进程控制 进程创建 对于进程的创建&#xff0c;你肯定知道&#xff0c;在 C/C 当中使用 fork&#xff08;&#xff09;函数&#xff0c;以当前可执行程序生成的进程为 父进程&#xff0c;创建这个父进程的 一个子进程&#xff0c;这个 子进程就是一个新的进程。 如上图所示&a…
阅读更多...
顶层模块【FPGA】

顶层模块【FPGA】

1顶层模块&#xff1a; 不能像C语言的h文件那样&#xff0c;把io的定义放在其他文件。 在Verilog中&#xff0c;顶层模块是整个设计的最高层次&#xff0c;它包含了所有其他模块和子模块。 顶层模块定义了整个设计的输入和输出端口&#xff0c;以及各个子模块之间的连接方式。…
阅读更多...
【qemu逃逸】D3CTF2021-d3dev

【qemu逃逸】D3CTF2021-d3dev

前言 题目给的是一个 docker 环境&#xff0c;所以起环境非常方便&#xff0c;但是该怎么调试呢&#xff1f;有无佬教教怎么在 docker 中调试&#xff1f; 我本来想着直接起一个环境进行调试&#xff0c;但是缺了好的库&#xff0c;所以就算了&#xff0c;毕竟本题也不用咋调…
阅读更多...
MFC 窗体插入图片

MFC 窗体插入图片

1.制作BMP图像1.bmp 放到res文件夹下&#xff0c;资源视图界面导入res文件夹下的1.bmp 2.添加控件 控件类型修改为Bitmap 图像&#xff0c;选择IDB_BITMAP1 3.效果
阅读更多...
操作系统——初始文件管理（王道视频p58）

操作系统——初始文件管理（王道视频p58）

1.总体概述&#xff1a; 这一节&#xff0c;主要是 作为 后续 “文件系统”的引子 我认为可以思考的点&#xff1a; &#xff08;1&#xff09;文件之间的逻辑结构——windows中采用根什么的“树状结构”&#xff0c;而文件在外存中的实际物理结构又是什么样的 &#xff08…
阅读更多...
windows自动登陆

windows自动登陆

新建文本粘贴下面代码&#xff0c;另存为注册表文件 Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Driver Signing] "Policy"hex:00[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Winlogon]"DefaultUserN…
阅读更多...
Web3游戏的十字路口：沿用传统IP还是另起炉灶？

Web3游戏的十字路口：沿用传统IP还是另起炉灶？

人们经常问我对 Web3 游戏有什么看法。因此&#xff0c;我想以书面形式概述一下我目前的想法。 让我先澄清一下&#xff1a;我不是专家。这不是一篇深入探讨游戏世界精细指标如 MAU 或 D14 等的全面分析。请把这看作是我根据个人交流和研究&#xff0c;这反映我在游戏领域关注…
阅读更多...
用Java（C语言也可以看）实现冒泡排序和折半查找（详细过程图）+逆序数组

用Java（C语言也可以看）实现冒泡排序和折半查找（详细过程图）+逆序数组

目录 一、冒泡排序 1.冒泡排序介绍 2.排序的思路 3.完整代码 二、折半查找 1.折半查找介绍 2.查找的思路 3.完整代码 三、逆序数组 1.逆序思路 2..完整代码 一、冒泡排序 冒泡排序是众多排序的一种&#xff0c;无论在C语言或者Java中都很常见&#xff0c;后续在数据…
阅读更多...
Proxysql读写分离

Proxysql读写分离

Proxysql读写分离 主从配置 # /etc/my.cnf 主节点 [mysqld] log-binmysql-bin server-id1从节点 [mysqld] server-id2 read_only1#初始化以及创建主从复制用户 mysql> alter user rootlocalhost identified with mysql_native_password by Jianren123; Query OK, 0 rows …
阅读更多...
CentOS 7使用RPM包安装MySQL5.7

CentOS 7使用RPM包安装MySQL5.7

目标 本文目标是简单介绍如何在CentOS 7上使用RPM包安装MySQL 5.7&#xff0c;然后描述如何调整存储路径datadir。 环境准备 操作系统 —— CentOS 7MySQL版本 —— MySQL 5.7.44 获取MySQL-rpm包 官网下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/5.7.htm…
阅读更多...
Hybrid App（原生+H5）开发

Hybrid App（原生+H5）开发

介绍 市面上主流的hybrid app框架主要有 React Native&#xff1a;由FaceBook开发&#xff0c;使用JavaScript和React来构建原生应用程序Flutter&#xff1a;由Google开发&#xff0c;使用Dart语言。Flutter使用自己的渲染引擎Ionic&#xff1a;基于 Web 技术&#xff08;HTM…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023