本文介绍了一个CSS小练习，展示了如何利用相对定位、背景大小调整、伪元素和绝对定位等技巧，创建鼠标悬停时的图片特效。通过设置CSS属性如`background-size: cover;`、`transform: rotate() translateX() scale();`和`line-height`，实现了图片的等比例缩放、旋转和平移效果。同时，使用`nth-child()`选择器和伪元素`:before`、`:after`来增强视觉效果。
深夜小练习
涉及知识点：
- position:relative;/相对定位 只给定位不给值的时候 对元素本身没有任何影响
- background-size:cover;/cover 等比例的放大缩小图片 直到占满盒子
- ul li:before，ul li:after/伪元素 通过样式给元素添加内容/
- position:absolute;/绝对定位 相对于已经定位的父元素 脱离文档流(在页面中不占位置)
- transform:rotate(45deg) translateX(-320px) scale(1.8);/transform变换 rotate旋转 deg角度 translateX位移
- line-height:45px;/特性:当值等于此元素的高度的时候 可以元素内一行文字上下居中/
- ul li:nth-child(1)/css3 新增 选择第几个子元素 /
效果图：
以放代码：
html
<body>
<ul>
<li>
<div>
<h3>大橘猫</h3>
<p>十个橘猫九个胖，还有一个非常胖</p>
</div>
</li>
/*此处省略后五个li*/
</ul>
</body>css
*{
margin: 0;
padding: 0;
}
ul{
width: 660px;
height: 440px;
margin: 
扫一扫
6082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
