Home >Web Front-end >CSS Tutorial >Pure CSS3 creates an animated special effect where the border shadow spreads outwards
Pure CSS3 creates an animated special effect where the border shadow spreads outwards
- 青灯夜游Original
- 2021-08-25 17:53:056082browse
In the previous article "Teach you step-by-step how to use CSS3 to implement dynamic effects of button hovering and flashing", we introduced the use of CSS3 to add dynamic effects to buttons and achieve a button hovering and flashing shadow animation effect. If you are interested, you can learn about it~
Today, this article will share with you a border animation effect. Let’s see how to use CSS3 to achieve the animation effect of the border shadow spreading outward.
Let’s take a look at the renderings first:
Let’s study how to achieve this effect:
First create the HTML part , define a div container, containing the text:
<div id="box"> 编程是为那些有不同想法的人准备的。。。<br /> 对于那些想要创造伟大事物并愿意改变世界的人。 </div>
and then start defining css styles for modification : Adjust layout style, background color, div center alignment, font color
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #00ac69;
}
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
border: 2px solid;
padding: 15px;
}
Right angles don’t look good, we can use border-radius to align the four corners of the border Set to rounded corners
#box {
border-radius: 10px;
}
##The following is the most critical, creating the animation effect of the shadow spreading outward:We use animation and @keyframes to achieve
- First bind animation to the #box element, use the animation attribute to specify a name for the @keyframes animation, set the time it takes to complete the animation, and the speed curve of the animation.
#box {
animation: animated-border 1.5s infinite;
}
- Then use @keyframes to set the action of each frame of the animationHere is the beginning of setting the animation (0%{} ), the border-shadow is
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
; then when the animation is completed (100%{}), the border-shadow isbox-shadow: 0 0 0 20px rgba(255, 255, 255, 0);, the shadow distance becomes larger and the color becomes transparent.
@keyframes animated-border {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #00ac69;
}
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
border: 2px solid;
padding: 15px;
border-radius: 10px;
animation: animated-border 1.5s infinite;
}
@keyframes animated-border {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}
</style>
</head>
<body>
<div id="box">
编程是为那些有不同想法的人准备的。。。<br />
对于那些想要创造伟大事物并愿意改变世界的人。
</div>
</body>
</html> Finally, I will introduce to you the key attributes animation and @keyframes:
- animation Property is a shorthand property that can set multiple animation properties in a single declaration:
animation-name：指定要绑定到选择器的关键帧的名称 animation-duration：动画指定需要多少秒或毫秒完成 animation-timing-function：设置动画将如何完成一个周期 animation-delay：设置动画在启动前的延迟间隔。 animation-iteration-count：定义动画的播放次数。 animation-direction：指定是否应该轮流反向播放动画。 animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 animation-play-state：指定动画是否正在运行或已暂停。
@keyframes
Rules are used to define CSS animations A periodic behavior; needs to be used together with the animation attribute to create simple animation effects.
/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
}Inside the braces of the @keyframes rule, we need to define keyframes or waypoints that specify the value of the property being animated at a specific point during the animation. This allows us to control intermediate steps in the animation sequence. For example, in the above example: @keyframes animated-border {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
} The PHP Chinese website platform has a lot of video teaching resources. Everyone is welcome to learn "css Video Tutorial"!
The above is the detailed content of Pure CSS3 creates an animated special effect where the border shadow spreads outwards. For more information, please follow other related articles on the PHP Chinese website!