CSS3实现鼠标悬停动态效果(仿阿里云官方网站)

这是一个很简单的效果,简单的记录一下代码,先看效果图。


5640239-41f000aed6759ff0.gif
<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style>
            .cbp-ig-grid {
                list-style: none;
                padding: 0 0 50px 0;
                margin: 0;
            }
            
            .cbp-ig-grid:after {
                clear: both;
            }
            
            .cbp-ig-grid li {
                width: 20%;
                float: left;
                height: 370px;
                text-align: center;
                border-top: 1px solid #ddd;
            }
            
            .cbp-ig-grid li>a {
                display: block;
                height: 100%;
                color: #ffffff;
                background: #000000;
                opacity: 0.7;
                text-decoration: none;
                -webkit-transition: background 0.2s;
                -moz-transition: background 0.2s;
                transition: background 0.2s;
            }
            
            .cbp-ig-grid .cbp-ig-img {
                margin: 20px 0 10px 0;
                padding: 20px 0 0 0;
                width: 80px;
                height: 80px;
                -webkit-transition: -webkit-transform 0.2s;
                -moz-transition: -moz-transform 0.2s;
                transition: transform 0.2s;
            }
            
            .cbp-ig-grid .cbp-ig-title {
                margin: 20px 0 10px 0;
                padding: 20px 0 0 0;
                -webkit-transition: -webkit-transform 0.2s;
                -moz-transition: -moz-transform 0.2s;
                transition: transform 0.2s;
            }
            
            .cbp-ig-grid .cbp-ig-category {
                text-transform: uppercase;
                display: inline-block;
                font-size: 1em;
                letter-spacing: 1px;
                color: #fff;
                -webkit-transform: translateY(10px);
                -moz-transform: -moz-translateY(10px);
                -ms-transform: -ms-translateY(10px);
                transform: translateY(10px);
                opacity: 0;
                -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
                -moz-transition: -moz-transform 0.3s, opacity 0.2s;
                -webkit-transition: transform 0.3s, opacity 0.2s;
            }
            
            .cbp-ig-grid li:hover .cbp-ig-category,
            .touch .cbp-ig-grid li .cbp-ig-category {
                opacity: 1;
                -webkit-transform: translateY(0px);
                -moz-transform: translateY(0px);
                -ms-transform: translateY(0px);
                transform: translateY(0px);
            }
            
            .cbp-ig-grid .cbp-ig-details {
                margin-top: 25px;
                padding: 5px;
                border: 1px solid #FFFFFF;
                display: inline-block;
                font-size: 1em;
                letter-spacing: 1px;
                color: #fff;
                -webkit-transform: translateY(10px);
                -moz-transform: -moz-translateY(10px);
                -ms-transform: -ms-translateY(10px);
                transform: translateY(10px);
                opacity: 0;
                -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
                -moz-transition: -moz-transform 0.3s, opacity 0.2s;
                -webkit-transition: transform 0.3s, opacity 0.2s;
            }
            
            .cbp-ig-grid li:hover .cbp-ig-details,
            .touch .cbp-ig-grid li .cbp-ig-details {
                opacity: 1;
                -webkit-transform: translateY(0px);
                -moz-transform: translateY(0px);
                -ms-transform: translateY(0px);
                transform: translateY(0px);
            }
            /* Hover styles */
            
            .cbp-ig-grid li>a:hover {
                background: #47a3da;
            }
            
            .cbp-ig-grid li>a:hover .cbp-ig-title {
                color: #fff;
            }
            
            .cbp-ig-grid li>a:hover .cbp-ig-title {
                -webkit-transform: translateY(-30px);
                -moz-transform: translateY(-30px);
                -ms-transform: translateY(-30px);
                transform: translateY(-30px);
            }
            
            .cbp-ig-grid li>a:hover .cbp-ig-img {
                -webkit-transform: translateY(-30px);
                -moz-transform: translateY(-30px);
                -ms-transform: translateY(-30px);
                transform: translateY(-30px);
            }
        </style>
    </head>

    <body>

        <div class="container">
            <div class="main">
                <ul class="cbp-ig-grid">
                    <li style="background: url(https://img.alicdn.com/tps/TB16hkwLXXXXXX6XXXXXXXXXXXX-576-840.jpg) no-repeat">
                        <a href="#">
                            <span>
                                <img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
                            </span>
                            <h3 class="cbp-ig-title">学校定位解决方案</h3>
                            <span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发,剖析秒杀、视频直播等场景</span>
                            <span class="cbp-ig-details">查看详情</span>
                        </a>
                    </li>

                    <li style="background:url(https://img.alicdn.com/tps/TB19Jz6LXXXXXacaXXXXXXXXXXX-576-840.jpg) no-repeat">
                        <a href="#">
                            <span>
                                <img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
                            </span>
                            <h3 class="cbp-ig-title">学校定位解决方案</h3>

                            <span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发,剖析秒杀、视频直播等场景</span>
                            <span class="cbp-ig-details">查看详情</span>
                        </a>
                    </li>

                    <li style="background:url(https://img.alicdn.com/tps/TB1dDT4LXXXXXabaXXXXXXXXXXX-576-840.jpg) no-repeat">
                        <a href="#">
                            <span>
                                <img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
                            </span>
                            <h3 class="cbp-ig-title">学校定位解决方案</h3>
                            <span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发,剖析秒杀、视频直播等场景</span>
                            <span class="cbp-ig-details">查看详情</span>
                        </a>
                    </li>

                    <li style="background:url(https://img.alicdn.com/tps/TB1PVwkLXXXXXagXFXXXXXXXXXX-576-840.jpg) no-repeat">
                        <a href="#">
                            <span>
                                <img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
                            </span>
                            <h3 class="cbp-ig-title">学校定位解决方案</h3>
                            <span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发,剖析秒杀、视频直播等场景</span>
                            <span class="cbp-ig-details">查看详情</span>
                        </a>
                    </li>

                    <li style="background:url(https://img.alicdn.com/tps/TB1erQpLXXXXXa7XpXXXXXXXXXX-576-840.jpg) no-repeat">
                        <a href="#">
                            <span>
                                <img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
                            </span>
                            <h3 class="cbp-ig-title">学校定位解决方案</h3>
                            <span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发,剖析秒杀、视频直播等场景</span>
                            <span class="cbp-ig-details">查看详情</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </body>

</html>

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:649040560。

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值