CSS画圆以及CSS实现动态圆

2023-11-04 23:52
文章标签 动态 实现 css frontend 画圆

本文主要是介绍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>

这篇关于CSS画圆以及CSS实现动态圆的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/346036。

相关文章

springboot+redis实现订单过期(超时取消)功能的方法详解

springboot+redis实现订单过期(超时取消)功能的方法详解

《springboot+redis实现订单过期(超时取消)功能的方法详解》在SpringBoot中使用Redis实现订单过期（超时取消）功能,有多种成熟方案,本文为大家整理了几个详细方法,文中的示例代... 目录一、Redis键过期回调方案（推荐）1. 配置Redis监听器2. 监听键过期事件3. Redi
阅读更多...
SpringBoot全局异常拦截与自定义错误页面实现过程解读

SpringBoot全局异常拦截与自定义错误页面实现过程解读

《SpringBoot全局异常拦截与自定义错误页面实现过程解读》本文介绍了SpringBoot中全局异常拦截与自定义错误页面的实现方法,包括异常的分类、SpringBoot默认异常处理机制、全局异常拦... 目录一、引言二、Spring Boot异常处理基础2.1 异常的分类2.2 Spring Boot默
阅读更多...
基于SpringBoot实现分布式锁的三种方法

基于SpringBoot实现分布式锁的三种方法

《基于SpringBoot实现分布式锁的三种方法》这篇文章主要为大家详细介绍了基于SpringBoot实现分布式锁的三种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、基于Redis原生命令实现分布式锁1. 基础版Redis分布式锁2. 可重入锁实现二、使用Redisso
阅读更多...
SpringBoo WebFlux+MongoDB实现非阻塞API过程

SpringBoo WebFlux+MongoDB实现非阻塞API过程

《SpringBooWebFlux+MongoDB实现非阻塞API过程》本文介绍了如何使用SpringBootWebFlux和MongoDB实现非阻塞API,通过响应式编程提高系统的吞吐量和响应性能... 目录一、引言二、响应式编程基础2.1 响应式编程概念2.2 响应式编程的优势2.3 响应式编程相关技术
阅读更多...
C#实现将XML数据自动化地写入Excel文件

C#实现将XML数据自动化地写入Excel文件

《C#实现将XML数据自动化地写入Excel文件》在现代企业级应用中,数据处理与报表生成是核心环节,本文将深入探讨如何利用C#和一款优秀的库,将XML数据自动化地写入Excel文件,有需要的小伙伴可以... 目录理解XML数据结构与Excel的对应关系引入高效工具：使用Spire.XLS for .NETC
阅读更多...
Nginx更新SSL证书的实现步骤

Nginx更新SSL证书的实现步骤

《Nginx更新SSL证书的实现步骤》本文主要介绍了Nginx更新SSL证书的实现步骤,包括下载新证书、备份旧证书、配置新证书、验证配置及遇到问题时的解决方法,感兴趣的了解一下... 目录1 下载最新的SSL证书文件2 备份旧的SSL证书文件3 配置新证书4 验证配置5 遇到的http://www.cppc
阅读更多...
Nginx之https证书配置实现

Nginx之https证书配置实现

《Nginx之https证书配置实现》本文主要介绍了Nginx之https证书配置的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起... 目录背景介绍为什么不能部署在 IIS 或 NAT 设备上？具体实现证书获取nginx配置扩展结果验证
阅读更多...
SpringBoot整合 Quartz实现定时推送实战指南

SpringBoot整合 Quartz实现定时推送实战指南

《SpringBoot整合Quartz实现定时推送实战指南》文章介绍了SpringBoot中使用Quartz动态定时任务和任务持久化实现多条不确定结束时间并提前N分钟推送的方案,本文结合实例代码给大... 目录前言一、Quartz 是什么？1、核心定位：解决什么问题？2、Quartz 核心组件二、使用步骤1
阅读更多...
使用Redis实现会话管理的示例代码

使用Redis实现会话管理的示例代码

《使用Redis实现会话管理的示例代码》文章介绍了如何使用Redis实现会话管理,包括会话的创建、读取、更新和删除操作,通过设置会话超时时间并重置,可以确保会话在用户持续活动期间不会过期,此外,展示了... 目录1. 会话管理的基本概念2. 使用Redis实现会话管理2.1 引入依赖2.2 会话管理基本操作
阅读更多...
mybatis-plus分表实现案例(附示例代码)

mybatis-plus分表实现案例(附示例代码)

《mybatis-plus分表实现案例(附示例代码)》MyBatis-Plus是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,为简化开发、提高效率而生,：本文主要介绍my... 目录文档说明数据库水平分表思路1. 为什么要水平分表2. 核心设计要点3.基于数据库水平分表注意事项示例
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2