当前位置：首页 > 网络编程 > CSS/HTML > 详细页面

css实现鼠标放上去时图片过渡转换动画效果

时间：2020-10-11来源：www.pcxitongcheng.com作者：电脑系统城

在这里插入图片描述

代码

?

1
2
3
4 <div class="test">
<div></div>
<div></div>
</div>

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 .test{
width: 200px;
height: 200px;
margin-top: 200px;
margin-left: 300px;
overflow: hidden;
background-color: red;
}
.test div{
width: 100%;
height: 100%;
transition: 500ms;
}
.test div:last-child{
background-color: green;
}
.test:hover div{
transform: translateY(-100%);
}

到此这篇关于css实现鼠标放上去时图片过渡转换动画效果的文章就介绍到这了,更多相关css图片过渡转换动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

相关信息

2023-03-11
vscode文本框怎么设置输入内容与边框的距离?
2020-11-18
dns-prefetch是什么前端优化:DNS预解析提升页面速度
2020-10-11
解决搜索框和搜索按钮button边框不能重合的问题

css一些不常见但很有用的属性操作大全
css一些不常见但很有用的属性操作大全...

2020-10-11
在HTML里加载摄像头的方法
在HTML里加载摄像头的方法...

2020-10-11

热门系统总排行

装机必备

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载