CSS Pulse Animation我们在网页的不同位置看到它。Pulse Animation 用于使不同的 UI 元素变得有趣。
在这里，我们将讨论如何使用 CSS 创建脉冲动画。在这里，我分享了不同类型的设计，例如简单脉冲动画 CSS、按钮脉冲动画、文本脉冲动画、图像脉冲动画、悬停脉冲动画等。
在这里，我将只使用 CSS 和 HTML。我在这里分享了每个设计、源代码和所有内容的现场演示的完整信息。示例 – 1
简单的脉冲动画 CSS
这是一个仅由 HTML 和 CSS 创建的简单脉冲动画设计。这个设计基本上是脉冲动画的一个基本例子。
这里有一个小圆点，将继续作为动画的中心。
演示：https://www.foolishdeveloper.com/p/demo-2.html#demo7
希望在上面的演示按钮的帮助下，您知道它是如何工作的。如果您愿意，可以使用下面的按钮下载所有代码。
但下面我给出了所有的 HTML CSS 代码。用于这个CSS 脉冲动画效果的代码非常简单，因此您理解它不会有任何困难。
以下代码是帮助添加此脉动动画基本信息的 HTML 代码。在这里，我汇总了所有可以复制并粘贴到 HTML 文件中的 HTML 代码。
<!DOCTYPE html>
<!--Simple Pulse Animation-->
<html lang="en">
<head>
<!--CSS file-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="relative">
<button></button>
<div class="span"></div>
<div class="span"></div>
</div>
</body>
</html>
以下代码是激活此脉冲动画的 CSS 代码。复制这些并将它们粘贴到您的 CSS 文件中。请记住将您的 CSS 文件重命名为“style.css”。
.relative {
position: relative;
margin: 50vh auto;
width: 60px;
}
.span {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
top: 0;
left: 0;
border: 0;
-webkit-animation: sploosh 2s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation-iteration-count: infinite;
}
.span:nth-child(2) {
-webkit-animation-delay: .33s;
-webkit-animation-duration: 2.2s;
}
button {
border: 0;
margin: 50vh auto;
border-radius: 50%;
display: block;
width: 60px;
height: 60px;
background-color: rgba(71, 225, 141, 1);
-webkit-animation: pulse 2s ease-out;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes sploosh {
0% {
box-shadow: 0 0 0 0px rgba(71, 225, 141, .7);
background: rgba(71, 225, 141, .7);
}
80% {
background: rgba(66, 166, 223, 0);
}
100% {
box-shadow: 0 0 0 120px rgba(66, 166, 223, 0);
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
}
3.3% {
-webkit-transform: scale(1.1);
}
16.5% {
-webkit-transform: scale(1);
}
33% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
希望您已经能够使用上面的代码创建一个简单的脉冲动画设计。示例 – 2
按钮脉冲动画 CSS
现在您必须使用 CSS 创建按钮脉冲动画。这意味着这个动画效果已经被添加到一个按钮上。
在这种情况下，首先创建了一个按钮并添加了一些基本动画。然后使用 CSS 将脉冲动画添加到其中。
演示：https://www.foolishdeveloper.com/p/demo-2.html#demo8
首先，我创建了一个添加一些颜色变化动画的按钮。这意味着按钮的背景颜色在正常情况下会发生变化。然后添加了脉冲动画效果。
我使用以下代码添加了所有基本信息。这里仅使用一行 HTML 来创建按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<!--CSS file-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="pulse-button">Auto-Pulse</button>
</body>
</html>
现在您必须使用以下 CSS 向按钮添加脉冲动画。复制以下代码并将它们添加到您的 CSS 文件中。
html{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
body {
background-color: #222222;
align-self: center;
text-align: center;
}
/* Button resets and style */
button {
margin: 15px auto;
font-family: "Montserrat";
border-radius: 100px;
padding: 15px 20px;
font-size: 20px;
color: #ffffff;
cursor: pointer;
border: 0px solid #000;
}
/* Initiate Auto-Pulse animations */
button.pulse-button {
animation: borderPulse 1000ms infinite ease-out,
colorShift 10000ms infinite ease-in;
}
/* Declate color shifting animation */
@keyframes colorShift {
0%, 100% {
background: #0045e6;
}
33% {
background: #fb3e3e;
}
66%{
background: #0dcc00;
}
}
/* Declare border pulse animation */
@keyframes borderPulse {
0% {
box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(255,255,255,1);
}
100% {
box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0);
}
}
如果由于某种原因上述代码不起作用，那么您可以借助上面的下载按钮。示例 – 3
文字脉冲动画 CSS
现在我们将学习如何在文本中添加脉冲动画。因为在很多地方我们在文本中使用动画。有几种方法可以为文本设置动画。不过CSS文本脉冲动画也用在很多地方。
它以非常简单的方式制作。仅使用几行 CSS 来创建此文本脉冲动画。
演示：https://www.foolishdeveloper.com/p/demo-2.html#demo9
如果你想知道这个CSS 脉冲动画是如何工作的，那么你可以看上面的演示。在这里你会找到所有的源代码。首先，我使用单行 HTML 添加了文本。然后在这里使用CSS设计。
这里使用三秒动画。动画开始时可以看到文本。中间，也就是1.5秒后的一段时间，文字的光学会为零，所以看不到文字。
已添加所有信息以使用以下 HTML 代码创建文本脉冲动画。复制下面的代码并将它们添加到您的 HTML 文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<!--CSS file-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="element">Some example text</h1>
</body>
</html>
现在是时候用一些 CSS 来实现这个脉冲动画了。复制这些代码并将它们添加到您的 CSS 文件中。
html,
body {
height: 100%;
text-align: center;
margin: 50px auto;
font-family: sans-serif;
}
.element {
width: 100%;
height: 100%;
animation: pulse 3s infinite;
}
@keyframes pulse {
0% {
color: #0682f5;
}
50%{
opacity: 0;
}
100% {
color: #0682f5;
}
}
例子 – 4
图像脉冲动画 CSS
现在您知道如何使用 CSS 创建图像脉冲动画了。上面我们在文本中添加了这个脉冲动画，在按钮中。现在我将在一个简单的图像中添加这个简单的脉冲动画。
有很多方法可以使图像具有吸引力。悬停效果就是其中之一。但是，使用这种类型的脉冲动画，您可以使任何图像更具吸引力。
演示：https://www.foolishdeveloper.com/p/demo-2.html#demo6
这里只使用 CSS 来执行这个CSS 脉冲动画图像。从上面的演示中，您可以了解它是如何工作的。
最初添加了一个图像，该图像是圆形的。然后在图像周围添加彩色动画，使图像更具吸引力。
此图像脉冲动画所需的图像已使用以下 HTML 代码添加。我在这里只使用了一行代码。
<!DOCTYPE html>
<!--Button Pulse Animation-->
<html lang="en">
<head>
<!--== Design by foolishdeveloper.com ==-->
<!--CSS file-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="image-pulse">
<img src="https://1.bp.blogspot.com/-vhmWFWO2r8U/YLjr2A57toI/AAAAAAAACO4/0GBonlEZPmAiQW4uvkCTm5LvlJVd_-l_wCNcBGAsYHQ/s16000/team-1-2.jpg">
</div>
</body>
</html>
下面的 CSS 设计了这个图像，然后使用之前和之后对其进行动画处理。
body {
display: grid;
place-items: center;
margin: 0;
height: 100vh;
background-color: #000;
}
.image-pulse {
--pulse-width: 15px;
--pulse-color: rgba(135, 200, 235, 0.5);
position: relative;
}
.image-pulse img {
position: relative;
border-radius: 50%;
z-index: 2;
width: 200px;
height: 200px;
}
.image-pulse::after, .image-pulse::before {
content: " ";
position: absolute;
box-sizing: border-box;
border-style: solid;
border-color: var(--pulse-color);
border-width: var(--pulse-width);
border-radius: 50%;
z-index: 1;
width: 140%;
height: 140%;
top: -20%;
left: -20%;
right: -20%;
bottom: -20%;
transform: scale(0.7);
animation: pulse 2s linear infinite;
}
.image-pulse::after {
animation-delay: 1s;
}
.image-pulse:hover::after, .image-pulse:hover::before {
animation: pulse 1s linear infinite,
pulse-hover 5s linear infinite;
}
.image-pulse:hover::after {
animation-delay: 0.5s;
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}
@keyframes pulse-hover {
0% {
border-color: red;
}
25% {
border-color: #80ff00;
}
50% {
border-color: aqua;
}
75% {
border-color: #8000ff;
}
100% {
border-color: red;
}
}
示例 – 5
悬停时的 CSS 脉冲动画
我们将知道如何在悬停按钮上添加脉冲动画。上面我们看到了一个设计，我们在按钮上添加了一个脉冲动画。但它有点不同。在这里，我们在按钮的正常状态下看不到任何动画。
当您将鼠标悬停在按钮上时，可以看到悬停时的此脉冲动画。这意味着当您单击或悬停在按钮上时，我们将在这两种情况下看到此脉冲动画。
演示：https://www.foolishdeveloper.com/p/demo-2.html#demo8
同样，我首先为此创建了一个按钮。然后我使用 CSS 设计了按钮，并为按钮添加了一些正常的颜色变化效果。
如果你想下载所有的源代码，你可以使用上面的下载按钮。
已添加使用以下 HTML 代码创建按钮的所有信息。
<!DOCTYPE html>
<html lang="en">
<head>
<!--CSS file-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="pulse-button-hover">Pulse on hover</button>
</body>
</html>
现在是时候用 CSS 来实现这个CSS 脉冲动画了。这里使用了更多的 CSS。因为首先设计了按钮，然后添加了正常的颜色动画。然后在这里的按钮中添加悬停时的 CSS 脉冲动画。
html{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
body {
background-color: #222222;
align-self: center;
text-align: center;
}
/* Button resets and style */
button {
margin: 15px auto;
border-radius: 100px;
padding: 15px 20px;
border: 0px solid #000;
font-family: "Montserrat";
font-size: 20px;
color: #ffffff;
cursor: pointer;
}
/* Initiate color change for pulse-on-hover */
button.pulse-button-hover {
animation: colorShift 10000ms infinite ease-in;
}
/* Continue animation and add shine on hover */
button:hover,
button:focus {
animation: borderPulse 1000ms infinite ease-out,
colorShift 10000ms infinite ease-in,
hoverShine 200ms;
}
/* Declate color shifting animation */
@keyframes colorShift {
0%, 100% {
background: #0045e6;
}
33% {
background: #fb3e3e;
}
66%{
background: #0dcc00;
}
}
/* Declare border pulse animation */
@keyframes borderPulse {
0% {
box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(255,255,255,1);
}
100% {
box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0);
}
}
/* Declare shine on hover animation */
@keyframes hoverShine {
0%{
background-image: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
}
50%{
background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
}
100%{
background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4) 100%);
}
}
希望从本教程中，你已经掌握了各种CSS 脉冲动画设计关系的思路。
在这里，我与您讨论了如何创建简单的脉冲动画 CSS、按钮脉冲动画、文本脉冲动画等。
