前端CSS练习：transition过渡小动画-一一网

“这是我参与更文挑战的第7天，活动详情查看：更文挑战”

找了4张等宽高的图片，如果不是等宽高的，需要在样式中固定宽高

用ul包含4个li，每个li包含一个图片和一段描述

ul设置宽度80%，margin：0 auto居中，又设最小宽度，还有flex布局站一排，
li设置border，圆角，超出隐藏，
li之间空隙margin：10px，
li下方有白色空隙，ul设置font-size为0，去掉空白，再设li下的文字字号
li下文字的颜色，背景，padding值，
文字存于li底部，设置position，
效果：
在这里插入图片描述
然后加动画：页面刷新时，4张图片逐个从下往上充满框框，当鼠标hover在图片上时，下方的描述也从下往上显示出来

图片从下往上：
从下往上，所以设置一开始的图片是在框框下面的，也就是translateY(100%);，并且框框是黑色的，所以li的背景设一下

每张图片依次显示出来，说明要给每个图片单独设置延迟时间
如何找到li下的img呢？
如果用ul li img:nth-child(1), ul li img:nth-child(2)找到的都是第一个child，因为这个方法找的是li下第n个img child，但li下都只有一个img，每一个img都是离它最近的父级li的第一个子img元素，所以设置了这些，只有nth-child(1)生效，且作用于所有的img，没有依次展现的效果
每个img都是：
在这里插入图片描述
所以应该先找到第n个li，找到li再找img，li没有找错，底下又各自只有一个img，解决

ul li:nth-child(1) img {
}
复制代码

描述文字从下往上：
一开始描述也在框框下面，当hover时，translateY(0)，并且有过渡时间

完整代码：

<style>
        ul {
            width: 80%;
            margin: 0 auto;
            min-width: 600px;
            display: flex;
            font-size: 0;
        }
        li {
            position: relative;
            list-style: none;
            display: inline-block;
            border: 2px solid black;
            border-radius: 20px;
            overflow: hidden;
            margin: 0 10px;
            background: rgba(0,0,0,0.8);
        }
        li img {
            width: 100%;
            border-radius: 20px;
            transform: translateY(100%);
            transition: transform 1s linear;
        }
        .cover {
            position: absolute;
            bottom: 0;
            left: 0;
            overflow: hidden;
            width: 100%;
        }
        .des {
        	height: 44px;
        	text-align: center;
        	line-height: 44px;
            font-size: 12px;
            background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
            padding: 10px;
            color: #000;
            transform: translateY(100%);
            transition: transform 0.3s;
        }

        .init img {
            transform: translateY(0);
        }
        ul li:nth-child(1) img{
            transition-delay: 0;
        }
        ul li:nth-child(2) img{
            transition-delay: 0.2s;
        }
        ul li:nth-child(3) img{
            transition-delay: 0.4s;
        }
        ul li:nth-child(4) img{
            transition-delay: 0.6s;
        }

        li:hover .des {
            transform: translateY(0);
        }
    </style>
复制代码

<body>
    <ul>
        <li>
            <img src="./transition-demo/1.jpg" alt="">
            <div class="cover">
                <div class="des">描述描述描述描述描述描述描述</div>
            </div>
        </li>
        <li>
            <img src="./transition-demo/2.jpg" alt="">
            <div class="cover">
                <div class="des">描述描述描述描述描述描述描述</div>
            </div>
        </li>
        <li>
            <img src="./transition-demo/3.jpg" alt="">
            <div class="cover">
                <div class="des">描述描述描述描述描述描述描述</div>
            </div>
        </li>
        <li>
            <img src="./transition-demo/4.jpg" alt="">
            <div class="cover">
                <div class="des">描述描述描述描述描述描述描述</div>
            </div>
        </li>
    </ul>
    <script>
        var oUl = document.getElementsByTagName('ul')[0];
        window.onload = function (){
            oUl.className = 'init';
        }
    </script>
</body>
复制代码