主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
CSS3用hover实现百叶窗动画
2022-08-11
网页编程网
网页编程网
<style> ul,li{margin:0;padding:0;} ul{ display:flex; margin:0 auto; width:960px; height:500px; outline:1px solid black; } li{ width:160px; height:500px; outline:2px solid red; list-style:none; transition:all 1s; overflow:hidden; } ul:hover li{ width:40px; } ul li:hover{ width:760px; } </style> <ul> <li><img src="http://www.youkud.com/game/billiards/image/mainx2.jpg" /></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <pre> 设计思路： 1.有大盒子 2.盒子有6张图，列表 3.图片会动，分二种情况： 鼠标放在li的宽度是760px，其他的是40px，再加延迟时间transition，使其丝滑 4.li中放图片，但图片尺寸过大，在li加overflow 5.删除外框 </pre>
阅读原文
阅读
2743
123
显示电脑版