图片文字介绍滑动效果代码介绍

最新推荐文章于 2024-08-18 21:06:49 发布

～～738

最新推荐文章于 2024-08-18 21:06:49 发布

阅读量202

点赞数 1

分类专栏： css 文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_62995761/article/details/125577412

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码
链接
结果展示

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片文字介绍滑动效果</title>
    <style type="text/css">
        * {/*文末有解释*/
            margin: 0;
            padding: 0
        }

        #outter {/* 设置利用的屏幕的宽度 */
            width: 1560px;
        }

        #pn {
            /* 设置了浮动，对应三个的浮动 */
            width: 520px;/*每个图片的宽度*/
            height: 500px;/*每个图片的高度*/
            float: left;/*从左开始排起,直到叠加的width > 1560px   (利用的屏幕的宽度) */
            /*注意：这里的width是没有算上margin的，因为margin为0*/
            overflow: hidden;/*文末有解释*/
            position: relative;/*相对定位*/
        }

        img {
            /*与上面的浮动相对应*/
            /*设置图片的宽度和高度*/
            width: 520px;
            height: 500px;
        }

        p {
            display: block;
            /*转化为块元素 ,这个很重要！！！文末有解释*/
            /*设置成了块元素后才有宽度与高度*/
            width: 520px;
            height: 500px;
            position: absolute;/*绝对定位 : 即相对于相对定位的绝对定位*/
            top: 460px;/*如此：距离相对定位的top距离460px*/

            background-color: rgba(0, 0, 0, 0.3);/*介绍的背景色*/
            padding: 0;
            transition: all 1s linear; /*过渡*/
        }

        p b {
            /* 当没有规定width与height的大小时,就是p的行数为height,width为父元素的width */
            display: block;
            color: aqua;/*粗字体的颜色*/
            text-align: center;/*水平居中*/
            /*下面两行主要是让自己记好 行高!=字体大小 */
            line-height: 40px;/*每行的高度*/
            font-size: 20px;/*字体的大小*/
        }

        p span {
            display: block;
            margin: 10px;/*内距*/
            line-height: 20px;
            color: rgb(226, 223, 223);/*介绍的字体颜色，偏白，与背景颜色相反，便于观看*/
        }
        p:hover {/*当鼠标移动到名字上时*/
            top: 0;/*简介的那块领域到顶*/
        }
    </style>
</head>

<body>
    <div id="outter">
        <div id="pn">
            <img src="桐人背影拔刀.jpg">
            <p>
                <b>桐人</b>
                <span>介绍：桐谷和人，轻小说《刀剑神域》及其衍生作品中的男主角。故事起始开始玩SAO时是14岁， 两年后的故事本篇（此处指脱离SAO后）是16岁。
                    名副其实的重度网络游戏玩家。拥有超群的反射神经和洞察力。因为完全潜行正式版的SAO而被卷入死亡游戏，并以此为开端，牵扯进各种的虚拟世界事件。五官看起来像少女一样纤细，性格却非常冷淡，给人一种“捉摸不定”、“年龄不详”的印象。
                </span>
            </p>
        </div>
        <div id="pn">
            <img src="云瑾.jpg">
            <p>
                <b>云堇</b>
                <span>介绍:云堇，米哈游出品的游戏《原神》及其衍生作品中的角色,“云翰社”现任当家，集剧作与演唱能力于一身的璃月戏曲名角。风格自成一派，雅致柔美，恰如其人 。</span>
            </p>
        </div>
        <div id="pn">
            <img src="爱丽丝.png">
            <p>
                <b>爱丽丝</b>
                <span>爱丽丝·滋贝鲁库是轻小说作品《刀剑神域》Alicization篇中的女主角。金色的长发，小时候一身朴素的打扮。在11岁时和桐人、尤吉欧一起前往终结山脉探险，但在回来的路上不幸触犯了《禁忌目录》，并在次日被带走。后在公理教会受“整合之秘术”影响失去了之前的记忆，成为了侍奉最高祭司的整合骑士。
                </span>
            </p>
        </div>
    </div>
</body>

</html>

链接

*{margin:0; padding:0;}的使用
*{margin:0; padding:0;} 代表了网页中所有元素，包括body ,ul, li列表标签 ,p,H标题标签,dd,dt 等……都有默认的margin 或padding值的，加上这句就可以删除浏览器这些默认值，方面后面的设置。

注意： 不要无脑使用 *{margin:0; padding:0;}
详情可参考：*{margin:0; padding:0;}的利弊