网页刚进去有一个大图片用鼠标点一下大图片向上下分开,或者消失,这种效果可以做出来吗不用js,
1条回答 默认 最新
- CSDN专家-天际的海浪 2021-11-24 00:58关注
把大图片分成上下两个图片,在js中设置鼠标点击事件用css动画让两个图片向上下分开
不用js的
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title> </head> <style type="text/css"> html,body { padding: 0; margin: 0; height: 100%; } @keyframes anim1{ 0% {transform: translatey(0%);} 100% {transform: translatey(-100%);} } @keyframes anim2{ 0% {transform: translatey(0%);} 100% {transform: translatey(100%);} } #label { position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; } #imgbox { width: 100%; height: 100%; overflow: hidden; } #upimg { width: 100%; height: 50%; background: #099 url("a.jpg") no-repeat top; background-size: 100vw 100vh; } #dnimg { width: 100%; height: 50%; background: #099 url("a.jpg") no-repeat bottom; background-size: 100vw 100vh; } #che { display: none; } #che:checked + div #upimg { animation: anim1 5s forwards; } #che:checked + div #dnimg { animation: anim2 5s forwards; } #che:checked + div + label { display: none; } </style> <body> <input type="checkbox" id="che" /> <div id="imgbox"> <div id="upimg"></div> <div id="dnimg"></div> </div> <label for="che" id="label"> </label> </body> </html>
如有帮助,望采纳!谢谢!
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 MATLAB动图的问题
- ¥15 求差集那个函数有问题,有无佬可以解决
- ¥15 【提问】基于Invest的水源涵养
- ¥20 微信网友居然可以通过vx号找到我绑的手机号
- ¥15 寻一个支付宝扫码远程授权登录的软件助手app
- ¥15 解riccati方程组
- ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
- ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
- ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
- ¥50 树莓派安卓APK系统签名