html鼠标悬浮缩放,CSS3鼠标悬浮过渡缩放效果

以下为一个纯css写的图片鼠标悬浮缩放效果，其实基本原理十分简单，我们访问一些网站可以发现他们都会对图片做一些交互效果的处理，当然实现图片过渡效果有很多方式，例如使用JQuery或者一些第三方js动画库，本例仅是展示基本的效果，不对所用知识进行归纳。

代码如下：

Document

* {

box-sizing: border-box;

}

body {

background-color: rgb(251, 163, 163);

}

/* 长条图样式 */

.containlist {

position: relative;

margin-top: 100px;

margin-left:10%;

height: 100px;

width: 80%;

overflow: hidden;

border-radius: 30px;

box-shadow: rgb(54, 53, 53) 10px 10px 10px;

}

.list {

position: absolute;

width: 100%;

height: 100%;

background-position: center;

background-size: cover;

border-radius: 30px;

transition: 0.5s;

color: white;

font-weight: bold;

text-align: center;

}

.list:hover {

transform: scale(1.2);

}

效果测试

和服の少女

天空の鏡

紫の景色

私は一番可愛いです

实际效果：

git图

图片的样式可以自行进行更改，打造你自己的中二风格。

到此这篇关于CSS3鼠标悬浮过渡缩放效果的文章就介绍到这了,更多相关css3鼠标悬浮过渡缩放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！