6种css3鼠标滑过动画效果

最新推荐文章于 2024-03-21 00:33:28 发布
最新推荐文章于 2024-03-21 00:33:28 发布
阅读量4k 收藏 12
点赞数 3
分类专栏： 前端 前端——CSS 前端——HTML 文章标签： css3 鼠标 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/erdfty/article/details/82868833
版权 
<html>

<head>
    <meta charset="utf-8" />
    <title>6种css3鼠标滑过动画效果</title>
    <style type="text/css">
    /*****全局样式*****/

    * {
        padding: 0;
        margin: 0;
        font-family: "微软雅黑"
    }

    h2 {
        margin: 15px 0;
        font-weight: 300;
    }

    .content {
        margin: 0 auto;
        max-width: 728px;
        margin-top: 20px;
        text-align: center
    }

    footer {
        margin: 10px 0;
        font-size: 14px;
    }

    hr {
        margin: 20px 0;
    }

    code {
        font-size: 12px;
    }
    /*****鼠标悬停图片变大文字消失*****/

    .style1 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style1 ul li {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
    }

    .style1 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
    }

    .style1 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
    }

    .style1 ul li:hover {
        -webkit-transform: scale(1.1);
        /*1.1放大值*/
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        /*  本hover用的是：transform属性；scale是属性下放大；*/
    }

    .style1 ul li:hover span {
        opacity: 0
    }
    /*****鼠标悬停文字消失*****/

    .style2 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style2 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
    }

    .style2 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
        /*其意相同：transition：all；初始过度属性 值0；*/
    }


    .style2 ul li:hover span {
        opacity: 0
    }
    /*opacit：0；代表完全消失；0.5半透明*/
    /*****鼠标悬停整体旋转*****/

    .style3 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style3 ul li {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
    }

    .style3 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
    }

    .style3 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        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;
    }

    .style3 ul li:hover {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        /*css3旋转属性； 360deg（顺时针旋转360度）*/
        -ms-transform: rotate(360deg);
    }
    /*****鼠标悬停整体旋转放大*****/

    .style4 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style4 ul li {
        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;
    }

    .style4 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
    }

    .style4 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        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;
    }

    .style4 ul li:hover {
        transform: rotate(360deg) scale(1.2);
        -webkit-transform: rotate(360deg) scale(1.2);
        -moz-transform: rotate(360deg) scale(1.2);
        -o-transform: rotate(360deg) scale(1.2);
        /*transform 属性下 rotate（旋转）和scale（放大）属性；可以同时用*/
        -ms-transform: rotate(360deg) scale(1.2);
    }
    /*****鼠标悬停整体上升*****/

    .style5 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style5 ul li {
        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;
    }

    .style5 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
    }

    .style5 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        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;
    }

    .style5 ul li:hover {
        transform: translate(0, -10px);
        -webkit-transform: translate(0, -10px);
        -moz-transform: translate(0, -10px);
        -o-transform: translate(0, -10px);
        -ms-transform: translate(0, -10px);
    }
    /*****鼠标悬停图片放大缩小动画*****/

    @-webkit-keyframes play {
        50% {
            transform: scale(0.8);
        }

        100% {
            transform: scale(1);
        }
    }

    .style6 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style6 ul li {
        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;
    }

    .style6 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
    }

    .style6 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        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;
    }

    .style6 ul li:first-child:hover {
        animation: play 0.3s 50 linear;
    }

    .style6 ul li:last-child:hover {
        animation: play 0.3s 50 linear;
        position: relative;
    }

    .style6 ul li:last-child h1 {
        position: absolute;
        color: red;
        top: 50px;
        font-size: 40px;
        left: 96px;
    }

    .style6 ul li:nth-child(2):hover {
        animation: play 0.3s 1 linear;
    }

    .style6 ul li:nth-child(3):hover {
        animation: play 0.3s 2 linear;
    }
    </style>
</head>

<body>

    <body class="content">
        <div class="style1 ">
            <h2>1.鼠标悬停图片变大文字消失</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <div class="style2">
            <h2>2.鼠标悬停文字消失</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <div class="style3">
            <h2>3.鼠标悬停整体旋转</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <div class="style4">
            <h2>4.鼠标悬停整体旋转放大</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <div class="style5">
            <h2>5.鼠标悬停整体上升</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <div class="style6">
            <h2>6.鼠标悬停心脏咔咔跳</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <footer>
            <code>
        放大 修改scale(放大的值)<br />
        旋转放大 修改rotate(旋转度数) scale(放大值)<br />
        上下左右移动 修改translate(x轴,y轴)
    </code>
            <br />
            <hr />
        </footer>
    </body>

</html>

 

哈哈hyc
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3鼠标经过图片变亮动画效果
wangxinwang996的博客
04-15 707
CSS3鼠标经过图片变亮动画效果
8款CSS3鼠标滑过图片动画效果
10-31
CSS3 实现鼠标滑动 图片动画效果，非常不错，又需要可以使用
鼠标滚动事件动画.zip
07-04
jQuery鼠标滚动事件动画是一款点击网站导航或者滑动鼠标之后网站，整个body开始沿着设定好的路径旋转，很酷的效果。
纯CSS3 Hover按钮边框动画特效.zip
07-05
纯CSS3 Hover按钮边框动画特效是一款鼠标移上去显示按钮边框动画特效。
css与鼠标光标指针相关的属性有哪些?
最新发布
kfepiza的博客
03-21 1102
cursor设置鼠标光标的样式。:hover伪类选择器：用于选取鼠标悬停在元素上时的样式。可以通过:hover伪类选择器来设置鼠标悬停时的样式。:active伪类选择器：用于选取鼠标点击元素时的样式。可以通过:active伪类选择器来设置鼠标点击时的样式。:focus伪类选择器：用于选取具有焦点的元素。可以通过:focus伪类选择器来设置具有焦点时的样式。属性：控制元素是否响应鼠标事件。属性：控制用户是否可以选择元素的内容。cursor。
html实现各种好看的鼠标滑过图片特效模板
xcLeigh
12-01 3455
html实现各种好看的鼠标滑过图片特效模板，html鼠标悬浮特效，html鼠标悬浮好看的动态效果，每种效果都非常好看，可以自己配置相对应的字体、颜色、背景、效果等动画效果，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
css实现鼠标经过（hover）段落或文章下划线动画
为需求开发
12-28 626
至于为什么会出现这样的效果，建议去学习行内标签和块级标签的区别（个人简单理解为，行内标签事根据内容的多少进行层层包裹，块级标签只是在内容最外层嵌套了一个大盒子，这也是造成上面两者情况的区别）话不多说，直接上代码，简单得让你颠覆想象。
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
热门推荐
李海江的博客
12-14 4万+
CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：
css鼠标划出动画(transition属性详解)
Kino的博客
09-14 1957
css鼠标划出动画
纯js和纯css制作鼠标移入移除滑动动画
yufengxiaojiang3的博客
07-22 2520
纯js和纯css制作鼠标移入移除滑动动画 你好，欢迎来到我的笔记本里。这里，我将分享我的心得，还有，感谢你的欣赏。 简单介绍用到的知识点 定位：position：absolute ，绝对定位，是相对于脱离文档流的父级定位标签进行定位，包括（absolute、relative），如果上一级没有找到，就继续一层一层的往上找，直到找到定位的标签，如果都没有，默认为body； 定位：position: ...
css和js实现鼠标移入移出触发动画
qq_46225867的博客
01-20 1968
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
css鼠标经过盒子，盒子向上移动动画
Ghjkku的博客
11-05 2万+
* 盒子向上移动 */
纯css3实现鼠标悬停图片旋转动画特效
06-12
效果描述： 多种鼠标悬停(点击)后的图片旋转效果 包括其中的文字动画，用起来都非常舒服 适合放到高版本浏览器下的网页，或者移动网页中 使用方法： 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可 (不兼容低版本浏览器)
CSS3鼠标滑过图片滤镜动画效果.rar_CSS3鼠标滑过图片滤镜动画效果
09-20
用HTML5和CSS3来实现图片的特效处理，当我们将鼠标滑过图片时，即会出现很不错的图片动画特效，像淡入淡出、放大缩小、百叶窗遮罩等HTML5特效
纯CSS3鼠标滑过动画按钮特效.zip
07-11
代码简介： 纯CSS3鼠标滑过动画按钮特效是一款基于CSS3 transition属性实现的按钮动画特效。
神奇的css3鼠标滑过动画效果
12-13
这是一款使用css3制作的鼠标滑过圆形图标旋转动画效果。当鼠标hover圆形图标时，图标上的文字和阴影旋转360度，并带透明度变化，效果非常炫酷。
简洁的纯css3鼠标滑过按钮动画过滤样式
09-08
简洁的纯css3鼠标滑过按钮动画过滤样式
常用的5种纯css3鼠标滑过图片动画效果
09-08
常用的5种纯css3鼠标滑过图片动画效果
"export 'default' (imported as '...') was not found in ''..."错误处理
哈哈hyc的博客
04-21 4万+
开发中遇到的一个简单问题 却花了我很长时间 //在一个js文件中导出fetch请求方法 import fetch from 'utils/fetch'; export function getCompanyList() { return fetch({ url: '/wx/company/list', method: 'get' }) } //在vue的s...
HTML+CSS实现鼠标滑过图片放大效果且还原
06-02
可以使用CSS的`transform`属性和`transition`属性来实现鼠标滑过图片放大效果且还原。具体实现步骤如下： 1. 在CSS中设置图片的缩放比例（如1倍），并且设置`transition`属性，表示缩放过程需要动画效果。 ```css ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值