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

前端实战第一期：悬浮动画

news 文章来源：https://blog.csdn.net/AIMing_byte/article/details/135397512 2024/11/1 14:31:07

悬浮动画

请添加图片描述
像这样的悬浮动画该怎么做，让我们按照以下步骤完成
步骤：

  1. 先把HTML内容做起来，用button属性创建一个按钮，按钮内写上悬浮效果

    <button class='btn'>悬浮动画</button>

  2. 在style标签内设置样式,先设置盒子大小，这里用body当作容纳button的盒子 ，再用display:flex;属性把盒子变为弹性盒子,再用justify-content和align-item设置盒子body居中

    /* 第一步：设置盒子大小，这里用body当作容纳button的盒子 */body{/* height:100vh;能起到什么作用 */height:100vh;display:flex;justify-content: "center";align-items:center;}

  3. 创建和设置好盒子样式后，开始设置button样式

    • button是块级元素，所以第一步就是设置高宽，高为50px，宽度为100px

    • background-color: transparent;：设置按钮的背景颜色为透明。

    • border-color: #800080;：设置按钮边框的颜色为#800080（一种紫色）。

    • border-radius: 5px;：设置按钮边框的圆角半径为5像素，使按钮的四个角更圆润。

    • color: #800080;：设置按钮文字的颜色为#800080（一种紫色）。

    • font-weight: bolder;：设置按钮文字的字体粗细为比父元素的字体更粗。

    • margin: 0 auto;：设置按钮的水平外边距为自动，上下外边距为0，使按钮在水平方向上居中。

    • cursor: pointer;：当鼠标悬停在按钮上时，改变鼠标的形状为手形，表示这是一个可点击的元素。

    • position: relative;：设置按钮的位置为相对定位，相对于其正常位置进行定位。为后面absolute定位属性做铺垫

      .btn{width:100px;height:50px;background-color:transparent;border-color: #55aa7f;border-radius:5px;color:#55aa7f;font-weight: bolder;;margin:0 auto;cursor:pointer;position:relative;}

    1. button样式设置之后，就开始设置动画效果，为动画效果设置了三个选择器

      .btn::before选择器使用::before伪元素创建了一个额外的元素

      /*::before创建的元素是行内元素*/
.btn::before{content:"";height:100%;width:0px;background-color:#55aa7f;/* 设置::before盒子所在位置 */position:absolute;top:0%;left:-24%;transform:skew(45deg);z-index:-1; /*这使得伪元素在页面上的堆叠顺序低于其正常位置。*/transition:all 0.5s; /*颜色变化*/}

      .btn:hover::before选择器是当鼠标悬停在按钮上，就会触发.btn中的before创建的伪元素

      .btn:hover::before{/*触发之后，由原本的0px直接变为160%的宽度，这是很多动画效果都要设置的步骤，像是缩放，悬浮，出现等动画*/width:160%;}

      .btn:hover选择器是当鼠标悬停在按钮上，不光按钮背景要变，按钮内的字体颜色也要变

      .btn:hover{color:white;}

    2. 动画效果设置好之后，还要在.btn选择器中添加overflow和transition属性

      .btn{
/* 因为伪元素创建的盒子超出按钮大小，再说也为了美观，直接用overflow属性的hidden值隐藏   */    overflow:hidden;
/*如果仅仅设置了动画效果，点击过去，直接变过来，这样观感不好，所以用transition过渡元素，选取所有元素，再输入0.5s的过渡时间*/transition:all 0.5s;
}

这样这个小项目就算完成了
完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>悬浮动画</title><style>/* 第一步：设置盒子大小，这里用body当作容纳button的盒子 */body{/* height:100vh;能起到什么作用 */height:100vh;display:flex;justify-content: "center";align-items:center;}/* 第二步：创建好盒子后，就开始设置button的样式 */.btn{width:100px;height:50px;background-color:transparent;border-color: #55aa7f;border-radius:5px;color:#55aa7f;font-weight: bolder;;margin:0 auto;cursor:pointer;position:relative;overflow:hidden;transition:all 0.5s; /*字体变化*/}/* 第三步：button样式设置好之后，就开始设置动画效果 */.btn::before{content:"";height:100%;width:0px;background-color:#55aa7f;/* 设置::before盒子所在位置 */position:absolute;top:0%;left:-24%;transform:skew(45deg);z-index:-1;transition:all 0.5s; /*颜色变化*/}.btn:hover::before{width:160%;}.btn:hover{color:white;}</style></head><body><button class='btn'>悬浮动画</button></body>
</html>

运行效果
请添加图片描述

相关文章：

前端实战第一期：悬浮动画

悬浮动画 像这样的悬浮动画该怎么做&#xff0c;让我们按照以下步骤完成 步骤&#xff1a; 先把HTML内容做起来&#xff0c;用button属性创建一个按钮&#xff0c;按钮内写上悬浮效果 <button classbtn>悬浮动画</button>在style标签内设置样式,先设置盒子大小&…...

编程日记 2024/1/5 2:08:08

Python学习笔记（五）函数、异常处理

目录 函数 函数的参数与传递方式 异常处理 函数 函数是将代码封装起来&#xff0c;实现代码复用的目的 函数的命名规则——同变量命名规则&#xff1a; 不能中文、数字不能开头、不能使用空格、不能使用关键字 #最简单的定义函数 user_list[] def fun(): #定义一个函数&…...

编程日记 2024/1/5 2:05:06

Vue实现模糊查询

在Vue中实现模糊查询&#xff0c;你可以使用JavaScript的filter和includes方法&#xff0c;结合Vue的v-for指令。下面是一个简单的例子&#xff1a; 首先&#xff0c;你需要在你的Vue实例中定义一个数据数组和一个查询字符串。 data() { return { items: [Apple, Banana, Che…...

编程日记 2024/1/5 2:04:05

【十一】【C++\动态规划】1218. 最长定差子序列、873. 最长的斐波那契子序列的长度、1027. 最长等差数列，三道题目深度解析

动态规划 动态规划就像是解决问题的一种策略&#xff0c;它可以帮助我们更高效地找到问题的解决方案。这个策略的核心思想就是将问题分解为一系列的小问题&#xff0c;并将每个小问题的解保存起来。这样&#xff0c;当我们需要解决原始问题的时候&#xff0c;我们就可以直接利…...

编程日记 2024/1/5 2:02:03

主板部件

▶1.主要部件 主板是计算机的重要部件&#xff0c;主板由集成电路芯片、电子元器件、电路系统、各种总线插座和接口组成&#xff0c;目前主板标准为ATX。主板的主要功能是传输各种电子信号&#xff0c;部分芯片负责初步处理一些外围数据。不同类型的CPU,需要不同主板与之匹配。…...

编程日记 2024/1/5 2:01:02

2023年度学习总结

想想大一刚开始在CSDN写作&#xff0c;这一坚持&#xff0c;就是我在CSDN的第九个年头&#xff0c;这也是在CSDN最有里程碑的一年&#xff0c;这一年我被评为CSDN的博客专家啦&#xff01;先是被评为Unity开发领域新星创作者&#xff0c;写的关于一部分Unity开发的心得获得大家…...

编程日记 2024/1/5 1:55:57

服务器感染了.kann勒索病毒，如何确保数据文件完整恢复？

导言&#xff1a; 勒索病毒成为当前网络安全领域的一大威胁。.kann勒索病毒是其中的一种变种&#xff0c;对用户的数据造成了极大的威胁。本文91数据恢复将介绍.kann勒索病毒的特征、应对策略以及预防措施&#xff0c;以帮助用户更好地保护个人和组织的数据安全。当面对被勒索…...

编程日记 2024/1/5 1:52:55

使用results.csv文件数据绘制mAP对比图

yolov5每次train完成&#xff08;如果没有中途退出&#xff09;都会在run目录下生成expX目录&#xff08;X代表生成结果次数 第一次训练完成生成exp0 第二次生成exp1…以此类推&#xff09;。expX目录下会保存训练生成的weights以及result.txt文件&#xff0c;其中weights是训练…...

编程日记 2024/1/5 1:51:53

【算法刷题】## 算法题目第1讲：双指针处理数组题目 带视频讲解

算法题目第一讲&#xff1a;双指针处理数组题目 解决力扣&#xff1a; [344. 反转字符串][167. 两数之和 II - 输入有序数组][26. 删除有序数组中的重复项][27. 移除元素][283. 移动零][5. 最长回文子串] 配合b站视频讲解食用更佳:https://www.bilibili.com/video/BV1vW4y1P…...

编程日记 2024/1/5 1:50:52

达梦数据：数字化时代，国产数据库第一股终于到来？

又是新的一年开始。回首一年前的此时&#xff0c;在大家千呼万唤地期待中&#xff0c;数据基础制度体系的纲领性文件正式发布。 时隔一年之后&#xff0c;数据资源入表如约而至。2024年1月1日《企业数据资源相关会计处理暂行规定》正式施行&#xff0c;各行各业海量数据巨大的…...

编程日记 2024/1/5 1:48:51

selenium4.0中常见操作方式50条

前阵子升级了py3.9&#xff0c;一些常年陪伴的库也都做了升级&#xff0c;不少命令也更新了&#xff0c;适度更新一下记忆。 1. 打开浏览器&#xff1a;driver webdriver.Chrome() 2. 访问网址&#xff1a;driver.get("Example Domain") 3. 获取当前网址&#xff…...

编程日记 2024/1/5 1:44:47

如何解决使用融云音视频时由于库冲突导致编译不通过的问题

音视频库里面使用了一些第三方库&#xff0c;比如 openssl&#xff0c;libopencore-amrnb 等第三方库&#xff0c;如果集成的过程中遇到冲突可以尝试这样修改&#xff1a; 1、在 Build Settings 中 Other Linker Flags 中把 -all_load 去掉&#xff1b; 2、如果遇到 openssl 库…...

编程日记 2024/1/5 1:43:46

ISP 基础知识积累

Amber&#xff1a;现有工作必要的技术补充&#xff0c;认识需要不断深入&#xff0c;这个文档后续还会增加内容进行完善。 镜头成像资料 ——干货满满&#xff0c;看懂了这四篇文章&#xff0c;下面的问题基本都能解答 看完思考 1、ISP 是什么&#xff0c;有什么作用&#xff…...

编程日记 2024/1/5 1:42:45

Android Studio新手实战——深入学习Activity组件

目录 前言 一、Activity简介 二、任务栈相关概念 三、常用Flag 四、结束当前Activity 五、Intent跳转Activity 六、更多资源 前言 Android是目前全球最流行的移动操作系统之一&#xff0c;而Activity作为Android应用程序的四大组件之一&#xff0c;是Android应用程序的核…...

编程日记 2024/1/5 1:41:44

[足式机器人]Part2 Dr. CAN学习笔记-自动控制原理Ch1-10奈奎斯特稳定性判据-Nyquist Stability Criterion

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-自动控制原理Ch1-10奈奎斯特稳定性判据-Nyquist Stability Criterion Cauchy’s Argument Priciple 柯西幅角原理 结论&#xff1a; s s s平面内顺时针画一条闭合曲线 A A A&#xff0c; B B B曲…...

编程日记 2024/1/5 1:40:44

企业培训系统开发：构建灵活高效的学习平台

企业培训系统的开发在当今数字化时代是至关重要的。本文将介绍一些关键技术和代码示例&#xff0c;以帮助您构建一个灵活、高效的企业培训系统。 1. 技术选型 在开始企业培训系统的开发之前&#xff0c;首先需要选择合适的技术栈。以下是一个基本的技术选型示例&#xff1a;…...

编程日记 2024/1/5 1:36:41

2023秋电子科大信软 程算I 机考真题

基本情况 对应课程&#xff1a;程序设计与算法基础I 考试时间&#xff1a;2小时 题型&#xff1a;函数题编程题 函数题只需要完成期中一些&#xff08;个&#xff09;函数即可 编程题需要自己手动写main函数 提示&#xff1a;本次考试为全年级机考&#xff0c;分上下午场&am…...

编程日记 2024/1/5 1:35:40

Hive用户自定义函数之UDF开发

在进行大数据分析或者开发的时候&#xff0c;难免用到Hive进行数据查询分析&#xff0c;Hive内置很多函数&#xff0c;但是会有一部分需求需要自己开发&#xff0c;这个时候就需要自定义函数了&#xff0c;Hive的自定义函数开发非常方便&#xff0c;今天首先讲一下UDF的入门开发…...

编程日记 2024/1/5 1:34:39

Unity中URP下的线性雾

文章目录 前言一、线性雾 雾效因子二、MixFog1、ComputeFogIntensity 雾效强度计算2、雾效颜色混合 lerp(fogColor, fragColor, fogIntensity); 前言 在之前的文章中&#xff0c;我们实现了URP下的雾效支持。 Unity中URP下的添加雾效支持 在上一篇文章中,我们解析了 URP 下统…...

编程日记 2024/1/5 1:33:38

SpringBoot全局Controller返回值格式统一处理

一、Controller返回值格式统一 1、WebResult类 在 Controller对外提供服务的时候&#xff0c;我们都需要统一返回值格式。一般定义一个 WebResult类。 统一返回值&#xff08;WebResult类&#xff09;格式如下&#xff1a; {"success": true,"code": 2…...

编程日记 2024/1/5 1:32:37

程序媛的mac修炼手册-- 终端shell的驾驭 zsh vs bash

进入终端(Terminal)为新下载的应用配置环境&#xff0c;是Mac生产力up up的关键一步&#xff0c;更是编程小白装大神的第一步。Fake it till you make it , 硅谷大神标准路径&#xff5e; shell的基本原理 为应用配置环境&#xff0c;相当于在应用和操作系统间架桥。由此&…...

编程日记 2024/1/5 1:30:35

基于PHP的校园代购商城系统

有需要请加文章底部Q哦 可远程调试 基于PHP的校园代购商城系统 一 介绍 此校园代购商城系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。(附带参考设计文档) 技术栈&#xff1a;phpmysqlbootstrapphpstudyvscode 二 功能 …...

编程日记 2024/1/5 1:29:34

感知与认知的碰撞，大模型时代的智能文档处理范式

目录 0 写在前面1 GPT4-V&#xff1a;拓宽文档认知边界2 大语言模型的文档感知缺陷3 大一统文档图像处理范式3.1 像素级OCR任务3.2 OCR大一统模型3.3 长文档理解与应用 4 总结抽奖福利 0 写在前面 由中国图象图形学学会青年工作委员会发起的第十九届中国图象图形学学会青年科学…...

编程日记 2024/1/5 1:27:32

ECMAScript和JavaScript的区别

ECMAScript和JavaScript之间的关系和差异可以从以下几个方面来理解&#xff1a; 定义&#xff1a; ECMAScript&#xff1a;ECMAScript是一种由Ecma国际&#xff08;前身为欧洲计算机制造商协会&#xff0c;英文名称是European Computer Manufacturers Association&#xff09;通…...

编程日记 2024/1/5 1:25:30

[BUG]Datax写入数据到psql报不能序列化特殊字符

1.问题描述 Datax从mongodb写入数据到psql报错如下 org.postgresql.util.PSQLException: ERROR: invalid bytesequence for encoding "UTF8": 0x002.原因分析 此为psql独有的错误&#xff0c;不能对特殊字符’/u0000’,进行序列化&#xff0c;需要将此特殊字符替…...

编程日记 2024/1/5 1:24:29

用数据结构python写大数计算器

下面是一个基于Python的大数计算器的示例代码&#xff1a; class BigNumberCalculator:def __init__(self, num1, num2):self.num1 num1self.num2 num2staticmethoddef add(num1, num2):result carry 0len1, len2 len(num1), len(num2)max_len max(len1, len2)for i in …...

编程日记 2024/1/5 1:23:28

08.哲说建造者模式（Builder Pattern）

“The odds that we’re in ‘base reality’ is one in billions.” —— Elon Musk 这段话出自马斯克在2016年的一次演讲&#xff0c;“人类活在真实世界的几率&#xff0c;可能不到十亿分之一”。此言一出&#xff0c;可谓一石激起千层浪。有人嘲讽马斯克是“语不惊人死不休…...

编程日记 2024/1/5 1:21:26

ubuntu18.04查询实时内存、CPU占用率命令

gnome-system-monitor效果就是下面这样&#xff1a;...

编程日记 2024/1/5 1:20:26

Python计算圆的面积

Python 计算圆的面积 圆的面积公式为 &#xff1a; 公式中 r 为圆的半径。 # 定义一个方法来计算圆的面积 def findArea(r): PI 3.142 return PI * (r*r) # 调用方法 r float( input("请输入圆的半径:") ) print( "圆的面积为 %.3f&qu…...

编程日记 2024/1/5 1:19:25

（Java企业 / 公司项目）Nacos的怎么搭建多环境配置？（含相关面试题）（二）

上一篇讲了一个单体服务中配置&#xff0c;传统的Nacos配置但是在微服务架构当中肯定都是多环境下配置&#xff0c;比如生产环境&#xff0c;dev测试环境等等。 第一种方式模拟开始&#xff1a; 首先展示在生产环境中nacos如何配置&#xff0c;在模块下新建一个配置文件&…...

编程日记 2024/1/5 1:17:21

中央建设举报网站/小说网站排名

问题 : 线程池中的 coreSize 和 maxSize 的作用分别是什么&#xff1f;未执行的线程池存在在哪种数据类型&#xff0c;为什么使用这种类型的数据结构ThreadPoolExecutor概述 ThreadPoolExecutor 下文简称 TPE &#xff0c;我们使用它都是从Executror 这个类中的方法 &#xff1…...

编程日记 2024/11/1 12:26:21

设置网站建设/报个计算机培训班多少钱

1,在电路中没有任何功能&#xff0c;只是在PCB上为了调试方便或兼容设计等原因。 2,可以做跳线用&#xff0c;如果某段线路不用&#xff0c;直接不贴该电阻即可&#xff08;不影响外观&#xff09; 3,在匹配电路参数不确定的时候&#xff0c;以0欧姆代替&#xff0c;实际调试…...

编程日记 2024/11/1 11:40:32

做钢材什么网站好/天津网络推广seo

人工智能&#xff08;AI&#xff09;无处不在&#xff0c;令人着迷。 1997 年&#xff0c;IBM 的深蓝打败了国际象棋大师 Gary Kasparov&#xff1b;IBM 的 Watson 打败了 Jeapordy! 人类冠军。2016 年&#xff0c;DeepMind 的 AlphaGo 通过融合搜索树和深度学习&#xff0c;击…...

编程日记 2024/11/1 10:17:34

动态网站项目实训教程任务3怎么做/tool站长工具

C#字符雨 一题目描述 C# 是一个简单的、现代的、通用的、面向对象的编程语言&#xff0c;C# 编程是基于 C 和 C 编程语言的&#xff0c;推荐学习C#有用的网站可以看看咯&#xff0c;such as&#xff1a; C# Programming Guide 那么有许多强大的编程功能的C#来实现一些有趣的…...

编程日记 2024/11/1 5:40:11

v2017网站开发/外包客服平台

文章目录1.STL容器简介1.1STL介绍1.2容器分类2.向量vector2.1定义和初始化2.2常用操作2.3遍历操作3.列表list3.1定义和初始化3.2常用操作3.3遍历操作3.4实例程序4.双端队列deque4.1定义和初始化4.2常用操作4.3实例操作5.集合set5.1定义和初始化5.3常用操作5.4遍历操作5.5实例操…...

编程日记 2024/11/1 5:06:36

先域名 还是先做网站/德芙巧克力的软文500字

Oracle是面向对象的数据库&#xff0c;他的每一个数据库叫做一个ORACLE实例&#xff0c;在系统中体现为一个服务。 Oracle11g安装完在安装磁盘下面会有一个app目录&#xff0c;其下有admin和oradata两个目录&#xff0c;在admin中&#xff0c;每个数据库都有一个以数据库名命名…...

编程日记 2024/11/1 3:35:06