CSS滑块

最新推荐文章于 2024-05-28 09:53:05 发布

枫哥哥的博客

最新推荐文章于 2024-05-28 09:53:05 发布

阅读量444

点赞数 1

分类专栏： CSS 文章标签： CSS滑块

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS滑块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片动画</title>
    <style type="text/css">
        .box{
            /* 设置盒子的大小 */
            width: 600px;
            height: 600px;
            /* 居中 上端距离 */
            margin: 10px auto 0;
            border: 1px solid pink;
            /* 相对定位 */
            position: relative;
            /* 初始时，隐藏 */
            overflow: hidden;
        }

        .box img{
            /* 设置图片的大小 */
            width: 600px;
            height: 600px;
        }

        .box .pic_info{
            /* 设置背景大小，即宽、高 */
            width: 600px;
            height: 200px;
            /* 背景颜色、透明度 */
            background:rgba(0,0,0,0.5);
            /* 控制字体颜色 */
            color: #fff;
            /* 绝对定位 */
            position: absolute;
            left: 0;
            /* 定位在图片的低端，即与图片的顶端相对的距离 */
            top:600px;
            /* 移动的方向、速度、过渡方式 */
            transition: all 500ms ease;
        }

        .box:hover .pic_info{
            /* 鼠标移动时，背景色移动，距离图片顶端相聚400px */
            top: 400px;
        }


    </style>
</head>
<body>
    <div class="box">
        <img src="images/20161226212741.JPG" alt="图片">
        <div class="pic_info">图片说明：这是一个风景图</div>
    </div>
</body>
</html>