CSS特效——HOVER的相关应用（上）

最新推荐文章于 2022-09-11 22:36:15 发布

痞子三分冷ゾジ

最新推荐文章于 2022-09-11 22:36:15 发布

阅读量234

点赞数

分类专栏： css特效前端

本文链接：https://blog.youkuaiyun.com/FallToHer/article/details/116786044

版权

前端同时被 2 个专栏收录

17 篇文章

订阅专栏

css特效

6 篇文章

订阅专栏

CSS特效——HOVER的相关应用（上）

一、邮件发送

这是靠动画完成，当经过时触发动画，动画将左边的发送图标在一个流程中先向右移动到最右。再回到最初。

<!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>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <button>
        <div class="after"></div>
        SEND
    </button>

</body>

</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: rgba(255, 255, 255, 0.733);
    position: relative;
}
button{
    position: absolute;
    padding-right: 10px;
    top: 100px;
    left: 40%;
    display: inline-block;
    width: 120px;
    height: 50px;
    border-radius: 10px;
    background-color: rgb(79, 122, 241);
    font-size: 20px;
    line-height: 50px;
    color: bisque;
    text-align: right;
}
button .after{
    position: absolute;
    background-image: url(a4c45f638275f9ef2baecdb3d26a75bd.jpg);
    height: 30px;
    width: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    top: 10px;
    left: 10px;
}
button:hover .after{
    animation: fly 2s ease 1 ;
}
@keyframes fly {
    0%{
        transform:translateX(0%);
    }
    50%{
        transform:translateX(400%);
    }
    100%{
        transform:translateX(0%);
    }
}

二、霓虹灯效果

主要靠box-shadow 完成，

<!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>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div class="outer-box">
        <div class="one text-box">点击我</div>
        <div class="two text-box">点击我</div>
        <div class="three text-box">点击我</div>
    </div>

</body>

</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    position: relative;
    background-color: rgb(25, 30, 56);
}
.outer-box{
    position: absolute;
    top: 100px;
    left: 40%;
    display: inline-block;
    width: 360px;
    height: 60px;
    
}
.text-box{
    float: left;
    margin:0 10px;
    width: 100px;
    height: 60px;
    font-size: 25px;
    line-height: 60px;
    text-align: center;
    border-radius: 10px;
    
}
.one{
    border: 1px solid chartreuse;
    color: chartreuse;
}
.one:hover{
    color: cornsilk;
    background-color: chartreuse;
    -webkit-box-shadow:10px 10px 99px 6px chartreuse;
}
.two{
    border: 1px solid rgb(222, 224, 73);
    color: rgb(222, 224, 73);
}
.two:hover{
    color: cornsilk;
    background-color: rgb(222, 224, 73);
    -webkit-box-shadow:10px 10px 99px 6px rgb(222, 224, 73);
}
.three{
    border: 1px solid rgb(233, 69, 69);
    color: rgb(233, 69, 69);
}
.three:hover{
    color: cornsilk;
    background-color: rgb(233, 69, 69);
    -webkit-box-shadow:10px 10px 99px 6px rgb(233, 69, 69);
}

三、边框出现

主要靠动画效果完成，最开始是先设置伪元素边框透明。最后当经过时边框颜色设置成相应的颜色。

<!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>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div class="outer-box">
        HOVER ME
    </div>

</body>

</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    position: relative;
    background-color: rgb(206, 210, 228);
}
.outer-box{
    position: absolute;
    top: 100px;
    left: 40%;
    display: inline-block;
    width: 200px;
    height: 60px;
    font-size: 25px;
    line-height: 60px;
    text-align: center;
    color: rgb(79, 79, 238);
}
.outer-box::before, .outer-box::after {
    box-sizing: inherit;
    position: absolute ;
    content :'';
    border: 2px solid transparent ; 
    width: 0;
    height: 0;
    }
.outer-box::after{
    bottom:0;
    right: 0;
} 
.outer-box::before{
   left: 0;
   top: 0;
} 
.outer-box:hover::before, .outer-box:hover::after {
    width: 100% ;
    height: 100% ;
}
.outer-box:hover::before {
    border-top-color:#4361ee ;
    border-right-color: #4361ee ;
    transition: width 0.8s ease-out, height 0.8s ease-out 0.8s ;
}
.outer-box:hover::after {
    border-bottom-color: #4361ee;
    border-left-color:  #4361ee;
    transition: width 0.8s ease-out 1.6s, height 0.8s ease-out 2.4s ;
}
@keyframes width {
    0%{
        transform:translateX(-100%);
    }
    
    100%{
        transform:translateX(100%);
    }
}
@keyframes height {
    0%{
        transform:translateY(-100%);
    }
    
    100%{
        transform:translateY(100%);
    }
}