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

css 实现太极效果

news 文章来源：https://blog.csdn.net/lx00000025/article/details/130251670 2024/11/20 23:18:12

目录

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

一、简述

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

安装Ubuntu22.04虚拟机的一些常见问题解决方法

文章目录 VirttalBox 开启共享剪切板文件夹、拖放的功能VirtualBox 安装 ubuntu后安装增强工具无效的解决办法解决ubuntu您没有权限查看“ 某某文件夹”的内容所需的权限linux更换源的两种方法[如何在 Ubuntu 20.04 上安装 Visual Studio Code - ](https://zhuanlan.zhihu.com/…...

编程日记 2023/5/3 6:10:18

银河麒麟操作系统，安装Gitlab 基于docker

不废话。直接上干货 操作系统信息 ############## Kylin Linux Version ################# Release: Kylin Linux Advanced Server release V10 (Sword) Kernel: 4.19.90-24.4.v2101.ky10.aarch64 Build: Kylin Linux Advanced Server release V10 (SP2) /(Sword)-aarch64-…...

编程日记 2023/5/3 6:05:17

基于Python实现个人手机定位分析

TransBigData是一个为交通时空大数据处理、分析和可视化而开发的Python包。本文就来用它实现个人手机定位分析&#xff0c;感兴趣的小伙伴可以了解一下 但其实交通时空大数据并不仅仅局限于交通工具产生的数据&#xff0c;我们的日常生活中也会产生大量的数据。比如我们的手机…...

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

Unity Navgation系统杂记

立即停止寻路 使用agent.isStoppedtrue&#xff0c;可以停止寻路&#xff0c;但是有很大的延迟&#xff0c;视觉体验很不好。 使用agent.enabledfalse&#xff0c;通过禁用NavMeshAgent组件的方式实现立即停止寻路。因为组件被禁用可能会产生其它问题&#xff0c;比如失去了Ob…...

编程日记 2023/5/3 5:55:14

[2021.11.9]lighteffect架构优化详细设计文档

1 lighteffect系统架构图 图1-1 整改前lighteffect系统架构图 上图为整改前lighteffect系统架构图&#xff0c;存在的问题如下&#xff1a; (1)代码bug 原因&#xff1a;由于系统中兼容了lighteffect和lighteffect2&#xff0c;写代码时只记了一个&#xff0c;出现代码bug。…...

编程日记 2023/5/3 5:50:13

经典回归算法

回归的概念 回归方程&#xff1a; 写成矩阵&#xff1a; 核心问题&#xff0c;构建预测函数z来映射特征矩阵x和标签y的线性关系 预测的目标值&#xff0c;有连续值也有离散值 连续值&#xff0c;就直接预测输出就行离散值&#xff0c;需要在输出端加一个变换函数例如。Si…...

编程日记 2023/5/3 5:45:12

Python两三行代码轻松批量添加~防韩还是很有必要的~

人生苦短&#xff0c;我用python 一直想做一个这种系列的但是因为七七八八的事情总是忘记&#xff0c; 今天正好有空&#xff0c;来开整一下~ 首先&#xff0c; 天冷防韩是什么梗&#xff1f; 【天冷防韩】 “天冷防韩”是“天冷防寒”的谐音&#xff0c; 不过“寒”指的…...

编程日记 2023/5/3 5:40:11

开心消消乐

给定一个 N 行 M 列的二维矩阵&#xff0c;矩阵中每个位置的数字取值为 0 或 1&#xff0c;矩阵示例如&#xff1a; 1 1 0 0 0 0 0 1 0 0 1 1 1 1 1 1 现需要将矩阵中所有的 1 进行反转为 0&#xff0c;规则如下&#xff1a; 当点击一个 1 时&#xff0c;该 1 被反转为 0&am…...

编程日记 2023/5/3 5:35:10

有效日志管理在软件开发和运营中的作用

作者&#xff1a;Luca Wintergerst, David Hope, Bahubali Shetti 当今存在的快速软件开发过程需要扩展和复杂的基础架构和应用程序组件&#xff0c;并且操作和开发团队的工作不断增长且涉及多个方面。 有助于管理和分析遥测数据的可观察性是确保应用程序和基础架构的性能和可靠…...

编程日记 2023/5/3 5:30:09

【五一创作】【笔记】Git｜如何将仓库中所有的 commit 合成一个？又名，如何清除所有 git 提交记录？（附 git rebase 机制的简要分析）

在对代码进行开源时&#xff0c;我们往往并不希望代码开发过程中的提交记录被其他人看到&#xff0c;因为提交的过程中往往会涵盖一些敏感信息。因此会存在 将仓库中所有 commit 合成一个 的需求。 直觉上&#xff0c;往往会用 rebase 和 squash 或 reset&#xff0c;不过我尝…...

编程日记 2023/5/3 5:25:08

一级a做爰片 A视频网站/百度官网认证多少钱

2019独角兽企业重金招聘Python工程师标准>>> 重写Render和RenderFactory类&#xff0c;这里是Beetl的实现方式&#xff0c;如果是JSP&#xff0c;也是同样的方式继承JspRender和JspRenderFactory即可 /*** 继承BeetlRender&#xff0c;实现视图耗时的计算* author 董…...

编程日记 2024/11/20 21:04:15

杭州做网站的科技公司/网站运营工作的基本内容

最近市场上出现了非常多假冒MT4软件&#xff0c;很多投资者上当受骗&#xff0c;今天就给大家讲讲识别盗版MT4的几个小技巧。先来看看手机版的MT4正版的手机MT4都是连接了迈达克公司的服务器&#xff0c;在MT4里面是可以搜索到各大使用MT4服务的正规经纪商&#xff0c;比如你搜…...

编程日记 2024/11/20 18:35:25

网站建设费应开具互联网信息服务吗/百度客服在哪里找

1、侯先生经常说“凡走过必留下足迹”&#xff0c;所谓“走弯路”&#xff0c;未必不是一件好事。 2、排队的时候&#xff0c;你会发现一个规律——另一排总是动的比较快&#xff1b;你换到另一排&#xff0c;你原来站的那一排&#xff0c;就开始动的比较快了&#xff1b;你站的…...

编程日记 2024/11/20 17:16:32

wordpress 搜索框 404/宿州百度seo排名软件

函数嵌套示例 def outer():def inner():print(inner)print(outer)inner() outer() inner() # 此句会出错 函数有可见范围&#xff0c;这就是作用域的概念 内部函数不能被外部直接使用&#xff0c;会抛NameError异常 def outer():def inner():print(inner)print(outer)retur…...

编程日记 2024/11/20 16:41:55

吉林市教做网站/市场推广策略

门窗报警器主要利用开关型霍尔传感器具有磁感应强度达到一定强度时输出电压才会发生电平转换的特点&#xff0c;我们进行方案设定磁场靠近时霍尔输出低电平不报警&#xff0c;反之磁场离开时霍尔输出高电平为报警。因为门磁开关报警器为了方便安装使用采用电池供电&#xff0c;…...

编程日记 2024/11/20 14:28:00

如何管理好一个网站/网站怎么做到秒收录

查看GPU使用情况&#xff1a; nvidia-smi 发现进程22140占用GPU0&#xff0c;运行下面命令删除进程22140 kill -9 22140...

编程日记 2024/11/20 13:35:10