仿VIVO官网

发布于:2023-01-04 ⋅ 阅读:(155) ⋅ 点赞:(0)

 /* 以下是动态页面 */

        .content {

            width: 200px;

            height: 200px;

            position: relative;

            overflow: hidden;

            /* 超出屏幕(溢出的)自动隐藏 */

            margin: auto;

        }

        .content img {

            width: 200px;

            height: 200px;

            float: left;

            transition: all 0.6s;

            /* 过渡动画,使页面变化更加平滑 */

            cursor: pointer;

            /* 游标,光标移动 */

            border: 0;

        }

        .content img:hover {

            transform: scale(1.5);

        }

        .note {

            width: 200px;

            height: 50px;

            display: block;

            text-decoration: none;

            color: #FFFFFF;

            cursor: pointer;

            text-indent: 1em;

            line-height: 30px;

            /*初始化隐藏多余文字*/

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            float: left;

            position: absolute;

            bottom: 0px;

            background-color: rgba(0, 0, 0, 0.5);

            /* 背景变灰 */

            transition: all 0.6s;

        }

        .note:hover {

            width: 200px;

            height: 200px;

            line-height: 30px;

            text-indent: 1em;

            /*显示全部文字*/

            white-space: normal;

            word-break: break-word;

            text-overflow: inherit;

        }

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到