We first create the borders well use a dashed outline and a box shadow.
The outline have all its values; width, type and color. The box-shadow only needs the value for spread which should be the same as the outlines width and its color. The outline and box-shadow will make the effect of two-colored dashes.
After that we add CSS keyframe animations to a set of banners with the borders animating continuosly. For the animation effect well simply swap the colors of the outline and box shadow.
Here is the example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.animation-examples {
width: 600px;
height: 120px;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 30px;
font-weight: bold;
font-family: cambria;
}
.animation-examples.one {
color: #69D2E7;
outline: 10px dashed #E0E4CC;
box-shadow: 0 0 0 10px #69D2E7;
animation: 1s animateBorderOne ease infinite;
}
@keyframes animateBorderOne {
to {
outline-color: #69D2E7;
box-shadow: 0 0 0 10px #E0E4CC;
}
}
.animation-examples.two {
color: #FA2A00;
outline: 10px dashed #F2D694;
box-shadow: 0 0 0 10px #FA2A00;
animation: 2s animateBorderTwo ease infinite;
}
@keyframes animateBorderTwo {
to {
outline-color: #FA2A00;
box-shadow: 0 0 0 10px #F2D694;
}
}
.animation-examples.three {
color: #BEF202;
background: linear-gradient(to bottom, #BEF202 50%, #1B676B 50%);
background-size: auto 2px;
outline: 10px dashed #BEF202;
box-shadow: 0 0 0 10px #1B676B;
animation: 1s animateBorderThree ease infinite;
}
@keyframes animateBorderThree {
to {
outline-color: #1B676B;
box-shadow: 0 0 0 10px #BEF202;
}
}
#animation-examples{
margin: 20px 10px;
}
</style>
</head>
<body>
<div id="animation-examples">
<div class="animation-examples one">
Text Here
</div>
<br />
<br />
<div class="animation-examples two">Text Here</div>
<br />
<br />
<div class="animation-examples three">Text Here</div>
</div>
</body>
</html>
0 Comment(s)