【css】css-transform: scale(1.2,1.2)；鼠标放上去图片变大

闲敲棋子落画画

已于 2022-01-22 21:24:18 修改

阅读量576

点赞数

分类专栏： css 文章标签： css

于 2021-10-01 23:03:42 首次发布

本文链接：https://blog.csdn.net/jieweiwuwei/article/details/120581894

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个博客展示了如何在Vue项目中通过CSS和JavaScript实现图片鼠标悬停时的缩放效果。主要涉及Vue组件、CSS过渡及transform属性的应用，创建了一个响应式的图片展示组件，当鼠标 hover 在图片上时，图片会放大1.2倍，提供了一种增强用户体验的方法。

摘要由CSDN通过智能技术生成

<template>
  <div class="hello">
    <div class="img" :src="src"></div>
  </div>
</template>
<script>
export default {
  data(){
	return{
		src:"",
	}
}}
</script>
<style scoped>
.img{
	width: 200px;
	height: 200px;
	overflow: hidden;
}
.img img{
	width: 100%;
	cursor: pointer;
	transition:0.6s;
}
.img img:hover{
	//鼠标放上去放大
	transform: scale(1.2,1.2);
}
</style>