怎么让一张图片,鼠标移动过去之后放大->然后到原本那样,再2秒中进行这个过渡。怎么打这个代码呢?
img {
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}
img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
描述不清楚,你是图片大小不变,只是内部放大吗?如果是的话用负margin解决
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
margin: 50px;
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: hidden;
}
.pox{
width: 200px;
height: 200px;
background-color: red;
transition: all 0.4s ease;
vertical-align: top;
}
.box:hover .pox{
margin: -25px 0 0 -25px;
width: 250px;
height: 250px;
}
.box2{
margin-bottom:-1px;
border:1px solid #6C92AD;
border-bottom:none;
background:#EAF0FD;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<img src="2.jpg" alt="" class="pox"/>
</div>
</body>
</html>
img{transform:scale(1);}
img:hover{transform:scale(1.5);transtion: all 2s ease}
这样写就可以实现、
直接上代码:
.img:hover{
animation: scale 2s ease-in-out
}
@keyframes scale{
50%{
transform:scale(2)
}
to{
transform:scale(1)
}
}
亲测有效
img{
width:100px;
height:100px;
}
img:hover{
width:200px;
height:200px;
transition:width 2s,height 2s;
}
https://jsfiddle.net/cdk244fp/
这是否是你想要的效果?
div{
background:url(http://www.w3school.com.cn/i/bg_flower.gif) no-repeat;
background-position:center;
width:200px;
height:250px;
transition:all 2s;
background-size:60%;
}
div:hover{
background-size:120%;
}
这个问题涉及css3两个知识点
1.animation 与 keyframes 关键帧
2.transform 的 scale 缩放
解决方案 2
使用transition 和transform 实现动画在鼠标离开后,元素回到原来的状态
html
<div class="box"></div>
css
.box{
width: 200px;
height: 200px;
background: red;
transition:all 2s; //设置时间
}
.box:hover{
transform:scale(1.2); //设置缩放比例
}
解决方案 1
1.设置关键帧
@keyframes box{
0%{
transform:scale(1,1);
}
50%{
transform:scale(2,2); //x,y都放到2倍
}
100%{
transform:scale(1,1);
}
}
2.设置hover样式
.box:hover{
animation: 2s box; //动画时间2s
}
img {
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
transition: all 2s ease-out;
}
img:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读