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

css 实现太极效果

news 2026/1/30 17:55:16

一、简述

本次主要介绍::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，::before，box-shadow这三个属性。 ::after，::before这两个是伪类选择器，box-shaow是用来设置元素的阴影效果 before:向选定的元素前插入内容 after:向选定的元素后插…...

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

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

目录 🤔问题📝回答🎨使用场景动态添加属性动态添加数组元素 ❌注意事项$set只能在响应式对象上使用$set不能用于根级别的属性$set的性能问题 📄总结 🤔问题 Vue是一款在国内非常流行的框架，采用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服务如果之前安装过并已经启动，则需要卸载前请先关闭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中，文本排版可以通过简单的命令实现，这些命令可以控制字体大小、粗体与斜体、空格、行高和宽度等方面，…...

编程日记 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多线程中的应用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Lazysysadmin靶机渗透过程

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

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

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

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

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

SpringBoot手册

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

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

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

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

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

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

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

编程日记 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勒索软件作祟

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

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

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

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

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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制一、引言二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

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

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

编程新知 2026/1/20 19:54:35

YSYX学习记录（八）

C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...

编程新知 2026/1/24 14:31:01

【磁盘】每天掌握一个Linux命令 - iostat

目录【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景注意事项【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

JVM 内存结构详解

内存结构运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。每个线程都有一个程序计数…...

编程新知 2026/1/24 11:38:26

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载四、智能指针…...

编程新知 2026/1/30 2:33:40

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径卸载应用 adb uninstall 应用包名查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

探索Selenium：自动化测试的神奇钥匙

目录一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/11/19 18:06:51

目录

一、简述

二、太极效果制作

相关文章：