CSS小练习之鼠标hover图片特效

最新推荐文章于 2024-05-14 10:41:51 发布

救护用的垃圾车

最新推荐文章于 2024-05-14 10:41:51 发布

阅读量2.7k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/DeepHugY/article/details/80788286

版权

深夜小练习

涉及知识点：

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;

最低0.47元/天解锁文章

救护用的垃圾车

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS小练习之鼠标hover图片特效

深夜小练习涉及知识点：position:relative;/相对定位只给定位不给值的时候对元素本身没有任何影响background-size:cover;/cover 等比例的放大缩小图片直到占满盒子ul li:before，ul li:after/伪元素通过样式给元素添加内容/position:absolute;/绝对定位相对于已经定位的父元素脱离文档流...
复制链接

扫一扫