花样鼠标悬停特效

代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 130px;padding: 10px 0;background: mediumpurple;color: #fff;}.fill:hover,.fill:focus {/* box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>; *//* inset关键字是可选的,如果提供,阴影将在元素内部而不是外部。<offset-x>和<offset-y>定义阴影的水平和垂直偏移量。<blur-radius>是可选的,定义模糊距离。<spread-radius>也是可选的,定义阴影的大小。<color>定义阴影的颜色。 *//* 2m=32px */box-shadow: inset 0 0 0 2em var(--hover);}.pulse:hover,.pulse:focus {animation: pulse 1s;box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);}@keyframes pulse {0% {box-shadow: 0 0 0 0 var(--hover);}}.close:hover,.close:focus {/* box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>; *//* inset关键字是可选的,如果提供,阴影将在元素内部而不是外部。<offset-x>和<offset-y>定义阴影的水平和垂直偏移量。<blur-radius>是可选的,定义模糊距离。<spread-radius>也是可选的,定义阴影的大小。<color>定义阴影的颜色。 */box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);}.raise:hover,.raise:focus {/* box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>; *//* inset关键字是可选的,如果提供,阴影将在元素内部而不是外部。<offset-x>和<offset-y>定义阴影的水平和垂直偏移量。<blur-radius>是可选的,定义模糊距离。<spread-radius>也是可选的,定义阴影的大小。<color>定义阴影的颜色。 */box-shadow: 0 0.5em 0.5em -0.4em var(--hover);transform: translateY(-0.25em);}.up:hover,.up:focus {/* box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>; *//* inset关键字是可选的,如果提供,阴影将在元素内部而不是外部。<offset-x>和<offset-y>定义阴影的水平和垂直偏移量。<blur-radius>是可选的,定义模糊距离。<spread-radius>也是可选的,定义阴影的大小。<color>定义阴影的颜色。 */box-shadow: inset 0 -3.25em 0 0 var(--hover);}.slide:hover,.slide:focus {/* box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>; *//* inset关键字是可选的,如果提供,阴影将在元素内部而不是外部。<offset-x>和<offset-y>定义阴影的水平和垂直偏移量。<blur-radius>是可选的,定义模糊距离。<spread-radius>也是可选的,定义阴影的大小。<color>定义阴影的颜色。 */box-shadow: inset 6.5em 0 0 0 var(--hover);}.offset {/* box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>; *//* inset关键字是可选的,如果提供,阴影将在元素内部而不是外部。<offset-x>和<offset-y>定义阴影的水平和垂直偏移量。<blur-radius>是可选的,定义模糊距离。<spread-radius>也是可选的,定义阴影的大小。<color>定义阴影的颜色。 */box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);}.offset:hover,.offset:focus {box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);}.fill {--color: #a972cb;--hover: #cb72aa;}.pulse {--color: #ef6eae;--hover: #ef8f6e;}.close {--color: #ff7f82;--hover: #ffdc7f;}.raise {--color: #ffa260;--hover: #e5ff60;}.up {--color: #e4cb58;--hover: #94e458;}.slide {--color: #8fc866;--hover: #66c887;}.offset {--color: #19bc8b;--hover: #1973bc;}button {color: var(--color);transition: 0.25s;}button:hover,button:focus {border-color: var(--hover);color: #fff;}button {background: none;border: 2px solid;font: inherit;line-height: 1;margin: 0.5em;padding: 1em 2em;}</style>
</head><body><div class="container"><div class="top"><h3>花样的鼠标悬停特效</h3></div><div style="width:640px ; margin:0 auto; background:#222222;"><button class="fill">Fill In</button><button class="pulse">Pulse</button><button class="close">Close</button><button class="raise">Raise</button><button class="up">Fill Up</button><button class="slide">Slide</button><button class="offset">Offset</button></div></div>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806791.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SAM功能改进VRP-SAM论文解读VRP-SAM: SAM with Visual Reference Prompt

现已总结SAM多方面相关的论文解读&#xff0c;具体请参考该专栏的置顶目录篇 一、总结 1. 简介 发表时间&#xff1a;2024年3月30日 论文&#xff1a; 2402.17726.pdf (arxiv.org)https://arxiv.org/pdf/2402.17726.pdf代码&#xff1a; syp2ysy/VRP-SAM (github.com)htt…

如何在极狐GitLab 使用Docker 仓库功能

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了如何在[极狐GitLab…

月亮和Pandas - Wes Mckinney的传奇故事

正如死亡和税收不可避免&#xff0c;Pandas对量化人而言&#xff0c;也具有同样的地位 – 每个人都不可避免地要与之打交道。而Wes Mckinney正是Pandas的创建者。Pandas是有史以来&#xff0c;最成功的Python库之一&#xff0c;以一已之力&#xff0c;开拓了Python的生存空间。…

Python结合spy++

导入必要的库 import win32con from win32 import win32gui from win32 import win32clipboard as w import pyautogui import sys1.获取窗口全部属性 def show_window_attr(hwnd):"""显示窗口的属性:param hwnd: 窗口句柄&#xff08;十进制&#xff09;:ret…

国内如何使用Suno-v3-AI音乐生成大模型?SparkAi创作系统搭建部署教程分享

一、文章前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持…

亚信安慧AntDB-T数据库重分布的实现原理

摘要&#xff1a; 亚信安慧AntDB-T是一款通用企业级、高可用、高性能的原生分布式关系型数据库&#xff0c;具有多种分片方式。在数据库的使用过程中&#xff0c;随着数据的变更和增长&#xff0c;需要重新修改表的分片方式。 AntDB-T数据库支持重分布命令&#xff0c;在内核…

使用docker制作Android镜像(实操可用)

一、安装包准备 1、准备jdk 下载地址&#xff1a;Java Downloads | Oracle 注意版本&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 我下载的jdk17&#xff0c;不然后面构建镜像报错&#xff0c;就是版本不对 2、准备安装的工具包 ttps://dev…

迭代器模式【行为模式C++】

1.简介 迭代器模式是一种行为设计模式&#xff0c; 让你能在不暴露集合&#xff08;聚合对象&#xff09;底层表现形式 &#xff08;列表、 栈和树等&#xff09; 的情况下遍历集合&#xff08;聚合对象&#xff09;中所有的元素。 迭代器的意义就是将这个行为抽离封装起来&a…

C语言中的数据结构--链表的应用1(2)

前言 上一节我们学习了链表的概念以及链表的实现&#xff0c;那么本节我们就来了解一下链表具体有什么用&#xff0c;可以解决哪些实质性的问题&#xff0c;我们借用习题来加强对链表的理解&#xff0c;那么废话不多说&#xff0c;我们正式进入今天的学习 单链表相关经典算法O…

【CSS】利用Vue实现数字翻滚动画效果

利用Vue实现数字翻滚动画效果 在很多数据可视化的需求中&#xff0c;动态呈现数据变化是一个常见且具有较强视觉冲击力的手段&#xff0c;尤其是数字的实时变化。今天我们将探讨如何使用 Vue.js 和 CSS3 来实现数字的翻滚动画效果&#xff0c;即模拟真实物体在Z轴上翻动的效果…

WPS 365开启企业一站式AI办公;联发科推出生成式AI服务平台;马斯克:AI 明年或超越人类智力

WPS 365 升级一站式 AI 办公 昨日&#xff0c;金山办公生产力大会举行&#xff0c;现场发布了面向组织和企业的办公新质生产力平台 WPS 365&#xff0c;其包含升级的 WPS Office、最新发布的 WPS AI 企业版和 WPS 协作。 WPS 365 将能覆盖一个组织日常办公基本需求&#xff0c…

Java快速入门系列-6(数据库编程与JDBC)

第六章:数据库编程与JDBC 6.1 SQL基础6.1.1 SQL基本结构与命令6.1.2 SQL高级查询6.1.3 SQL子查询与联接6.2 JDBC原理与使用6.2.1 JDBC驱动程序与URL6.2.2 Statement、PreparedStatement与CallableStatement6.2.3 数据库事务处理6.3 数据库连接池6.4 事务管理6.1 SQL基础 SQL(…

2. Spring的创建和Bean的存取

经过前面的学习我们已经大体明白了 IOC 思想以及它的实现方式 DI &#xff0c;本节要讲的是如何Spring框架实现实现DI。 本节目标&#xff1a; Spring(Core) 项目创建将对象存储到 Spring 中将对象(bean)从 Spring 中取出 1. 创建 Spring 项目 与开篇演示的 Spring Boot 项目不…

TiDB MVCC 版本堆积相关原理及排查手段

导读 本文介绍了 TiDB 中 MVCC&#xff08;多版本并发控制&#xff09;机制的原理和相关排查手段。 TiDB 使用 MVCC 机制实现事务&#xff0c;在写入新数据时不会直接替换旧数据&#xff0c;而是保留旧数据的同时以时间戳区分版本。 当历史版本堆积过多时&#xff0c;会导致读…

在Linux终端查找指定类型的文件并统计数量

下面举例说明&#xff1a; find /path/to/directory -type f -exec file {} \; | grep "MIDI"它的作用是在指定的目录&#xff08;/path/to/directory&#xff09;中搜索所有的文件&#xff08;-type f&#xff09;&#xff0c;然后使用file命令检查每个文件的类型&a…

【C++学习】C++11新特性(第二节)—— 右值引用与移动语义超详解

文章目录 文章简介二.右值引用1.什么是左值&#xff0c;什么是右值&#xff1f;什么是左值引用&#xff0c;什么是右值引用&#xff1f;2.左值引用与右值引用比较 三.右值引用使用场景和意义1.左值引用的使用场景&#xff1a;2.左值引用的短板&#xff1a;3.右值引用与移动构造…

Axure RP中的相关概念及高保真原型构建方法

1 Axure RP中概念介绍 对于构建高保真原型来说&#xff0c;需要知道事件&#xff08;Event&#xff09;、Case、Action等概念。Axure RP中给出这些概念&#xff0c;是为了方便原型的构建&#xff0c;尤其是高保真原型的构建。 事件&#xff08;Event&#xff09;是附着于控件…

PHP自助建站系统,小白也能自己搭建网站

无需懂代码&#xff0c;用 自助建站 做企业官网就像做PPT一样简单&#xff0c;您可以亲自操刀做想要的效果&#xff01; 自助建站是一款简单、快捷、高效的工具&#xff0c;可以帮助您制作响应式网站。我们的自助建站系统&#xff0c;将传统的编码工作转化为直观的拖拽操作和文…

buuctf之jarvisoj_level2

一、查看属性 首先还是必要的查看属性环节&#xff1a; 可以知道该文件是一个x86架构下的32位小段ELF程序&#xff0c;开启了栈不可执行&#xff08;NX&#xff09;保护&#xff0c;ret2shellcode是不行的 简单执行可以看到有一个简单的输入后输出hello world 二、静态分析 …

程序员学CFA——数量分析方法(二)

数量分析方法&#xff08;二&#xff09; 数理统计基础统计学的基本概念描述性统计学与推断性统计学总体与样本四种度量尺度名义尺度排序尺度区间尺度比率尺度 数据的展现频率分布直方图与频数多边形 中心趋势均值算术平均几何平均调和平均数加权平均 中位数众数 离散程度绝对离…