用css实现滑动效果的背景图片的变色

最新推荐文章于 2022-04-24 11:42:11 发布

星Y

最新推荐文章于 2022-04-24 11:42:11 发布

阅读量817

点赞数

本文链接：https://blog.csdn.net/HIRAETHZY/article/details/113657861

版权

在这里插入图片描述
实现如图的效果，关于使png图片变色的想法，是综合很多网友的分享实现的，说实话，为什么这么使用就可以变色，其实原理还是不太懂，总之效果还是实现了，就是照猫画虎了，争取不断学习，努力弄懂。

//html
<body>
    <div class="i-m-sCard">
        <div class="i-m-sCardCont">
            <div class="i-m-sCardImgBg">
                <div class="i-m-sCardImg">
                    <div class="i-m-sCardImg i-m-sCardImgIcon" style="background-image: url(../img/icon3.png);">
                    </div>
                </div>
            </div>
            <div class="i-m-fTitle">
                <p>目送摘抄</p>
            </div>
            <div class="i-m-fContent">
                <p>
                    我慢慢地、慢慢地了解到，所谓父女母子一场，只不过意味着，你和他的缘分就是今生今世不断地在目送他的背影渐行渐远。你站在小路的这一端，看着他逐渐消失在小路转弯的地方，而且，他用背影告诉你:不必追。
                </p>
            </div>
        </div>
        <div class="i-m-sCardCont">
            <div class="i-m-sCardImgBg">
                <div class="i-m-sCardImg">
                    <div class="i-m-sCardImg i-m-sCardImgIcon" style="background-image: url(../img/icon2.png);">
                    </div>
                </div>
            </div>
            <div class="i-m-fTitle">
                <p>目送摘抄</p>
            </div>
            <div class="i-m-fContent">
                <p>
                    我们拼命地学习如何成功冲刺一百米，但是没有人教过我们:你跌倒时，怎么跌得有尊严;你的膝盖破得血肉模糊时，怎么清洗伤口、怎么包扎;你一头栽下时，怎么治疗内心淌血的创痛，怎么获得心灵深层的平静;心像玻璃一样碎了一地时，怎么
                    收拾?
                </p>
            </div>
        </div>
        <div class="i-m-sCardCont">
            <div class="i-m-sCardImgBg">
                <div class="i-m-sCardImg">
                    <div class="i-m-sCardImg i-m-sCardImgIcon" style="background-image: url(../img/icon4.png);">
                    </div>
                </div>
            </div>
            <div class="i-m-fTitle">
                <p>目送摘抄</p>
            </div>
            <div class="i-m-fContent">
                <p>
                    有些事，只能一个人做。有些关，只能一个人过。有些路啊，只能一个人走。
                </p>
            </div>
        </div>
    </div>
</body>

//css
   * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        ul {
            list-style: none;
        }

        .i-m-sCard {
            height: 250px;
            width: 1200px;
            margin: 40px auto;
        }

        .i-m-sCardCont {
            float: left;
            width: 340px;
            height: 270px;
            margin: 0px 60px 20px 20px;
            border-radius: 10px;
            -moz-box-shadow: 0px -2px 20px 0px #efefef;
            -webkit-box-shadow: 0px -2px 20px 0px #efefef;
            box-shadow: 0px -2px 20px 0px #efefef;
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .i-m-sCardCont:hover>.i-m-fTitle,
        .i-m-sCardCont:hover>.i-m-fContent {
            color: #fff;
        }

        .i-m-sCardCont:hover {
            background-color: #248eda;
            transform: scale(1.1);
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            -o-transform: scale(1.1);
            -ms-transform: scale(1.1);
        }

        .i-m-sCardCont:hover>.i-m-sCardImgBg {
            background-color: #fff;
        }

        .i-m-sCardCont:hover .i-m-sCardImg>.i-m-sCardImg {
            position: relative;
            left: -45px;
            border-right: 1px solid transparent;
            -webkit-filter: drop-shadow(46px 0);
            filter: drop-shadow(46px 0 #248eda);
        }

        .i-m-sCardCont:first-child {
            margin-left: 0px;
        }

        .i-m-sCardCont:last-child {
            margin-right: 0px;
        }

        .i-m-sCardImgBg {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background-color: #248eda;
            position: relative;
            margin-top: 27px;
            margin-left: 14px;
            float: left;
        }

        .i-m-sCardImg {
            width: 55px;
            height: 55px;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .i-m-sCardImgIcon {
            width: 32px;
            height: 32px;
            margin-top: 1px;
            margin-left: 12px;
            align-items: center;
            position: relative;
            z-index: 22;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        .i-m-fTitle {
            float: left;
            text-align: left;
            margin-left: 10px;
            margin-top: 25px;
            width: 225px;
            height: 55px;
            font-size: 24px;
            font-weight: bold;
            color: #333333;
            line-height: 55px;
        }

        .i-m-fContent {
            float: left;
            margin: 20px 35px;
            width: 280px;
            font-size: 16px;
            color: #666666;
            line-height: 25px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
        }

星Y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用css实现滑动效果的背景图片的变色

实现如图的效果，关于使png图片变色的想法，是综合很多网友的分享实现的，说实话，为什么这么使用就可以变色，其实原理还是不太懂，总之效果还是实现了，就是照猫画虎了，争取不断学习，努力弄懂。//html<body> <div class="i-m-sCard"> <div class="i-m-sCardCont"> <div class="i-m-sCardImgBg"> &l.
复制链接

扫一扫