AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2023-11-10 42
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云原生大数据计算服务 MaxCompute，5000CU*H 100GB 3个月
云原生大数据计算服务MaxCompute，500CU*H 100GB 3个月
视频直播，500GB 1个月
简介： CSS3实现鼠标悬停动态效果(仿阿里云官方网站)

这是一个很简单的效果，简单的记录

<!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>

一下代码，先看效果图。

文章标签：
视频直播
云原生大数据计算服务 MaxCompute
关键词：
CSS鼠标
CSS网站
CSS动态效果
CSS鼠标悬停
CSS阿里云
祈澈菇凉
目录
相关文章
CamilleKing
|
1月前
|
前端开发 JavaScript 测试技术
CSS3 动画效果对网站性能有什么影响？
CSS3动画效果在为网站带来丰富视觉体验的同时，也会对网站性能产生多方面的影响
CamilleKing
60 1
游客fz577umxdejsg
|
4月前
|
前端开发
导航新风尚：CSS梯形设计，让网站菜单不再单调！
导航新风尚：CSS梯形设计，让网站菜单不再单调！
游客fz577umxdejsg
82 0
aliyun8599273441-30642
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
302 65
疯狂的猿
|
25天前
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
疯狂的猿
17 0
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
游客moiomvrp3vyac2
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代，拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识，一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解，这篇文章都将是你的理想指南。我们将探索基本概念，实现页面布局，并点缀以个性化样式，最终将静态页面转变为动态交互式网站。准备好了吗？让我们开始吧！
游客moiomvrp3vyac2
146 4
神明木佑
|
2月前
|
前端开发
CSS中如何实现鼠标悬停效果？
CSS中如何实现鼠标悬停效果？
神明木佑
44 0
Li370234940
|
2月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
Li370234940
51 0
六卿
|
3月前
|
前端开发
网站变灰白css
本文介绍了如何通过CSS滤镜效果实现网站变为灰白色，具体方法是在HTML或BODY标签上应用`filter`属性，使用`progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)`和`-webkit-filter: grayscale(100%)`实现灰度效果。
六卿
35 0
游客fz577umxdejsg
|
4月前
|
前端开发
导航栏也时尚：CSS缩放动画，让导航链接在鼠标经过时绽放！
导航栏也时尚：CSS缩放动画，让导航链接在鼠标经过时绽放！
游客fz577umxdejsg
45 1
游客fz577umxdejsg
|
4月前
|
前端开发
视觉充电：CSS动画特效，为网站带来动力与活力！(一键复制)
视觉充电：CSS动画特效，为网站带来动力与活力！(一键复制)
游客fz577umxdejsg
159 1