Hover小动画

最新推荐文章于 2024-03-30 18:20:23 发布
最新推荐文章于 2024-03-30 18:20:23 发布
阅读量370 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hcwdavid12/article/details/108871673
版权 
h3{ margin-left: 20px;font-size: 1.2em; }
h5{ margin: 10px 0 10px 30px; }
.hover-box, .color-box, .anima-box{ border: 2px solid #333; }
.main-container span{
    display: inline-block;
    height: 40px;
    min-width: 80px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background: #ccc;
    color: #333;
    margin: 10px;
}
.hover-box span{
    transition: all .4s;
    -moz-transition: all .4s; /* Firefox 4 */
    -webkit-transition: all .4s; /* Safari 和 Chrome */
    -o-transition: all .4s; /* Opera */
}
.btn-big:hover{
    transform: scale(1.2);
}
.btn-small:hover{
    transform: scale(0.8);
}
.btn-skew-lt, .btn-skew-rt{
    transform-origin: 0 100%;
}
.btn-skew-lb, .btn-skew-rb{
    transform-origin: 100% 0;
}
.btn-skew-l:hover{
    transform: skew(15deg);
}
.btn-skew-r:hover{
    transform: skew(-15deg);
}
.btn-skew-lt:hover{
    transform: skew(15deg);
}
.btn-skew-rt:hover{
    transform: skew(-15deg);
}
.btn-skew-lb:hover{
    transform: skew(-15deg);
}
.btn-skew-rb:hover{
    transform: skew(15deg);
}
.btn-rotate-big-l:hover{
    transform: scale(1.2) rotate(-10deg);
}
.btn-rotate-big-r:hover{
    transform: scale(1.2) rotate(10deg);
}
.btn-rotate45:hover{
    transform: rotate(45deg);
}
.btn-rotate90:hover{
    transform: rotate(90deg);
}
.btn-rotate135:hover{
    transform: rotate(135deg);
}
.btn-rotate180:hover{
    transform: rotate(180deg);
}
.btn-rotate360:hover{
    transform: rotate(360deg);
}
.btn-rotate90-anim:hover{
    animation: rotate 1s infinite;
    -webkit-animation: rotate 1s infinite;
}
@keyframes rotate {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(90deg) scale(1.2); }
    100% { transform: rotate(0deg) scale(1); }
}
.move-up:hover{
    transform: translate(0, -10px);
}
.move-down:hover{
    transform: translate(0, 10px);
}
.move-left:hover{
    transform: translate(-10px, 0);
}
.move-right:hover{
    transform: translate(10px, 0);
}
.border-out:hover{
    box-shadow: 0 0 0 5px #4d4d4d;
}
.border-in:hover{
    box-shadow: 0 0 0 5px #4d4d4d inset;
}
.border-write:hover{
    box-shadow: inset 0 0 0 20px #fff;
}
.border-radius:hover{
    border-radius: 20px;
}
.border-shadow:hover{
    box-shadow: 0 20px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}
/*颜色变化*/
/*当前元素设置相对定位*/
.color-box span{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*颜色块设置绝对定位*/
.color-block-top:before, .color-block-bottom:before, .color-block-left:before, .color-block-right:before, .color-block-center1:before, .color-block-vertical1:before, .color-block-center2:before, .color-block-center2:after, .color-block-vertical2:before, .color-block-vertical2:after{
    position: absolute;
    transition: all .3s;
    content: '';
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/*颜色从上往下变化*/
.color-block-top:before{
    bottom: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
/*颜色从下往上变化*/
.color-block-bottom:before{
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
/*颜色从左往右变化*/
.color-block-left:before{
    bottom: 0;
    left: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
/*颜色从右往左变化*/
.color-block-right:before{
    bottom: 0;
    left: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
/*水平中间向两边*/
.color-block-center1:before{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: scaleX(0);
}
/*垂直中间向两边*/
.color-block-vertical1:before{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: scaleY(0);
}
/*水平两边向中间*/
.color-block-center2:before{
    top: 0;
    left: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
.color-block-center2:after{
    top: 0;
    right: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
/*垂直两边向中间*/
.color-block-vertical2:before{
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
.color-block-vertical2:after{
    bottom: 0;
    right: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
/*垂直方向进来的:before变化*/
.color-block-top:hover:before, .color-block-bottom:hover:before, .color-block-vertical1:hover:before{
    transform: scaleY(1);
}
/*水平方向进来的:before变化*/
.color-block-left:hover:before, .color-block-right:hover:before, .color-block-center1:hover:before{
    transform: scaleX(1);
}
/*水平方向:before变化 50%*/
.color-block-center2:hover:before, .color-block-center2:hover:after{
    transform: scaleX(.51);
}
/*垂直方向:before变化 50%*/
.color-block-vertical2:hover:before, .color-block-vertical2:hover:after{
    transform: scaleY(.51);
}
/*当前元素文字颜色变化*/
.color-box span:hover{
    color: #fff;
}
/*上下划线设置绝对定位*/
.line-top-left:before, .line-top-right:before, .line-bottom-left:before, .line-bottom-right:before, .line-top-out:before, .line-top-in:before, .line-top-in:after, .line-bottom-out:before, .line-bottom-in:after, .line-bottom-in:before{
    position: absolute;
    transition: all .3s;
    content: '';
    display: block;
    height: 4px;
    width: 100%;
    background: #09f;
    z-index: -1;
    transform: scaleX(0);
}
/*上划线从左往右*/
.line-top-left:before{
    top: 0;
    left: 0;
    transform-origin: 0 0;
}
/*上划线从右往左*/
.line-top-right:before{
    top: 0;
    right: 0;
    transform-origin: 100% 0;
}
/*上划线从内向两边*/
.line-top-out:before{
    top: 0;
    margin: auto;
}
/*上划线从两边向内*/
.line-top-in:before{
    top: 0;
    left: 0;
    transform-origin: 0 0;
}
.line-top-in:after{
    top: 0;
    right: 0;
    transform-origin: 100% 0;
}
/*下划线从左往右*/
.line-bottom-left:before{
    bottom: 0;
    left: 0;
    transform-origin: 0 100%;
}
/*下划线从右往左*/
.line-bottom-right:before{
    bottom: 0;
    right: 0;
    transform-origin: 100% 100%;
}
/*下划线从内向两边*/
.line-bottom-out:before{
    bottom: 0;
    left: 0;
    margin: auto;
}
/*下划线从两边向内*/
.line-bottom-in:before{
    bottom: 0;
    left: 0;
    transform-origin: 0 100%;
}
.line-bottom-in:after{
    bottom: 0;
    left: 0;
    transform-origin: 100% 100%;
}
/*水平方向:before的变化*/
.line-top-left:hover:before, .line-top-right:hover:before, .line-bottom-left:hover:before, .line-bottom-right:hover:before, .line-top-out:hover:before, .line-bottom-out:hover:before{
    transform: scaleX(1);
}
.line-top-in:hover:before, .line-top-in:hover:after, .line-bottom-in:hover:before, .line-bottom-in:hover:after{
    transform: scaleX(.51);
}
/*初始化箭头样式*/
.arrow-t:before, .arrow-b:before, .arrow-l:before, .arrow-r:before, .arrow-body-t:before, .arrow-body-b:before, .arrow-body-l:before, .arrow-body-r:before{
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    z-index: -1;
}
.arrow-t:before, .arrow-body-b:before{
    top: 0;
    left: 0;
    right: 0;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ccc transparent;
}
.arrow-b:before, .arrow-body-t:before{
    bottom: 0;
    left: 0;
    right: 0;
    border-width: 10px 10px 0 10px;
    border-color: #ccc transparent transparent transparent;
}
.arrow-l:before, .arrow-body-r:before{
    top: 0;
    bottom: 0;
    left: 0;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ccc transparent transparent;
}
.arrow-r:before, .arrow-body-l:before{
    top: 0;
    bottom: 0;
    right: 0;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ccc;
}
/*hover后的效果*/
.arrow-t:hover:before, .arrow-body-t:hover, .arrow-body-b:hover:before{
    transform: translateY(-10px);
}
.arrow-b:hover:before, .arrow-body-b:hover, .arrow-body-t:hover:before{
    transform: translateY(10px);
}
.arrow-l:hover:before, .arrow-body-l:hover, .arrow-body-r:hover:before{
    transform: translateX(-10px);
}
.arrow-r:hover:before, .arrow-body-r:hover, .arrow-body-l:hover:before{
    transform: translateX(10px);
}
/*闪烁动画*/
.flash:hover{
    animation: flash .4s ease;
}
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.alarm:hover{
    animation: alarm 1s ease;
}
@keyframes alarm {
    0% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css上面是css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover动画</title>
    <link rel="stylesheet" href="./hover-anima.css">
</head>
<body>
    <div class="main-container">
        <h3>1.Hover动画</h3>
        <h5>1-1大小变化</h5>
        <div class="hover-box">
            <span class="btn-big">大</span>
            <span class="btn-small">小</span>
        </div>
        <h5>1-2形状变化</h5>
        <div class="hover-box">
            <span class="btn-skew-l">skew-l</span>
            <span class="btn-skew-r">skew-r</span>
            <span class="btn-skew-lt">skew-lt</span>
            <span class="btn-skew-rt">skew-rt</span>
            <span class="btn-skew-lb">skew-lb</span>
            <span class="btn-skew-rb">skew-rb</span>
        </div>
        <h5>1-3旋转角度变化</h5>
        <div class="hover-box">
            <span class="btn-rotate-big-l">rotate-big-l</span>
            <span class="btn-rotate-big-r">rotate-big-r</span>
            <span class="btn-rotate45">rotate45</span>
            <span class="btn-rotate90">rotate90</span>
            <span class="btn-rotate135">rotate135</span>
            <span class="btn-rotate180">rotate180</span>
            <span class="btn-rotate360">rotate360</span>
            <span class="btn-rotate90-anim">btn-rotate90-anim</span>
        </div>
        <h5>1-4位移变化</h5>
        <div class="hover-box">
            <span class="move-up">up</span>
            <span class="move-down">down</span>
            <span class="move-left">left</span>
            <span class="move-right">right</span>
        </div>
        <h5>1-4边框阴影变化</h5>
        <div class="hover-box">
            <span class="border-out">out</span>
            <span class="border-in">in</span>
            <span class="border-write">write</span>
            <span class="border-radius">radius</span>
            <span class="border-shadow">shadow</span>
        </div>
        <h3>2.颜色动画效果</h3>
        <h5>2-1颜色快变化</h5>
        <div class="color-box">
            <span class="color-block-top">block-top</span>
            <span class="color-block-bottom">block-bottom</span>
            <span class="color-block-left">block-left</span>
            <span class="color-block-right">block-right</span>
            <span class="color-block-center1">block-center1</span>
            <span class="color-block-center2">block-center2</span>
            <span class="color-block-vertical1">block-vertical1</span>
            <span class="color-block-vertical2">block-vertical2</span>
        </div>
        <h5>2-2上下划线变化</h5>
        <div class="color-box">
            <span class="line-top-left">top-left</span>
            <span class="line-top-right">top-right</span>
            <span class="line-top-out">top-out</span>
            <span class="line-top-in">top-in</span>
            <span class="line-bottom-left">bottom-left</span>
            <span class="line-bottom-right">bottom-right</span>
            <span class="line-bottom-out">bottom-out</span>
            <span class="line-bottom-in">bottom-in</span>
        </div>
        <h5>2-3箭头动画</h5>
        <div class="color-box">
            <span class="arrow-t">arrow-top</span>
            <span class="arrow-b">arrow-bottom</span>
            <span class="arrow-l">arrow-left</span>
            <span class="arrow-r">arrow-right</span>
            <span class="arrow-body-t">arrow-body-t</span>
            <span class="arrow-body-b">arrow-body-b</span>
            <span class="arrow-body-l">arrow-body-l</span>
            <span class="arrow-body-r">arrow-body-r</span>
        </div>
        <h3>3.复杂动画</h3>
        <h5>3-1闪烁效果</h5>
        <div class="anima-box">
            <span class="flash">flash</span>
            <span class="alarm">alarm</span>
        </div>
    </div>
</body>
</html>

完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事完事

效果
在这里插入图片描述
1略略略

HcwDavid12
关注
CSS动画|hover动画|border动画
10-22
css动画，hover触发border动画
hover动画
weixin_30263073的博客
05-18 81
var originalWidth = $(".post-thumb").width() var originalHeight = $(".post-thumb").height() $(".picDiv").height(originalHeight) window.onresize = function() { //窗口尺寸发生变化后清除掉mouseenter mousel...
八大经典优雅的CSS鼠标悬浮动画-hover属性
热门推荐
weixin_62650212的博客
04-02 4万+
相信大家也有为自己做的hover效果不太满意的，本文给大家介绍几款不错的css鼠标悬浮动画，老规矩，复制粘贴即用。 1.
一个简单hover动画效果
weixin_30270889的博客
10-28 242
HTML: <div id="demo1" class="demo">demo1</div> <div id="demo2" class="demo">demo2</div> CSS: .demo { width: 100px; height: 100px; text-align: cente...
比较流畅的hover动画
笋笋的博客
09-15 127
.wrapper .item { position: relative; display: inline-block; text-align: center; width: 305px; height: 253px; cursor: pointer; font-size: 16px; color: #93817D; font-weight: 500; transition: all 0.3s ease 0s; } .wrapp.
CSS3图片HOVER炫酷动画效果
09-13
本主题将深入探讨“CSS3图片HOVER炫酷动画效果”，这是一种通过CSS3实现的当鼠标悬停在图片上时触发的动态效果，能够大大提升用户体验和网站的吸引力。 首先，我们要了解CSS3中的`:hover`伪类选择器。`:hover`是...
CSS3鼠标Hover按钮动画特效
06-24
本教程将详细解析“CSS3鼠标Hover按钮动画特效”的实现方法，以及如何利用flex布局提升界面的响应性和可读性。 首先，我们来看“CSS3动画效果”。CSS3的动画功能主要由两个关键部分组成：transition（过渡）和...
CSS3制作hover下划线动画
09-24
下划线动画是网页设计中常见的交互效果，尤其是在鼠标悬停(hover)在链接或文本上时，创建动态的视觉效果可以增强用户体验。随着CSS3的引入，设计师可以更容易地使用纯CSS来实现这些效果，而无需依赖JavaScript。下面...
鼠标hover图片css3动画特效
06-24
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉表现手法，其中，鼠标hover图片的动画特效就是一种常见的交互设计。本文将深入探讨如何使用CSS3的`transition`和`transform`属性来实现鼠标hover时...
7款CSS3鼠标hover悬停动画特效代码.zip
07-11
【CSS3鼠标hover悬停动画特效】是一种利用CSS3特性实现的交互效果，当鼠标指针悬停在某个元素上时，该元素会呈现出预先设定的动态变化。这些动画不仅提升了用户体验，还使网站或应用更具吸引力。在这个压缩包中包含...
实用div的hover动画效果
09-03
简单且实用的hover动画效果，本人使用的比较多，需要视情况取用。
最强9种css3圆形按钮hover鼠标经过动画效果
08-10
只要很少的资源分，不要花钱买
7款非常漂亮的CSS3鼠标hover图片动画特效.zip
07-11
<body>[removed][removed] Puff Open Perspective Rotate Slide Tin Bomb 7款基于magic.css来实现，可以制作出非常漂亮的鼠标hover图片效果的CSS3鼠标hover图片动画特效。
css3两种hover动画
dengjiecsdn的博客
08-09 1万+
1.先定义动画，再调用动画。这类似javascript的函数调用。 1.1/*先命名css动画，此处我随意命名为hover-zoom,*/ @-webkit-keyframes hover-zoom{     50%{         -webkit-transform:scale(0.8);         transform:scale(0.8);         -webkit-filte...
html hover 效果,8种css3技术的hover动画效果
weixin_28889007的博客
06-03 1406
hover动画，简言之就是鼠标移上去触发的动画，就是触发了鼠标的hover事件时能看到的动画！1.简单动画htmlbigsmallcss.ech-big,.ech-small { transition: all .4s;2形状变化htmlskew-lskew-rskew-l-tskew-r-tskew-l-bskew-r-bcss.ech-skew-l, .ech-skew-r, .ech-ske...
html hover鼠标悬停动画
最新发布
m0_74253823的博客
03-30 713
button hover effect，鼠标悬停到button上产生动画效果。（无click点击）
CSS实现简单Hover动画
Yann‘s的博客
08-11 8449
CSS实现简单Hover动画 这是第二次制作网页相关的东西，是跟着慕课教程上做的。总之看来看来还有很长一条路要走啊。先看今天的成果： 代码部分，css样式我就放在了html文件里面了： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt; CSS效果&lt;/t..
css动画实现炫酷的hover效果
才不是小弱鸡的博客
06-14 1482
0x00 前言 今日在b站上看到一个hover动画效果，感觉写的非常好，所以复刻了一个 0x01 HTML+JS <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <title>Log-in</title> <meta name="description" content=""> <me...
利用css属性：hover 和opacity实现简单的动画效果
leo_0629的博客
08-17 4833
HTML代码：  &lt;div class="col-md-3 col-sm-4 box"&gt; &lt;a href="team2.html"&gt; &lt;div class="img"&gt; &lt;img src="img/cyd.jpg&
鼠标hover 改变元素大小 动画效果
06-06
要实现鼠标hover改变元素大小的动画效果，可以使用CSS3的transition和transform属性。以下是一个简单的示例代码： HTML部分： ```html <div class="box"></div> ``` CSS部分： ```css .box { width: 100px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值