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

css 实现太极效果

news 2026/2/9 7:08:25

目录

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

一、简述

本次主要介绍::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

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2026/2/5 4:23:32

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2026/2/6 6:35:29

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

DBLP数据库是什么？

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

编程新知 2026/2/4 20:54:56

土建施工员考试：建筑施工技术重点知识有哪些？

《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目&#xff0c;核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容&#xff0c;附学习方向和应试技巧&#xff1a; 一、施工组织与进度管理 核心目标&#xff1a; 规…...

编程新知 2025/9/12 3:11:17

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

编程新知 2026/2/9 5:15:34

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

编程新知 2026/1/29 5:50:06

Win系统权限提升篇UAC绕过DLL劫持未引号路径可控服务全检项目

应用场景&#xff1a; 1、常规某个机器被钓鱼后门攻击后&#xff0c;我们需要做更高权限操作或权限维持等。 2、内网域中某个机器被钓鱼后门攻击后&#xff0c;我们需要对后续内网域做安全测试。 #Win10&11-BypassUAC自动提权-MSF&UACME 为了远程执行目标的exe或者b…...

编程新知 2026/2/8 18:24:21

【阅读笔记】MemOS: 大语言模型内存增强生成操作系统

核心速览 研究背景 ​​研究问题​​&#xff1a;这篇文章要解决的问题是当前大型语言模型&#xff08;LLMs&#xff09;在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色&#xff0c;但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成&#xff08;RA…...

编程新知 2026/1/27 18:21:00