CSS:鼠标移动到图片上的动画

minguiluo

于 2022-09-30 10:47:00 发布

阅读量447

点赞数

文章标签： css css3 动画前端

本文链接：https://blog.youkuaiyun.com/qq_39547670/article/details/127120409

版权

这篇博客介绍了如何使用CSS实现鼠标悬停时图片放大（scale）的动画效果以及背景的线性渐变变化。通过`.picimg`和`.pic:hover img`选择器，设置`transition`和`transform`属性，轻松创建图片平滑缩放。同时，利用`:hover`伪类和`linear-gradient`实现背景颜色从深蓝到浅蓝的渐变过渡，为网页元素增添动态视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS:鼠标移动到图片上的动画

.pic img
{
	width: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: all .5s;
}             
.pic:hover img
{
	transform: scale(1.1);
	transition: all .5s;
}

CSS背景渐变：

div:hover
{
	background-image: linear-gradient(122deg, #225ed6 0%, #3effff 100%), linear-gradient( #ffffff, #ffffff);
}