八大经典优雅的CSS鼠标悬浮动画-hover属性

最新推荐文章于 2024-09-14 08:13:21 发布
最新推荐文章于 2024-09-14 08:13:21 发布
阅读量4.7w 收藏 312
点赞数 72
分类专栏： CSS 文章标签： 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62650212/article/details/123912722
版权

CSS 动画效果 鼠标悬浮 代码示例 前端开发
关键词由CSDN通过智能技术生成

相信大家也有为自己做的hover效果不太满意的，本文给大家介绍几款不错的css鼠标悬浮动画，老规矩，复制粘贴即用。

1.Grow-Shadow

效果：

在这里插入图片描述

代码：
/* Grow-Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

2.Grow

效果：

在这里插入图片描述

代码：
/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

3.Shrink

效果：

在这里插入图片描述

代码：
/* Shrink */
.hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

Float

效果：

在这里插入图片描述

代码：
/* Float */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

5.Float Shadow

效果：

在这里插入图片描述

代码：
/* Float Shadow */
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

6.Curl Bottom Right

效果：

在这里插入图片描述

代码：
/* Curl Bottom Right */
.hvr-curl-bottom-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.hvr-curl-bottom-right:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.hvr-curl-bottom-right:hover:before, .hvr-curl-bottom-right:focus:before, .hvr-curl-bottom-right:active:before {
  width: 25px;
  height: 25px;
}

7.Bubble Float Right

效果：

在这里插入图片描述

代码：
/* Bubble Float Right */
.hvr-bubble-float-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-bubble-float-right:before {
  position: absolute;
  z-index: -1;
  top: calc(50% - 10px);
  right: 0;
  content: '';
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #e1e1e1;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-bubble-float-right:hover, .hvr-bubble-float-right:focus, .hvr-bubble-float-right:active {
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}
.hvr-bubble-float-right:hover:before, .hvr-bubble-float-right:focus:before, .hvr-bubble-float-right:active:before {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

8.Box Shadow Inset

效果：

在这里插入图片描述

代码：
/* Box Shadow Inset */
.hvr-box-shadow-inset {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hvr-box-shadow-inset:hover, .hvr-box-shadow-inset:focus, .hvr-box-shadow-inset:active {
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
css3基础3-变形和动画
superjunjin的专栏
07-12 522
八，CSS3变形 1，旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 示例：将文本旋转回到原来水平位置。 html: <!DOCTYPE html> <html...
CSS动画|hover动画|border动画
10-22
css动画，hover触发border动画
5种纯CSS3鼠标hover按钮动画效果
12-13
这是一款鼠标hover按钮动画特效。该特效共有5种hover动画效果，它们在结构布局上使用flex来进行布局，并通过css transition来实现动画效果。
CSS中如何实现鼠标悬停效果？
最新发布
z16638522031的博客
09-14 756
在这个例子中，我们创建了一个名为.hover-effect的类，并在其中设置了默认的文本颜色（color: black;）和背景颜色（background-color: white;接着，我们使用:hover伪类为悬停时的文本颜色和背景颜色分别设置为白色和蓝色。当您将鼠标悬停在<div>元素上时，将看到这些颜色的变化。在选择器所匹配的元素上时应用指定的样式。在CSS中，您可以使用。来实现鼠标悬停效果。
CSS实现简单Hover动画
Yann‘s的博客
08-11 8474
CSS实现简单Hover动画 这是第二次制作网页相关的东西，是跟着慕课教程上做的。总之看来看来还有很长一条路要走啊。先看今天的成果： 代码部分，css样式我就放在了html文件里面了： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt; CSS效果&lt;/t..
【CSS】悬浮动画
qq_45677671的博客
07-08 909
css 悬浮动画
CSS3制作hover下划线动画
weixin_30840253的博客
04-04 286
1、前几天看到Hexo的next主题标题hover效果很炫，自己尝试写了一个，另一个是next的实现，照例先上图 　　 2、实现小黑科技 1 <!-- html结构 --> 2 <div> 3 <a href="javascript:void(0);" class="demo1">自己实现的hover效果</a> 4 <...
使用CSS伪元素制作动感超酷的hover动画
J_Sky：编程爱好者,又菜又爱玩.
05-07 1597
css 有很多神奇的效果都是使用 CSS 伪元素利用视觉差来制作的，以前没怎么深入的研究过 css，这次复习 css 的知识点才恍然大悟，原来 css 这么 cool。
Hover小动画
HcwDavid12的博客
09-29 379
h3{ margin-left: 20px;font-size: 1.2em; } h5{ margin: 10px 0 10px 30px; } .hover-box, .color-box, .anima-box{ border: 2px solid #333; } .main-container span{ display: inline-block; height: 40px; min-width: 80px; line-height: 40px; text-
Hover.css鼠标悬停动画
ICode联盟
07-11 508
下载地址Hover.css是一个丰富的动画库，各种css鼠标悬停动画效果。dd:
鼠标悬浮样式
m0_62094741的博客
11-13 1986
cursor 属性规定要显示的光标的类型（形状）。 1、default 默认光标(通常是一个箭头) 2、auto 默认。浏览器设置的光标。 3、crosshair光标呈现为十字线。 4、pointer 光标呈现为指示链接的指针(-只手) 5、move 此光标指示某对象可被移动。 6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。 7、ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。 8、nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。
最强9种css3圆形按钮hover鼠标经过动画效果
08-10
只要很少的资源分，不要花钱买
HTML鼠标悬浮增加亮度,利用css实现hover动态效果
weixin_39988930的博客
06-04 2464
.font em:hover { font-size: 2em }.font strong:hover { font-weight: normal }.font span:hover { color: blue }.transform * { }.transform em:hover { }.transform span:hover { }.background { width: 200px; h...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6581
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
-css3高级技术(p)
rocktanga的博客
10-12 397
layout: post title: “CSS3高级技术” categories: css tags: css3 excerpt: 这篇文章是写一些css3常用的高级特性的，很好用 对于这些css3属性，在用百分数设置值的时候，都是相对于元素自身的宽高设置的 一、box-shadow(是给元素块添加周边阴影效果影)投影 box-shadow的原理是：在元素的原位置模一个和原元素一样大的阴影，然后再为这个阴影设置其他一些东西。 (1)浏览器支持: IE9+、Firefox 4、Chrome、Op.
八、CSS新特性二
weixin_42710036的博客
02-22 352
CSS新特性二
6种css3鼠标滑过动画效果
哈哈hyc的博客
09-27 4350
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;6种css3鼠标滑过动画效果&lt;/title&gt; &lt;style type="text/css"&gt; /*****全局样式*****/ * { padding
CSS3 transition属性和Hover效果
GrahamACER的博客
09-14 3307
w3cschool上其实有很详细的基本属性内容： transition:【属性】【变换延续的时间 】【速率】 属性怎么理解…假如有一个div宽度是200px .
CSS八种让人眼前一亮的HOVER效果，Web开发必看
2401_84091628的博客
04-03 1507
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-4yiwRSKS-1712090566242)][外链图片转存中…(img-qSzhFW3T-1712090566242)]
鼠标悬浮给background-size添加过渡动画
04-04
可以使用CSS3的transition属性来为background-size添加过渡动画。 首先，定义一个类名，比如hover-bg： ``` .hover-bg { background-size: 100% auto; transition: background-size 0.5s ease-in-out; } ``` 然后，在需要添加过渡动画的元素上，添加hover事件和hover-bg类名： ``` <div class="box" onmouseover="this.classList.add('hover-bg')" onmouseout="this.classList.remove('hover-bg')"> ... </div> ``` 这样，在鼠标悬浮到这个元素上时，background-size属性会从默认值（比如cover）过渡到100% auto，过渡时间为0.5秒，动画效果为缓进缓出。当鼠标移开时，过渡反向进行，效果如图所示： ![background-size transition](https://i.stack.imgur.com/yWZQ2.gif)
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Python斗罗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值