CSS 让hover效果平滑过渡回初始状态?

白瑕

已于 2022-10-31 23:31:21 修改

阅读量2.5k

点赞数 5

分类专栏： CSS 文章标签： css html html5 css3

于 2021-09-24 20:26:31 首次发布

本文链接：https://blog.csdn.net/qq_52697994/article/details/120461670

版权

让hover效果平滑过渡回初始状态?

文章目录

让hover效果平滑过渡回初始状态?
前言
一、原因分析
二、解决方案
附整的活
总结

前言

实现CSS伪类效果结束时的平滑效果.

一、原因分析

在这里插入图片描述
hover中的transition在鼠标划过时被触发,但在鼠标离开后,hover中的CSS样式瞬间消失,导致动画消失并且样式直接回到无hover状态.

二、解决方案

因此,如果直接将一个同样的transition样式写入非伪类触发状态下的样式中,那么hover伪类触发结束后,该非触发状态下的transition依然可以接续hover下transition的功能,支撑动画执行完成.

但是由于非伪类触发状态下没有动画指令所以非伪类触发状态下不会有动画效果;

由于非伪类触发状态下的样式会直接应用到触发伪类的状态中,所以transition直接写到非hover状态下的样式,而在hover状态下直接书写动画效果即可.
即不会出现鼠标移出后动画被打断的情况:

div{
   
  width: 100px;
  height: 100px;
  border:1px solid;
  margin:0px auto;
  margin-top: 200px;
  transition: all 1s linear;
}

div:hover{
   
  transform: scale(2);
}

附整的活

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白瑕

关注关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
CSS 让hover效果平滑过渡回初始状态?

CSS 让hover效果平滑过渡回初始状态
复制链接

扫一扫

专栏目录

CSS3实现伪类hover离开时平滑过渡效果示例

12-13

由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met

php hover,CSS3实现hover离开时平滑过渡的实例详解

weixin_39639622的博客

03-25

560

本篇文章主要介绍了CSS3实现伪类hover离开时平滑过渡效果示例，具有一定的参考价值，有兴趣的可以了解一下由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。离开时效果生硬p{width: 100p...

2 条评论您还未登录，请先登录后发表或查看评论

css鼠标移入图片缩放, 移出恢复原样

热门推荐

不负好时光

10-19

2万+

前端菜鸟记录一下，备忘效果如下图：代码： <div class="policy-center-list-li"> <img th:src="@{/img/front/policyCenter/aaaa.jpg}" > <div class="text-box"> <div class="policy-list-desc"> 长三角双创示范基地联盟签订双创券通用通兑合作协议 </

css 之:hover显示隐藏过渡

weixin_49511142的博客

02-22

304

问题：使用opacity 进行隐藏后用hover显示会有一个问题，即当鼠标放在已经隐藏的盒子的时候，hover也会触发。前言：我的需求是写一个盒子，鼠标移动上去显示一段文字，但是写完之后发现效果非常僵硬，效果很不好。用这个作为显示隐藏性能会好一些，但是用了这个效果会很僵硬。所以不能使用这个作为隐藏的方法。这个属性，将盒子透明化也是一种隐藏方式并且这个可以加入动画。于是乎完成了我想要的效果。为什么第一次写的时候hover过渡非常僵硬呢，因为用的是。

hover的transition

江湖再见

04-07

1868

相信对于很多初学者，对于css3的transition到底是直接写在选择器上，还是写在选择器的hover上表示疑惑，下面给出两个实例，希望可以为您解惑。 demo1 demo2.demo{ width: 100px; height: 100px; text-align: center; line-height: 100px; border: 10px solid #ccc; bo

web前端之CSS之hover的使用和鼠标移入移出事件的区别、addEventListener、mouseenter、mouseleave、querySelector、split

08-24

4764

web前端之CSS之hover的使用和鼠标移入移出事件的区别、addEventListener、mouseenter、mouseleave、querySelector、split

详解CSS背景渐变图片transtion过渡效果技巧

09-27

本文将详细介绍如何利用CSS的`transition`属性来实现背景渐变图片的平滑过渡效果，尽管`background-image`本身并不支持`transition`，但我们可以通过其他策略来达成这一目标。一、背景渐变图片与`transition`的...

用css实现的灰度/原色连接效果

10-30

a.xx:link伪类用于设置链接的初始状态，a.xx:visited伪类用于设置链接的访问状态，而a.xx:hover伪类用于设置链接的 hover 状态。在a.xx:hover伪类中，我们使用了filter: Chroma(Color=#)来实现从灰度图像到原色...

超链接点击移动至上方以及点击过的css效果设置

09-25

在CSS中，为了保证样式正确应用，一般遵循这四个状态的特定顺序：`L-V-H-A`，即`link`-`visited`-`hover`-`active`。这是因为`:active`优先级最高，`:hover`次之，以此类推。如果顺序错误，可能会导致某些样式无法...

CSS滤镜实现的颜色渐变翻转效果

09-25

然后通过`transition`属性设置了过渡效果，当鼠标悬停在元素上时，这些属性将平滑地改变。`transition-property`指定了哪些属性应该有过渡效果，如宽度、高度、变换、背景、字体大小和不透明度；`transition-...

Web页面中5种超酷的Hover效果分享

09-25

实现方法是通过CSS的`transition`属性设置元素的初始`margin`，并在`:hover`状态下改变`margin-top`的值。透明度的变化可增加视觉平滑度，但不是必需的。以下是示例代码： ```css .ex1 img{ border: 5px solid #...

css hover变成手_CSS3 transition属性实现hover渐变动画效果

weixin_39713763的博客

12-19

211

我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的，实际上现在CSS3也能实现很多类似效果了，只是在各种浏览器中兼容性稍差，想要追求简单极致的效果，就要失去兼容性，而且随着时间变迁，浏览器标准终究可能还是要统一的。CSS3的Transition属性，这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。transition:...

CSS:hover常见问题及用法

qq_54334713的博客

04-12

9229

目录 hover定义 hover用法 hover问题后记 hover定义 :hover 选择器用于选择鼠标指针浮动在上面的元素 hover用法控制自身样式 <div class="aa"></div> <style> aa:hover { background-color:yellow; } </style> 父元素控制子元素 <div class="parent"> <div cl

CSS3实现鼠标hover的过渡效果

aizhanqian5077的博客

11-23

788

我想让鼠标放在div上就让它旋转变大，离开div后它又恢复本来的样子。于是我就想写一个JS，监听一个hover事件，当hover发生的时候，触发一个计时器，在计时器里写两个值，一个管角度，一个管宽度，随着时间的变化逐渐增加，不断地重写div的style。当达到我期望的limit的值后让它停止（或者干脆解除计时器）。再监听一个leave事件，当leave发生后，让一切以它原来的st...

子元素hover离开时的平滑过渡效果

biubiubiu

04-11

3929

hover时设置的效果离开时平滑过渡： <!DOCTYPE html> <html> <meta charset="UTF-8" /> <title>hover平滑过渡效果</title> <head> <style> div { width: 100px; heig...

CSS3过渡动画实现hover人物弹出炫酷效果案例

qq_38836435的博客

06-18

1926

目标我们要实现的目标效果如下过渡如何使用可以清楚地看出效果图中的效果用到了css3中的过渡transition，先来了解一下transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果过渡共有四个属性，分别是： transition-property：规定应用过渡的 CSS 属性的名称 transition-duration：定义过渡效果花费的时间。默认是 0 transition-timing-function：规定过渡效果的时间曲线。默认是 “ease” transi

css:hover用法（8）transform位移、缩放、旋转效果(hover、transition、trasform)

jieweiwujie的博客

09-02

640

transform位移、缩放、旋转效果(hover、transition、trasform)

css hover button 特效翻滚

01-26

CSS Hover Button 特效翻滚是一种常见的网页设计特效，它可以使按钮在鼠标悬停时实现翻滚的动画效果。要实现这种特效，首先需要在CSS中定义按钮的样式和动画效果。通过:hover伪类选择器，可以设置按钮在鼠标悬停时的样式变化。一种常见的实现方法是使用transform属性来实现按钮的翻滚效果。通过设置按钮的初始状态和悬停状态下的transform属性数值，可以实现按钮在鼠标悬停时的旋转、缩放或位移动画效果。除了transform属性，也可以利用transition属性来设置按钮状态变化的过渡效果，使按钮的翻滚动画更加平滑自然。此外，还可以利用CSS3动画技术来实现更加复杂的按钮翻滚特效，例如利用@keyframes关键帧动画来定义按钮的翻滚轨迹和时长，从而创建出更加生动、多样的翻滚效果。总之，通过CSS Hover Button 特效翻滚，可以为网页设计增添更加生动、美观的按钮交互效果，提升用户体验。同时，借助CSS3的强大特性，设计者可以灵活运用各种属性和动画技术，实现各种想要的按钮翻滚特效，使网页设计更加丰富多彩。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交

CSS 让hover效果平滑过渡回初始状态?

让hover效果平滑过渡回初始状态?

文章目录

前言

一、原因分析

二、解决方案

附 整的活

“相关推荐”对你有帮助么？

附整的活