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

css 实现太极效果

news 2025/9/14 8:03:03

目录

  • 一、简述
  • 二、太极效果制作

一、简述

本次主要介绍::after，::before，box-shadow这三个属性。

::after，::before这两个是伪类选择器，box-shaow是用来设置元素的阴影效果
before:向选定的元素前插入内容
after:向选定的元素后插入内容
使用content 属性来指定要插入的内容，值可以为空，但是不能不写，如果不写的话伪类选择器就不会显示出来。

例如以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
div:before
{ 
content:"- 注意-";
}
</style>
</head><body>
<div>我的名字是 Donald</div></body>
</html>

在这里插入图片描述
伪类选择器的内容是不可选中的

二、太极效果制作

1.第一步：编写html部分
我们只需要定义一个div标签即可，用它来完成太极的制作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太极</title>
</head>
<body><div></div>
</body>
</html>

2.第二步：设置div的样式

body{background-color: antiquewhite;
}
div{width: 150px;height: 300px;margin: 100px auto;background-color: white;border-radius: 50%;border-right: 150px solid black;box-shadow: 0px 0px 30px blueviolet;  
}

这里的box-shadow的第一个值是x轴移动的值，第二个值是y轴移动的值，第三个值代表模糊度，第四个是阴影的颜色。
效果：
在这里插入图片描述
第三步：通过伪类选择器画出两个小圆

div::after,div::before{content: "";display: block;border-radius: 50%;margin-left: 75px;border: 50px solid black;background-color: white;width:50px;height: 50px;
}

content必须要写出来，值为空也可以，如果不写的话伪类选择器就不会显示。
设置它的边框颜色为黑色，然后就可以和大圆的黑色部分连接起来了。
效果：
在这里插入图片描述
4.第四步：将after的边框和背景分别改成白色和黑色。

/*覆盖上面::after的border和background-color两个属性*/
div::after{border: 50px solid white;background-color: black;
}

效果：
在这里插入图片描述
5.当然你也可以给它个动画让它动起来，当我们鼠标移动到太极上时它就开始转动

div:hover{animation: mytest 2s linear infinite; 
}
@keyframes mytest {to{ transform: rotate(360deg);}
}

CSS完整代码：

body{background-color: antiquewhite;
}
div{width: 150px;height: 300px;margin: 100px auto;background-color: white;border-radius: 50%;border-right: 150px solid black;box-shadow: 0px 0px 30px blueviolet;  
}
div:hover{animation: mytest 2s linear infinite; 
}
@keyframes mytest {to{ transform: rotate(360deg);}
}div::after,div::before{content: "";display: block;border-radius   : 50%;margin-left: 75px;border: 50px solid black;background-color: white;width:50px;height: 50px;
}
div::after{border: 50px solid white;background-color: black;
}

相关文章：

css 实现太极效果

目录 一、简述二、太极效果制作 一、简述 本次主要介绍::after&#xff0c;::before&#xff0c;box-shadow这三个属性。 ::after&#xff0c;::before这两个是伪类选择器&#xff0c;box-shaow是用来设置元素的阴影效果 before:向选定的元素前插入内容 after:向选定的元素后插…...

编程日记 2023/5/31 4:57:33

【前端基础知识】Vue中的变量不是响应式的吗？属性赋值后视图不变化的原因是什么？

目录 &#x1f914;问题&#x1f4dd;回答&#x1f3a8;使用场景动态添加属性动态添加数组元素 ❌注意事项$set只能在响应式对象上使用$set不能用于根级别的属性$set的性能问题 &#x1f4c4;总结 &#x1f914;问题 Vue是一款在国内非常流行的框架&#xff0c;采用MVVM架构&a…...

编程日记 2023/5/31 23:21:34

如何完全卸载linux下通过rpm安装的mysql

卸载linux下通过rpm安装的mysql 1.关闭MySQL服务2.使用 rpm 命令的方式查看已安装的mysql3. 使用rpm -ev 命令移除安装4. 查询是否还存在遗漏文件5. 删除MySQL数据库内容 1.关闭MySQL服务 如果之前安装过并已经启动&#xff0c;则需要卸载前请先关闭MySQL服务 systemctl stop…...

编程日记 2023/5/31 23:17:24

[渗透教程]-004-长城防火墙GFW的原理

文章目录 1. baidu.com 请求过程2. GFW原理2.1 GFW拦截方法1:DNS渲染2.2 通过IP黑名单2.3 VPN阻断1. baidu.com 请求过程 家庭的路由器具备了交换机的功能.域名–>ip,优先检测本地的缓存,没有的话就查找DNS服务器,传输层对应该层的数据进行封装增加了端口的信息,网络层对传输…...

编程日记 2023/5/31 23:39:25

LaTeX基础文本排版命令

LaTeX基础文本排版命令 1. 字体大小2. 字体的粗体与斜体2.1. 粗体2.2 斜体2.3 同时启用粗体和斜体 3. 空格长度4. 高度与宽度尺寸 在LaTeX中&#xff0c;文本排版可以通过简单的命令实现&#xff0c;这些命令可以控制字体大小、粗体与斜体、空格、行高和宽度等方面&#xff0c;…...

编程日记 2023/6/1 0:15:23

PLC模糊控制模糊PID(梯形图实现+算法分析)

博途PLC的模糊PID控制详细内容请查看下面的博客文章： Matlab仿真+博途PLC模糊PID控制完整SCL源代码参考（带模糊和普通PID切换功能）_博途怎么实现模糊pid_RXXW_Dor的博客-CSDN博客模糊PID的其它相关数学基础，理论知识大家可以参看专栏的其它文章，这里不再赘述，本文就双容…...

编程日记 2023/6/1 2:06:05

线程池在Java多线程中的应用

前言 随着计算机硬件和软件技术的不断发展&#xff0c;多线程编程在软件开发中变得越来越常见。然而&#xff0c;使用多线程编程时必须小心谨慎&#xff0c;以确保正确性和可维护性。在这个过程中&#xff0c;线程池成为了一个至关重要的工具。本文将介绍其应用场景、注意事项…...

编程日记 2023/6/1 2:40:38

1997-2021年全国30省技术市场成交额(亿元)

1997-2021年全国30省技术市场成交额 1、时间&#xff1a;1997-2021年 2、范围&#xff1a;30省不含西藏 3、来源&#xff1a;国家统计J 4、指标&#xff1a;技术市场成交额 5、缺失情况说明&#xff1a;无缺失 6、指标解释及用途&#xff1a; 技术市场成交额是一个客观、…...

编程日记 2023/6/1 1:17:26

【C++】面向对象之多态

文章内的所有调试都是在vs2022下进行的&#xff0c; 部分小细节可能因编译器不同存在差异。 文章目录 多态的定义和实现概念引入多态的构成条件虚函数重写通过基类的指针或者引用调用虚函数 override和final 抽象类概念实现继承和接口继承 虚函数表单继承中的虚表打印虚表多继…...

编程日记 2023/6/1 1:42:06

卡尔曼滤波器简介——多维卡尔曼滤波

原文&#xff1a;多维卡尔曼滤波 (kalmanfilter.net) 目录 前言 基本背景 状态外推方程 示例 - 飞机 - 无控制输入 示例 - 带控制输入的飞机 示例 – 坠落物体 状态外推方程维度 线性时不变系统 线性动态系统建模 状态外推方程的推导 状态空间表示形式 示例 - 等速…...

编程日记 2023/5/3 7:05:30

如何用 GPT-4 帮你写游戏？

你知道的&#xff0c;GPT-4 发布了。 目前你想要用上 GPT-4&#xff0c;主要的渠道是 ChatGPT Plus 。作为交了订阅费的用户&#xff0c;你可以在对话的时候选择模型来使用。 另一种渠道&#xff0c;就是申请官方 API 的排队。我在申请 New Bing Chat 的时候&#xff0c;耐心被…...

编程日记 2023/6/1 11:58:30

R语言的贝叶斯时空数据模型实践技术应用

时间&#xff0d;空间数据&#xff08;以下简称“时空数据”&#xff09;是最重要的观测数据形式之一&#xff0c;很多科学研究的数据都以时空数据的形式得以呈现&#xff0c;而科学研究目的可以归结为挖掘时空数据中的规律。另一方面&#xff0c;贝叶斯统计学作为与传统统计学…...

编程日记 2023/6/1 8:20:10

Lazysysadmin靶机渗透过程

准备工作 下载好靶机到本地后 VMware导入OVA 启动靶机 扫描信息 首先扫描整个C段发现主机 进一步扫描端口 从扫描结果可知&#xff1a; Samba服务MySQLSSH端口网站端口 先对网站进行目录遍历 发现有wordpress网站和phpmyadmin管理系统 出现了非常多遍My name is togie.可能…...

编程日记 2023/6/1 12:08:09

为什么网络安全缺口很大，招聘却很少？

2020年我国网络空间安全人才数量缺口超过了140万&#xff0c;就业人数却只有10多万&#xff0c;缺口高达了93%。这里就有人会问了&#xff1a; 1、网络安全行业为什么这么缺人&#xff1f; 2、明明人才那么稀缺&#xff0c;为什么招聘时招安全的人员却没有那么多呢&#xff1…...

编程日记 2023/6/1 12:13:02

SpringBoot手册

目录 依赖管理关于各种的 start 依赖关于自动配置关于约定大于配置中的配置SpringBoot 整合 SpringMVC定制化 SpringMVC静态资源处理对上传文件的处理对异常的处理Web原生组件注入&#xff08;Servlet、Filter、Listener&#xff09;Interceptor 自定义拦截器DispatcherServlet…...

编程日记 2023/5/3 6:40:25

【Linux】如何实现单机版QQ,来看进程间通信之管道

学会了管道&#xff0c;就可以实现简单的qq哦~ 文章目录 前言一、匿名管道总结 前言 为什么要进行进程间通信呢&#xff1f;因为需要以下这些事&#xff1a; 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程 资源共享&#xff1a;多个进程之间共享同样的资源。 …...

编程日记 2023/5/30 23:38:09

从一到无穷大 #6 盘满排查过程

文章目录 引言df/du 原理排查思路文件系统预留空间进程占用句柄挂载覆盖 引言 核心在于执行df和du的时候发现显示的存储量完全不同&#xff0c;我本地系统盘有99G空间&#xff0c;du显示占用了45G&#xff0c;但是df却显示使用了99G&#xff0c;排查的过程本文所示。 先记录几…...

编程日记 2023/5/3 6:30:23

ChatGPT技术原理 第九章：数据集和训练技巧

目录 9.1 对话数据集 9.2 数据预处理 9.3 预训练技巧 9.4 微调技巧 9.5 多任务学习...

编程日记 2023/5/3 6:25:22

NCR被攻击后服务中断！原是BlackCat勒索软件作祟

近日&#xff0c;在遭到BlackCat勒索软件攻击后&#xff0c;NCR 的 Aloha 销售点平台出现中断。 NCR公司是全球关系管理技术解决方案领导供应商&#xff0c;为全球零售、金融、传讯、制造、旅游、交通及保安等客户提供服务。凭著累积多年的业界知识、专业顾问经验、专业增值应用…...

编程日记 2023/5/30 18:05:21

带你认识什么是BMS（电池管理系统）

文章目录 概述BMS的硬件拓扑BMS的电气架构BMS的功能BMS的总压采集&#xff08;主板功能&#xff09;BMS的电流采集&#xff08;主板功能&#xff09;BMS的电芯电压和温度采集&#xff08;从板功能&#xff09;BMS的SOC、SOP和SOH&#xff08;ASW计算&#xff09;BSM的绝缘检测B…...

编程日记 2023/5/3 6:15:19

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2025/9/12 9:53:43

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/8/28 23:03:34

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/9/9 23:12:32

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/9/11 12:54:54

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/9/7 12:10:26

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/9/13 0:44:14

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/8/10 12:06:15

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/8/5 10:17:15