纯CSS实现div中的两个滑动div展示
效果： 
文章图片
代码：
html：
hello
worldcss：
#main{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:200px;
height:200px;
background:#ddd;
overflow:hidden;
}
.txt{
position:absolute;
width:200px;
height:200px;
text-align:center;
line-height:200px;
transition:all 0.6s;
top:0;
left:0;
font-size:30px;
}
.one{
background:tomato;
}
.two{
top:200px;
background:skyblue;
}
#main:hover .one{
top:-200px;
}
#main:hover .two{
top:0;
}
【纯CSS实现div中的两个滑动div展示】原理：对元素的left属性进行动态的调整，并且在主布局中利用overflow:hidden对超出部分进行隐藏
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM