CSS Hover Animation

2025年1月31日 | 阅读12分钟

网页使用悬停效果，通过光标或鼠标移动来操作具有功能或设计特性的元素。动画使用 CSS 动画和悬停功能上的关键属性来添加运动或动画效果。悬停动画通过悬停功能或光标移动来操作元素的运动或动画效果。

使用 CSS 样式标签，我们可以通过关键项和动画属性创建交互式应用程序。过渡和动画与 ":hover" 伪元素一起使用，以激活 CSS 中的悬停动画属性。

如何创建悬停动画效果

以下步骤用于使用 CSS 在悬停功能上获得动画效果。

使用 ":hover" 伪元素与 html 标签名、id 名或类名。动画效果属性在伪元素内部使用。
在悬停元素中使用 animation 属性。
- 我们可以添加持续时间、动画效果、过渡和其他 css 属性。
在所需元素上使用 animation 属性的子属性。
使用关键帧来获取 CSS 动画属性的序列。
使用动画周期或简写属性。

示例

以下示例展示了具有 animation 属性不同子属性的悬停动画。

示例 1

这些示例展示了 CSS 中用于运动效果的关键帧和动画属性。椭圆形状是线性的，并以 Z 字形方向移动。

<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name =  "viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
left: 80px;
top: 50px;
}
100% {
left: 88px;
top: 0;
}
}
.ellipse_div {
background: skyblue;
border-radius: 6px;
height: 100px;
position: relative;
min-width: 500px;
}
.ellipse_div:hover .ellipse {
animation: slide 3s linear;
}
.ellipse {
background: orange;
border-radius: 50%;
height: 40px;
position: absolute;
width: 50px;
}
</style>
</head>
<body>
<h3> CSS Hover Animation </h3>
<p> The ellipse shape moves linear way using the hover effect </p>
<div class = "ellipse_div">
<figure class = "ellipse"></figure>
</div>
</body>
</html>

输出

输出显示 css 悬停动画。

示例 2

这些示例展示了 CSS 中用于运动效果的关键帧和动画的子属性。椭圆形状是线性的，并以 Z 字形方向移动，带有简写效果。

<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name =  "viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
left: 80px;
top: 50px;
}
100% {
left: 88px;
top: 0;
}
}
.ellipse_div {
background: skyblue;
border-radius: 6px;
height: 100px;
position: relative;
min-width: 500px;
}
.ellipse_div:hover .ellipse {
animation: slide 1s ease-in-out .5s infinite alternate;
}
.ellipse_div:active .ellipse {
animation-play-state: paused;
}
.ellipse {
background: yellow;
border-radius: 50%;
height: 40px;
position: absolute;
width: 50px;
}
</style>
</head>
<body>
<h3> CSS Hover Animation </h3>
<p> The ellipse shape moves in a zigzag way with the shorthand format using the hover effect </p>
<div class = "ellipse_div">
<figure class = "ellipse"></figure>
</div>
</body>
</html>

输出

输出显示 css 悬停动画。

CSS 中的翻转悬停动画

容器可以使用悬停效果从左向右或从右向左翻转。在这里，我们可以设置动画效果的 rotateX 或 rotate 属性值。旋转可以根据动画移动要求设置为 90 度或 180 度。

示例 1

该示例展示了使用 css 动画效果的翻转卡片或元素。我们可以将 transform 属性与 rotateY 设置为 180 度。

<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name =  "viewport" content="width=device-width, initial-scale=1">
<style>
.main-card {
background-color: transparent;
width: 200px;
height: 200px;
perspective: 1000px;
}

.main-card-inner {
position: relative;
width: 80%;
height: 80%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;

box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
backface-visibility: hidden;
-moz-backface-visibility: hidden;
}

.main-card:focus {
outline: 0;
}

.main-card:hover .main-card-inner,
.main-card:focus .main-card-inner{
transform: rotateY(180deg);
}

.main-card-front,
.main-card-back {
position: absolute;
width: 99%;
height: 99%;
}

.main-card-front {
background: linear-gradient(to right, #6fb1fc, #4364f7);
color: grey;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}

.main-card-back {
background: linear-gradient(to left, #6fb1fc, #4364f7);
color: grey;
transform: rotateY(180deg);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
h3 {
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
}

</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Flip animation on hover effect using CSS properties </p>
<div class = "main-card" tabIndex="0">
<div class = "main-card-inner">
<div class = "main-card-front">
<h3> CSS Flip Hover Animation (Y-Axis) </h3>
</div>
<div class = "main-card-back">
<h3> Thank You!!! </h3>
</div>
</div>
</div>
</body>
</html>

输出

输出显示 css 悬停动画。

示例 2

该示例展示了使用 css 动画效果在卡片或元素上沿 X 轴翻转。我们可以将 transform 属性与 rotateX 设置为 180 度。

<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name =  "viewport" content="width=device-width, initial-scale=1">
<style>
.main-card {
background-color: transparent;
width: 200px;
height: 200px;
perspective: 1000px;
}

.main-card-inner {
position: relative;
width: 80%;
height: 80%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;

box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
backface-visibility: hidden;
-moz-backface-visibility: hidden;
}

.main-card:focus {
outline: 0;
}

.main-card:hover .main-card-inner,
.main-card:focus .main-card-inner{
transform: rotateX(180deg);
}

.main-card-front,
.main-card-back {
position: absolute;
width: 99%;
height: 99%;
}

.main-card-front {
background: linear-gradient(to top, #6fb1fc, #4364f7);
color: grey;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}

.main-card-back {
background: linear-gradient(to bottom, #6fb1fc, #4364f7);
color: grey;
transform: rotateX(180deg);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
h3 {
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
}

</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Flip animation for X-AXIS on hover effect using CSS properties </p>
<div class = "main-card" tabIndex = "0">
<div class = "main-card-inner">
<div class = "main-card-front">
<h3> CSS Flip (X-Axis) Hover Animation </h3>
</div>
<div class = "main-card-back">
<h3> Thank You for X-Axis Rotation!!! </h3>
</div>
</div>
</div>
</body>
</html>

输出

输出显示 css 悬停动画。

CSS 中的按钮悬停动画

按钮是任何网页的重要组成部分。网页通过按钮与用户交互。动画按钮功能用于创建有吸引力且引人注目的网页。我们可以创建具有不同动画属性的平滑简单按钮。

示例

该示例展示了使用 CSS 中的悬停动画的不同动画效果和动作。

<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name =  "viewport" content="width=device-width, initial-scale=1">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);

* {
box-sizing: inherit;
transition-property: all;
transition-duration: 1.6s;
transition-timing-function: ease;
}

html,
body {
box-sizing: border-box;
height: 90%;
width: 90%;
}

body {
font-family: 'helvica', sans-serif;
font-weight: 200;
}
.container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1em;
text-align: center;

@media (min-width: 550px) {
flex-direction: row;
justify-content: space-between;
}
}

p {
font-size: 12px;

@media(min-width: 600px) {
left: 50%;
position: absolute;
transform: translate(-50%, 0);
top: 90%;
}

@media(max-height: 500px) {
left: 0;
position: relative;
top: 0;
transform: translate(0, 0);
}

a {
background: rgba(white, 0);
border-bottom: 1px solid;
color: white;
line-height: 1.4;
padding: .25em;
text-decoration: none;

&:hover {
background: rgba(white, 1);
}
}
}
.btn {
color: #fff;
cursor: pointer;
font-size:16px;
font-weight: 300;
line-height: 40px;
margin: 0 0 2em;
max-width: 150px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
&:hover { text-decoration: none; }

}
.btn_class-1 {
font-weight: 100;

svg {
height: 45px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

rect {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 422, 0;
transition: all 0.35s linear;
}
}

.btn_class-1:hover {
background: rgba($red, 0);
font-weight: 900;
letter-spacing: 1px;

rect {
stroke-width: 5;
stroke-dasharray: 15, 310;
stroke-dashoffset: 48;
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
}

.btn_class-2 {
letter-spacing: 0;
}

.btn_class-2:hover,
.btn_class-2:active {
letter-spacing: 5px;
}

.btn_class-2:after,
.btn_class-2:before {
backface-visibility: hidden;
border: 1px solid rgba(#fff, 0);
bottom: 0px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}

.btn_class-2:hover:after,
.btn_class-2:hover:before {
backface-visibility: hidden;
border-color: #fff;
transition: width 350ms ease-in-out;
width: 70%;
}

.btn_class-2:hover:before {
bottom: auto;
top: 0;
width: 70%;
}
.btn_class-4 {
border: 1px solid;
overflow: hidden;
position: relative;

span {
z-index: 20;
}

&:after {
background: #fff;
content: "";
height: 155px;
left: -75px;
opacity: .5;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: -10;
}
}

.btn_class-4:hover {

&:after {
left: 120%;
transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);
}
}

.btn_class-5 {
border: 0 solid;
box-shadow: inset 0 0 20px rgba(254, 255, 255, 0);
outline: 1px solid;
outline-color: rgba(254, 255, 255, .5);
outline-offset: 0px;
text-shadow: none;
transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn_class-5:hover {
border: 1px solid;
box-shadow: inset 0 0 25px rgba(254, 255, 255, .5), 0 0 20px rgba(254, 255, 255, .2);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #427388;
}

</style>
</head>
<body style = "background-color:grey;">
<h4> CSS Hover Animation </h4>
<b> button hover animation using CSS properties </b>
<br>
<div class = "container">
<a href = "#" class = "btn btn_class-1">
<svg>
<rect x = "0" y = "0" fill="none" width = "100%" height = "100%"/>
</svg>
Hover 1
</a>
<a href = "#" class = "btn btn_class-2"> Hover 2 </a>
<a href = "#" class = "btn btn_class-4"><span> Hover 3 </span></a>
<a href = "#" class = "btn btn_class-5"> Hover 4 </a>
</div>
</body>
</html>

输出

输出显示 css 悬停动画。

悬停效果上的缩放动画

如果元素希望使用光标移动进行放大或缩小，则网页需要缩放动画效果。缩放效果突出显示图像的特定元素或显示方面。

示例

该示例展示了网页图像上的缩放效果。我们可以设置带有过渡时间的缩放效果。如果鼠标放在图像上，则图像按给定比例缩放；否则，它以其默认大小显示。

<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name =  "viewport" content="width=device-width, initial-scale=1">
<style>
.main-card {
background-color: transparent;
width: 200px;
height: 200px;
perspective: 1000px;
}
.main-card-inner {
position: relative;
width: 80%;
height: 70%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
margin-left: 50px;

box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.main-card:hover .main-card-inner,
.main-card:focus .main-card-inner{
transform: scale(1.2);
}
h3 {
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Zoom animation on hover using CSS properties </p>
<div class = "main-card" tabIndex="0">
<div class = "main-card-inner">
<img srcset = "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f 750w," sizes="120px,
123px,
120px">
</div>
</div>
</body>
</html>

输出

输出显示 css 悬停动画。

悬停效果上的旋转动画

如果元素希望向所需方向旋转，则 css 动画属性会旋转到所需的角度。我们可以使用 rotate 属性和所需的值来移动网页。

示例

该示例展示了网页图像或元素上的旋转效果。在这里，我们将图像旋转 180 度，将文本元素旋转 90 度。

<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name =  "viewport" content="width=device-width, initial-scale=1">
<style>
.main-card {
background-color: transparent;
width: 200px;
height: 200px;
}
.main-card-inner {
position: relative;
width: 80%;
height: 70%;
text-align: center;
transition: transform 0.8s;
margin-left: 50px;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
}
.main-card:hover .main-card-inner{
transition: 0.80s;
-webkit-transition: 0.80s;
-moz-transition: 0.80s;
-ms-transition: 0.80s;
-o-transition: 0.80s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
margin-left: 50px;
}
h3 {
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
color: navy;
}
.main-card-front {
position: relative;
width: 80%;
height: 30%;
text-align: center;
transition: transform 0.8s;
margin-left: 50px;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
}
.main-card:hover .main-card-front{
transition: 0.80s;
-webkit-transition: 0.80s;
-moz-transition: 0.80s;
-ms-transition: 0.80s;
-o-transition: 0.80s;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-left: rotate(90deg);
}
</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Zoom animation on hover using CSS properties </p>
<div class = "main-card" tabIndex="0">
<div class = "main-card-inner">
<img srcset="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f 750w," sizes="120px,
123px,
120px">
</div>
</div>
<div class = "main-card" tabIndex="0">
<div class = "main-card-front">
<h3> CSS Rotate Hover Animation </h3>
</div>
</div>
</body>
</html>

输出

输出显示 css 悬停动画。

悬停动画效果的暂停模式

动画使用子属性来播放和暂停运动元素。我们可以通过使用 animation-play-state 属性和 paused 值来停止运动效果。

示例

该示例展示了网页元素上的暂停效果。在这里，方块连续显示不同的颜色。在这里，我们停止并显示方块形状元素的颜色。

<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name =  "viewport" content="width=device-width, initial-scale=1">
<style>
#box {
height: 100px;
width: 100px;
background-color: red;
/* Safari 4+ browser */
-webkit-animation: animationName 5s ease 0s infinite normal;
-moz-aanimation: animationName 5s ease 0s infinite normal; /* Fx 5+ */
-o-animation: animationName 5s ease 0s infinite normal;/* Opera 12+ */
animation: animationName 5s ease 0s infinite normal;
}

#box:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
cursor: pointer;
}

@-webkit-keyframes animationName {
0%    { background: red; }
25%   { background: orange; }
50%   { background: blue; }
75%   { background: yellow; }
100%  { background: dodgerblue; }
}
@-moz-keyframes animationName {
0%    { background: red; }
25%   { background: orange; }
50%   { background: blue; }
75%   { background: yellow; }
100%  { background: dodgerblue; }
}
@-o-keyframes animationName {
0%    { background: red; }
25%   { background: orange; }
50%   { background: blue; }
75%   { background: yellow; }
100%  { background: dodgerblue; }
}
@keyframes animationName {
0%    { background: red; }
25%   { background: orange; }
50%   { background: blue; }
75%   { background: yellow; }
100%  { background: dodgerblue; }
}
</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Pause animation on hover using CSS properties </p>
<div id = "box">
</div>
</body>
</html>

输出

输出显示 css 悬停动画。

菜单悬停动画效果

我们可以在网页的菜单栏上创建动画效果。我们可以创建一个有吸引力的导航栏。

示例

该示例展示了菜单栏上的动画效果。我们可以将动画用于菜单及其功能选项卡。

<!DOCTYPE html>
<html>
<head>  
<title> CSS Hover Animation </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif
}
ul {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-70%, -50%);
display: flex;
li {
list-style: none;
a {
position: relative;
display: block;
text-transform: uppercase;
margin: 20px 0;
padding: 10px 10px;
text-decoration: none;
color: orange;
font-family: sans-serif;
font-size: 20px;
font-weight: 400;
transition: .4s;
z-index: 1;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 2px solid red;
border-bottom: 2px solid red;
transform: scaleY(3);
opacity: 0;
transition: .5s;
}
&:after {
content: '';
position: absolute;
top: 2px;
left: 0;
width: 100%;
height: 100%;
background-color: navy;
transform: scale(0);
opacity: 0;
transition: .3s;
z-index: -1;
}
&:hover {
color: white;
&:before {
transform: scaleY(1.2);
opacity: 1;
}
&:after {
transform: scaleY(1.2);
opacity: 1;
}
}
}
}
}
</style>
</head>
<body>
<h4 style = "margin-top: 10px; margin-left: 50px;"> CSS Hover Animation </h4>
<p style = "margin-top: 2px; margin-left: 50px;">  Animation on menu of hover effect using CSS properties </p>
<ul>
<li> <a href = "#"> Category </a> </li>
<li> <a href = "#"> About </a> </li>
<li> <a href = "#"> Home</a> </li>
<li> <a href = "#"> Contact </a> </li>
</ul>
</body>
</html>

输出

输出显示 css 悬停动画。

图标悬停动画效果

我们可以在网页的各种图标上创建动画效果。我们可以以有吸引力的方式使用悬停效果创建不同的图标。

示例

以下示例展示了使用 CSS 属性的不同图标及其动画效果。

<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name =  "viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.3/css/all.css" crossorigin="anonymous">
<style>
body {
margin: 0;
padding:0;
background: grey;
}
ul {
display: flex;
position: absolute;
top: 20%;
left: 20%;
transform: translate(-50%, -50%);
}
ul li {
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background-color: #fff;
text-align: center;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .icon {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .icon {
color: #fff;
transform: rotateY(360deg);
}
ul li a:before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .8s;
z-index: 2;
}

ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: #3b5999;
}
ul li:nth-child(2) a:before{
background: #55acee;
}
ul li:nth-child(4) a:before {
background: #dd4b39;
}
</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p>  Animation on icons of hover effect using CSS properties </p>
<ul>
<li>
<a href = "#">
<i class = "fab fa-facebook-f icon"></i>    </a>
</li>
<li>
<a href = "#"><i class = "fab fa-twitter icon"></i></a>
</li>
<li>
<a href = "#"><i class = "fab fa-google-plus-g icon"></i></a></li>
</ul>
</body>
</html>

输出

输出显示 css 悬停动画。

结论

悬停动画用于为网页创建高级设计和样式结构。在这里，我们将悬停动画效果用于多个图标，例如 Facebook、Twitter 等。

下一主题Css-transform-rotate

CSS Hover Animation

如何创建悬停动画效果

示例

CSS 中的翻转悬停动画

CSS 中的按钮悬停动画

悬停效果上的缩放动画

悬停效果上的旋转动画

悬停动画效果的暂停模式

菜单悬停动画效果

图标悬停动画效果

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Hover Animation

如何创建悬停动画效果

示例

CSS 中的翻转悬停动画

CSS 中的按钮悬停动画

悬停效果上的缩放动画

悬停效果上的旋转动画

悬停动画效果的暂停模式

菜单悬停动画效果

图标悬停动画效果

结论

相关帖子

CSS Make Div Scrollable

CSS Media Types

CSS Stripes

CSS Pull Right

CSS Transparent Button

CSS Images Grid

Selection CSS

CSS Display None

CSS Invert

CSS + Selector

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器