"Gradient background animation"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.11.9/jquery.velocity.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%">
<linearGradient id="background" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
<stop id="one" offset="0%" stop-color="crimson"/>
<stop id="two" offset="100%" stop-color="cyan"/>
</linearGradient>
<rect id="rect" width="100%" height="100%" fill="url(#background)"/>
<g cursor="pointer" id="group" opacity="0">
<a xlink:href="http://uigradients.com/" target="_blank">
<text class="texto-tittle" id="texto" x="0" y="300">uiGradients</text>
</a>
<a xlink:href="https://github.com/Ghosh/uiGradients" target="_blank">
<g transform="translate(255,272)">
<circle r="16" cx="16" cy="16" fill="white"/>
<path fill="black" d="M16,0C7.2,0,0,7.2,0,16c0,7.1,4.6,13.1,11,15.2 c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.7,2.5,1.7c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3 c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5c3.1-2.1,4.4-1.6,4.4-1.6 c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.2-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4 c0,0.4,0.3,0.9,1.1,0.8C27.4,29.1,32,23.1,32,16C32,7.2,24.9,0,16,0z"/>
</g>
</a>
</g>
</svg>
<script>
$("#texto")
.delay(10500)
.velocity({x: 70 },{duration:500, easing: "easeInSine"});
$("#group")
.delay(10500)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@import url(https://fonts.googleapis.com/css?family=Playball|Open+Sans+Condensend:300);
body {
background-color: snow;
}
html, body, svg {
margin: 0;
width: 100%;
height: 100%;
}
.texto-tittle {
font-family: 'Playball', cursive;
font-size: 40px;
fill: snow;
}
.texto-by {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 12px;
fill: snow;
letter-spacing: 1px;
opacity: .8;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: