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

深夜小练习

涉及知识点：

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: 200px auto;
}

ul li{
    width: 198px;
    height: 200px;
    float: left;
    margin: 10px 10px;
    list-style: none;
    position: relative;
    overflow: hidden;
}
div{
    width:100%;
    height:0px;
    background: rgba(77, 70, 72, 0.5);
    color: bisque; 
    overflow: hidden;
    position: absolute;
    top: 50px;
    text-align: center;
    transform: rotate(45deg);
    transition:0.7s 0.2s;
    z-index: 1;
}
h3{
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-bottom:  1px solid #fff;
}
p{
    text-align: center;
    margin-top: 10px;
}
ul li::before,ul li::after{
    content: "";
    width: 200px;
    height: 200px;
    background:rgba( 150, 50, 100,0.5);
    position: absolute;
    transition: 0.7s;
}
ul li::before{
    transform: rotate(45deg) translateX(-295px) scale(1.5);
}
ul li:hover::before {
    transform: rotate(45deg) translateX(-130px) scale(1.5);
}
ul li::after{
    transform: rotate(45deg) translateX(295px) scale(1.5);
}
ul li:hover::after{
    transform: rotate(45deg) translateX(130px) scale(1.5);
}
ul li:hover div{
    height: 100px;
    transform: rotate(0deg);
}

ul li:nth-child(1){
    background-image: url(imgs/1.jpg);
    background-size: cover;
}
ul li:nth-child(2){
    background-image: url(imgs/2.jpg);
    background-size: cover;
}
ul li:nth-child(3){
    background-image: url(imgs/3.jpg);
    background-size: cover;
}
ul li:nth-child(4){
    background-image: url(imgs/4.jpg);
    background-size: cover;
}
ul li:nth-child(5){
    background-image: url(imgs/5.jpg);
    background-size: cover;
}
ul li:nth-child(6){
    background-image: url(imgs/6.jpg);
    background-size: cover;
}

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

猜你喜欢