Bootstrap Snippet Animated Form Headings using HTML CSS

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
        <h2>Animated Bootstarp Form Headings Style 1/3</h2>
    </div>
            <svg viewBox="0 0 600 300">
                <!-- Symbol with text -->
                <symbol id="s-text">
                    <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line">
                        Bootsnipp
                    </text>
                </symbol>
                <!-- Clippath  with text -->
                <clippath id="cp-text">
                    <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line">
                        Bootsnipp
                    </text>
                </clippath>
                <!-- Group for shadow -->
                <g clip-path="url(#cp-text)" class="shadow">
                    <rect width="100%" height="100%" class="anim-shape anim-shape--shadow"></rect>
                </g>
                <!-- Group with clippath for text-->
                <g clip-path="url(#cp-text)" class="colortext">
                    <!-- Animated shapes inside text -->
                    <rect width="100%" height="100%" class="anim-shape"></rect>
                    <rect width="80%" height="100%" class="anim-shape"></rect>
                    <rect width="60%" height="100%" class="anim-shape"></rect>
                    <rect width="40%" height="100%" class="anim-shape"></rect>
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
26
27
28
29
30
31
32
33
34
35
36
37
body {
  background: black;
  color: #fff; }
/*1/6*/
/* Main stuff */
.text--transparent {
  fill: transparent; }
.anim-shape {
  -webkit-transform-origin: 0x 150px;
  transform-origin: 0x 150px;
  -webkit-transform: scale(0, 1) translate(0, 0);
  transform: scale(0, 1) translate(0, 0);
  -webkit-animation: moving-panel 3s infinite alternate;
  animation: moving-panel 3s infinite alternate; }
  .colortext .anim-shape:nth-child(1) {
    fill: #0e1826; }
  .colortext .anim-shape:nth-child(2) {
    fill: #166973; }
  .colortext .anim-shape:nth-child(3) {
    fill: #65bfa6; }
  .colortext .anim-shape:nth-child(4) {
    fill: #f2cd5c; }
  .colortext .anim-shape:nth-child(5) {
    fill: #f26444; }
.shadow {
  -webkit-transform: translate(10px, 10px);
  transform: translate(10px, 10px); }
.anim-shape--shadow {
  fill: #000;
  fill-opacity: 0.2; }
@-webkit-keyframes moving-panel {
  100% {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animated Form Headings"
Bootstrap 3.3.0 Snippet by AtiqUrRehman

Related: See More

Questions / Comments:

"Animated Form Headings" Bootstrap 3.3.0 Snippet by AtiqUrRehman

Related: See More

Questions / Comments:

"Animated Form Headings"
Bootstrap 3.3.0 Snippet by AtiqUrRehman