首页 > 其他分享 >css过渡动画,鼠标移上去就变大(缓慢变大、过渡效果、放大的过程是过渡动画的,这个过渡动画是有时间控制的)

css过渡动画,鼠标移上去就变大(缓慢变大、过渡效果、放大的过程是过渡动画的,这个过渡动画是有时间控制的)

时间:2023-03-26 11:32:44浏览次数:42  
标签:1.4 动画 scale 移上去 transition transform 0.6 过渡

1).CSS3的transform:scale()可以实现按比例放大或者缩小功能。

2).CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

3).transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

4)transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
  width: 300px;
  height: 300px;
  border: #000 solid 1px;
  margin: 50px auto;
  overflow: hidden;
}
div img{
  cursor: pointer;
  transition: all 0.6s;
}
div img:hover{
  transform: scale(1.4);
}
</style>
</head>
<body>
  <div>
    <img src="img/focus.png" />
  </div>
</body>
</html>

 



标签:1.4,动画,scale,移上去,transition,transform,0.6,过渡
From: https://blog.51cto.com/u_15740575/6150001

相关文章

  • 过渡效果
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......
  • 动画
    动画动画是使元素从一种样式逐渐变化另一种样式的效果你可以改变任意多的样式任意多的次数请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%0%......
  • 关于在 vue 3 和 vue router 中使用 transition 过渡动效的 mode 属性导致页面跳转空
    先放结论:不要在路由组件的template块中使用多个根标签,注释也不行。今天碰到一个奇葩的问题,后端告诉我说,进入特定页面后,跳转其他页面均会白屏,刷新后就会加载。一开始我......
  • CSS3动画
    动画动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自......
  • 【动画消消乐】纯CSS加载/过渡动画学习笔记合集(1-50)
    Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~自我介绍一下ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转......
  • 模型动画
    多个动画如果模型有多个动画剪辑,您可以为每个剪辑创建一个新的AnimationAction对象,并使用AnimationMixer对象控制它们的播放。例如,如果您的模型有两个动画剪辑,您可以按以......
  • 微信小程序实现旋转动画
     还是css3实现的效果:.transfBg{position:absolute;width:480rpx!important;height:480rpx!important;left:50%;top:50%;margin:-240rpx0......
  • CSS3实现的线条波浪动画效果
    阅读目录阐述HTML结构CSS样式预览阐述这是一款使用CSS3animation动画和png图片制作的css3线条波浪动画效果。该特效中,使用了3张波浪线条的png图片,以及少量的CSS......
  • 英雄联盟比赛选手的六芒星能力图动画是如何制作的?
    最近,在看LPL比赛的时候,看到这样一个有意思的六芒星能力图动画:今天,我们就来使用纯CSS实现这样一个动画效果!实现背景网格对于如下这样一个背景网格,最好的方式当然肯......
  • 一统天下 flutter - 动画: Animation - 动画基础(以直线型动画为例)
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-动画:Animation-动画基础(以直线型动画为例)示例如下:lib\animation\a......