当前位置: 首页 > news >正文

动画圆圈文字标志效果

效果展示

在这里插入图片描述

CSS 知识点

  • 实现圆圈文字
  • animation 属性回顾

实现思路

从效果的实现思路很简单,其实就是两个圆圈就可以实现。外层大圆(灰色)用于圆圈文字的展示,而内圆(藏青色)主要用于存放 Logo 图片。布局采用绝对定位。具体层次结构如下图。

在这里插入图片描述

实现整体页面布局

<div class="circle"><div class="logo"></div><div class="text"><!-- &nbsp; 主要是用于单词之间的间距 --><p>Muhammad&nbsp;Isshad&nbsp;-&nbsp;Creative&nbsp;UX/UI&nbsp;Designer&nbsp;-&nbsp;-</p></div>
</div>

实现外部大圆和 Login 样式

.circle {position: relative;height: 400px;border-radius: 50%;display: flex;justify-content: center;align-items: center;/* 用于测试文字时的样式 *//* width: 400px; *//* background: #ccc; */
}.logo {position: absolute;width: 310px;height: 310px;background: url(./user-3.png) no-repeat center;background-color: aqua;background-size: cover;border-radius: 50%;
}

圆圈文字拆分为多个 span 标签

const text = document.querySelector(".text p");
text.innerHTML = text.innerText.split("").map((char, i) => {// 进行角度旋转,从而实现圆圈文字,旋转角度影响字符之间的间距(8.7是本案例中最适合的间距大小),return `<span style="transform: rotate(${i * 8.7}deg)">${char}</span>`;}).join("");

编写圆圈文字的样式和动画

.text {position: absolute;width: 100%;height: 100%;animation: rotateText 10s linear infinite;
}@keyframes rotateText {0% {transform: rotate(360deg);}100% {transform: rotate(0);}
}.text span {position: absolute;left: 50%;font-size: 1.2em;/* 文字圆圈大小 = 外层大圈 / 2*/transform-origin: 0 200px;
}

完整代码下载

完整代码下载

相关文章:

动画圆圈文字标志效果

效果展示 CSS 知识点 实现圆圈文字animation 属性回顾 实现思路 从效果的实现思路很简单&#xff0c;其实就是两个圆圈就可以实现。外层大圆&#xff08;灰色&#xff09;用于圆圈文字的展示&#xff0c;而内圆&#xff08;藏青色&#xff09;主要用于存放 Logo 图片。布局采…...

【数据结构】二叉树--顺序结构及实现 (堆)

目录 一 二叉树的顺序结构 二 堆的概念及结构 三 堆的实现 1 包含所有接口 (Heap.h) 2 初始化,销毁和交换&#xff08;Heap.c) 3 向上调整&#xff08;Heap.c) 4 插入&#xff08;Heap.c) ​5 向下调整&#xff08;Heap.c) 6 删除&#xff08;Heap.c) ​7 打印&#…...

适用于嵌入式单片机的差分升级通用库

转至&#xff1a;痞子衡嵌入式半月刊&#xff1a;第 81 期 1、mcu_bsdiff_upgrade - 适用于嵌入式单片机的差分升级通用库 mcu_bsdiff_upgrade 是一款适用于嵌入式单片机的差分升级库&#xff0c;通用所有单片机&#xff0c;如stm32、华大、复旦微、瑞萨等。适合嵌入式的差分升…...

Exposure Normalization and Compensation for Multiple-Exposure Correction 论文阅读笔记

这是CVPR2022的一篇曝光校正的文章&#xff0c;是中科大的。一作作者按同样的思路&#xff08;现有方法加一个自己设计的即插即用模块以提高性能的思路&#xff09;在CVPR2023也发了一篇文章&#xff0c;名字是Learning Sample Relationship for Exposure Correction。 文章的…...

Arduino驱动BMI160 6轴惯性运动传感器(惯性测量传感器篇)

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序...

数据挖掘实战(3):如何对比特币走势进行预测?

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ &#x1f434;作者&#xff1a;秋无之地 &#x1f434;简介&#xff1a;CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作&#xff0c;主要擅长领域有&#xff1a;爬虫、后端、大数据…...

巴以冲突中暴露的摄像头正对安全构成威胁

巴以冲突爆发后&#xff0c;许多配置不当的安全摄像头正暴露给黑客活动分子&#xff0c;使其周遭人员面临巨大安全风险。 Cyber​​news 研究人员发现&#xff0c;在以色列至少有165 个暴露的联网 RTSP 摄像头&#xff0c;在巴勒斯坦有 29 个暴露的 RTSP 摄像头。在巴勒斯坦&am…...

【Redis】Redis性能优化:理解与使用Redis Pipeline

原创不易&#xff0c;注重版权。转载请注明原作者和原文链接 文章目录 Pipeline介绍原生批命令(MSET, MGET) VS PipelinePipeline的优缺点一些疑问Pipeline代码实现 当我们谈论Redis数据处理和存储的优化方法时&#xff0c;「 Redis Pipeline」无疑是一个不能忽视的重要技术。…...

前端全局工具函数utils.js/正则(持续更新)

1. 接口返回提示 // 接口返回提示requestCodeTips(code, msg) {// code错误码&#xff0c;msg提示信息let errorrMessage switch (Number(code)) {case 400:errorrMessage 错误请求break;case 401:errorrMessage 未授权,请重新登录break;case 403:errorrMessage 拒绝访问b…...

如何基于先进视频技术,构建互联网视频监控安全管理平台解决方案

一、建设思路 依托互联网&#xff0c;建设一朵云&#xff0c;实现各类二三类视频资源统一接入&#xff0c;实现天网最后100米、10米、1米的全域覆盖。 依托人工智能与互联网技术&#xff0c;拓展视频资源在政府、社会面等多领域的全面应用&#xff1b;建设与运营模式并存&…...

【React native】navigation 状态重置

reset The reset action allows to reset the navigation state to the given state. It takes the following arguments: 重置操作允许将导航状态重置为给定状态&#xff1a; navigation.reset({index: 1,routes: [{name: Home}],});参考链接: 官方文档 https://reactnavigat…...

2023全国大学生软件测试大赛开发者测试练习题99分答案(ScapegoatTree2023)

2023全国大学生软件测试大赛开发者测试练习题99分答案(ScapegoatTree2023) 题目详情题解代码(直接全部复制到test类中即可)提示:该题只需要分支覆盖得分即可,不需要变异得分 题目详情 题解代码(直接全部复制到test类中即可) package net.mooctest;import static org.…...

Centos8 openjdk升级

1、卸载旧版本 sudo dnf remove java-1.8.0-openjdk 2、搜索新版本 yum search java-11-openjdk3、安装新版本 dnf install java-11-openjdk.x86_644、验证新版本 java -version...

开启深度学习之门—《深度学习》

开启深度学习之门—《深度学习》 《深度学习》由Ian Goodfellow和Yoshua Bengio合著&#xff0c;以其前沿的内容和深入浅出的风格&#xff0c;成为了当今最受欢迎的人工智能教材之一。首先&#xff0c;让我们来了解一下这两位作者。Ian Goodfellow是一位备受瞩目的计算机科学家…...

优先调节阀位,条件调节阀位

控制对象的执行机构可能存在多个&#xff0c;举例&#xff0c;压力通过变频和翻板这两个执行机构调节。默认调节翻板。这里定义一个全局布尔变量 bfgflag 初始默认为0&#xff1b;优先调节翻板&#xff0c;当翻板处于极限阀位时&#xff0c;bfgflag 赋值为1&#xff0c;开始调节…...

oracle入门笔记六

一、索引&#xff08;index&#xff09; 1、索引的作用 索引是优化查询的一种&#xff0c;使得查询效率特别高&#xff0c;索引是优化存储&#xff0c;索引作用在字段上 2、什么样的字段适合建索引 a、经常被查询的字段 b、不能为空&#xff0c;不能重复 c、字段的值不会被经常…...

腾讯云优惠券种类、领取方法及使用教程分享

腾讯云是国内领先的云计算服务提供商&#xff0c;为用户提供丰富的云计算产品和服务。为了吸引更多用户使用腾讯云的产品和服务&#xff0c;腾讯云会定期推出各种优惠券活动。本文将为大家介绍腾讯云优惠券的种类、领取方法及使用教程。 一、腾讯云优惠券种类介绍 腾讯云优惠券…...

JavaScript使用类-模态窗口

**上节课我们为这个项目获取了一些DOM元素&#xff0c;现在我们可以继续&#xff1b;**这个模态窗口有一个hidden类&#xff0c;这个类上文我们讲了&#xff0c;他的display为none&#xff1b;如果我们去除这个hidden的话&#xff0c;就可以让这个模态窗口展现出来。如下 cons…...

【轻松玩转MacOS】外部设备篇

引言 在开始之前&#xff0c;我们先来了解一下为什么要连接外部设备。想象一下&#xff0c;你正在享受MacOS带来的便捷和高效&#xff0c;突然需要打印一份文件&#xff0c;但你发现打印机无法连接&#xff1b;或者你需要将手机投屏到电脑上&#xff0c;却不知道该如何操作。这…...

location rewrite

Nginx location 匹配的规则和优先级 Nginx常用的变量 rewrite: 重定向功能 Location 匹配 URI URI&#xff1a;统一资源的表示符&#xff0c;是一种字符串标识&#xff0c;用于标识抽象或者物理资源 先来巩固一些与location结合使用的正则表达式 正则表达式&#xff1a;匹…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...