CSS3实现网站鼠标悬停动画

最新推荐文章于 2022-04-02 11:32:16 发布
最新推荐文章于 2022-04-02 11:32:16 发布
阅读量2.2k 收藏 7
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44763569/article/details/88714541
版权

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

 

<!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后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。

前端王小婷
关注
css 悬停动画_CSS3缩放图像动画效果悬停
从零开始的教程世界
07-18 957
css 悬停动画Today we will look into CSS3 Zoom Image animation effect with mouse on hover. With images being the soul of a website, you might have definitely tried your hands on adding some cool hover effe...
css3鼠标悬停按钮的动画
12-13
这是一款css3鼠标悬停按钮的动画。该动画效果在鼠标悬停到超链接上面的时候，通过伪元素来制作边框浮动动画，效果非常炫酷。
css3悬停动画,悬停时的css3动画(css3 animation on hover)
weixin_36445525的博客
08-03 305
I would like to make effect with css3 on hover.I have one button let say AB when mouse hover on it. It should expand lets say A becomes ALL and B becomes BALL with the transition effect. On hover out ...
鼠标悬停动画
Liuxb_zao的博客
10-09 321
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> span.change:hover{ color: red; font-size:20px ; } #haha{width: 30
table样式
tianya111cy的专栏
07-20 152
body { font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica,  sans-serif; color: #4f6b72; background: #E6EAE9;} a { color: #c75f3e;} #mytable { width: 700px; padding: 0; margin: 0;} cap...
一款纯css3实现的鼠标悬停动画按钮
01-19
今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下： 　实现的代码。 　html代码： 复制内容到剪贴板   <span></span>  ...
纯css3实现的鼠标悬停动画按钮
09-25
纯CSS3实现的鼠标悬停动画按钮是一种利用CSS3特性创建交互式用户界面的方法，它在用户将鼠标指针移动到按钮上时触发特定的动画效果。这种技术可以帮助提升用户体验，使网页或应用的交互更加生动有趣。下面我们将详细...
CSS3鼠标悬停按钮发光动画特效
06-24
本教程将深入探讨“CSS3鼠标悬停按钮发光动画特效”的实现方法。 首先，我们来看“鼠标悬停”事件。在CSS中，`:hover`伪类被用来在鼠标指针悬浮在元素上方时改变该元素的样式。这对于创建交互性按钮或链接非常有用...
CSS3实现鼠标悬停动画
liona_koukou的博客
07-15 943
  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { margin: 0; pa
CSS3鼠标悬停图片动画
w1366352655的博客
12-02 336
CSS3鼠标悬停图片动画 在线演示 本地下载 posted @ 2018-12-02 10:37 栖息地 阅读(...) 评论(...) 编辑 收藏
鼠标悬停图片动画展示
06-04
鼠标悬停图片动画展示
7款CSS3鼠标hover悬停动画特效代码.zip
07-11
实现效果： 7款CSS3鼠标hover悬停动画特效代码，非常不错的CSS动画特效，7种鼠标hover特效很炫 喜欢的可以改造下自己喜欢的hover特效。
sprity-css-rollover:在鼠标悬停时提供视频预览效果
05-21
sprity-css-rollover 用于css-rollover样式处理器 提供鼠标悬停时的视频预览效果 如果没有鼠标悬停，则允许使用默认图像 查看 要求 版本> = 1.0 安装 npm i sprity-css-rollover 用法 <!-- Change cursor manually, if needed --> < style type =" text/css " > . icon : hover { cursor : pointer; cursor : hand;} </ style > <!-- Load CSS --> < link rel =" stylesheet " type =" text/css " href =" style.css " /> <!-- Set default image: icon-sprite008 --> < div class
html5鼠标悬停图片动画展示效果.zip
07-04
html5鼠标悬停图片动画展示效果里面包含两款不同效果的html5图片展示效果。
css3鼠标悬停动画
12-11
css3 鼠标悬停动画，实现了多种悬停后产生不同的动画的效果图
css3 鼠标悬停图片动画
bangang8308的博客
09-19 444
<div class="grid"> <figure class="effect-milo"> <img src="img/3.jpg"/> <figcaption> <h2>Faithful <span>...
八大经典优雅的CSS鼠标悬浮动画-hover属性
weixin_62650212的博客
04-02 4万+
相信大家也有为自己做的hover效果不太满意的，本文给大家介绍几款不错的css鼠标悬浮动画，老规矩，复制粘贴即用。 1.
css3鼠标悬停动画效果
qq_40678503的博客
08-15 4195
效果图： 鼠标悬停的时候三角向左变大直到完全覆盖，文字缓慢显示。用CSS3完成整个效果，主要是三角形的写法 具体代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;css3三角叠加效果&lt;/title&gt;
CSS之鼠标动画
The_upside_of_down的博客
09-18 667
     先看下效果图：       首先，我们从效果图上可以看出来我们要做的动画特性，当鼠标放到图片上时，我们的图片会放大，并且图片下方的阴影和字都会消失。        图片是圆角的，字的背景颜色呈现半透明状态。        效果图给我们的直观感受大概就是这些，现在我们一步步来看看制作这个效果的过程。        第一步：我们选择四个图片，用无序列表来放置。并给图片上加上文字。...
使用jQuery实现的鼠标悬停动画内容切换效果
总结来说，这个jQuery鼠标悬停内容动画切换效果结合了HTML、CSS和jQuery，实现了用户交互时内容的动态展示，为网站增添了动态性和用户体验。通过理解并应用这些代码，开发者可以创建更具吸引力的交互式网页元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值