<html>
<body>
<div class="ribbon">
CSS Animated Ribbon
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<style>
body {
background: #ddd;
font: 14px/1.6em sans-serif;
}
.ribbon {
width: 400px;
height: 60px;
margin: 100px auto 0px;
position: relative;
color: #fff;
font: 28px/60px sans-serif;
text-align: center;
text-transform: uppercase;
background: #3D79D0;
-webkit-animation: main 250ms;
-moz-animation: main 250ms;
-ms-animation: main 250ms;
animation: main 250ms;
}
.ribbon i {
position: absolute;
}
.ribbon i:first-child, .ribbon i:nth-child(2) {
position: absolute;
left: -20px;
bottom: -20px;
z-index: -1;
border: 20px solid transparent;
border-right-color: #043140;
-webkit-animation: edge 500ms;
-moz-animation: edge 500ms;
-ms-animation: edge 500ms;
animation: edge 500ms;
}
.ribbon i:nth-child(2) {
left: auto;
right: -20px;
border-right-color: transparent;
border-left-color: #043140;
}
.ribbon i:nth-child(3), .ribbon i:last-child {
width: 20px;
bottom: -20px;
left: -60px;
z-index: -2;
border: 30px solid #1D53C0;
border-left-color: transparent;
-webkit-animation: back 600ms;
-moz-animation: back 600ms;
-ms-animation: back 600ms;
animation: back 600ms;
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.ribbon i:last-child {
bottom: -20px;
left: auto;
right: -60px;
border: 30px solid #1D53C0;
border-right-color: transparent;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
p {
text-align: center;
color: #aaa;
}
/* animations */
@-webkit-keyframes main {
0% { -webkit-transform: scaleX(0); }
100% { -webkit-transform: scaleX(1); }
}
@-webkit-keyframes edge {
0%, 50% { -webkit-transform: scaleY(0); }
100% { -webkit-transform: scaleY(1); }
}
@-webkit-keyframes back {
0%, 75% { -webkit-transform: scaleX(0); }
100% { -webkit-transform: scaleX(1); }
}
@-moz-keyframes main {
0% { -moz-transform: scaleX(0); }
100% { -moz-transform: scaleX(1); }
}
@-moz-keyframes edge {
0%, 50% { -moz-transform: scaleY(0); }
100% { -moz-transform: scaleY(1); }
}
@-moz-keyframes back {
0%, 75% { -moz-transform: scaleX(0); }
100% { -moz-transform: scaleX(1); }
}
@keyframes main {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
@keyframes edge {
0%, 50% { transform: scaleY(0); }
100% { transform: scaleY(1); }
}
@keyframes back {
0%, 75% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
</style>
</body>
</html>
Css animated ribbon
Reviewed by Network security
on
May 19, 2019
Rating:
Reviewed by Network security
on
May 19, 2019
Rating:
No comments: