<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 id="create"> <div class="rectframe" style="transform-origin: center;"></div> <div class="rect-fill" style="transform-origin: center;"></div> <div class="rectangle" style="transform-origin: center;"> <div class="img-circleblock2" style="transform-origin: center;"> РАЗМЕСТИТЬ </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic); .rectangle { } #create{ position: fixed; right: 10px; bottom:50px; z-index: 100000; max-height: 80px; max-width: 200px; /* font-family: 'Open Sans',sans-serif */ } .rectframe { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-sizing: content-box; -webkit-box-sizing: content-box; border: 2px solid #29aee3; width: 430px; height: 155px; bottom: -22px; right: -48px; position: absolute; /* -webkit-border-radius: 100%; */ -moz-border-radius: 100%; /* border-radius: 100%; */ opacity: .5; -webkit-animation: circle-anim 2.4s infinite ease-in-out!important; -moz-animation: circle-anim 2.4s infinite ease-in-out!important; -ms-animation: circle-anim 2.4s infinite ease-in-out!important; -o-animation: circle-anim 2.4s infinite ease-in-out!important; animation: circle-anim 2.4s infinite ease-in-out!important; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .rect-fill { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-sizing: content-box; -webkit-box-sizing: content-box; background-color: #29aee3; width: 305px; height: 110px; bottom: 0; right: 13px; position: absolute; /* -webkit-border-radius: 100%; */ -moz-border-radius: 100%; /* border-radius: 100%; */ border: 2px solid transparent; -webkit-animation: circle-fill-anim 2.3s infinite ease-in-out; -moz-animation: circle-fill-anim 2.3s infinite ease-in-out; -ms-animation: circle-fill-anim 2.3s infinite ease-in-out; -o-animation: circle-fill-anim 2.3s infinite ease-in-out; animation: circle-fill-anim 2.3s infinite ease-in-out; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .rectangle { background-color: #29aee3; box-sizing: content-box; -webkit-box-sizing: content-box; width: 213px; height: 77px; bottom: 17px; right: 59px; position: absolute; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 2px solid transparent; opacity: 1; } @-moz-keyframes circle-anim { 0% { -moz-transform: rotate(0deg) scale(0.5) skew(1deg); opacity: .1; -moz-opacity: .1; -webkit-opacity: .1; -o-opacity: .1; } 30% { -moz-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .5; -moz-opacity: .5; -webkit-opacity: .5; -o-opacity: .5; } 100% { -moz-transform: rotate(0deg) scale(1) skew(1deg); opacity: .6; -moz-opacity: .6; -webkit-opacity: .6; -o-opacity: .1; } } @-webkit-keyframes circle-anim { 0% { -webkit-transform: rotate(0deg) scale(0.5) skew(1deg); -webkit-opacity: .1; } 30% { -webkit-transform: rotate(0deg) scale(0.7) skew(1deg); -webkit-opacity: .5; } 100% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); -webkit-opacity: .1; } } @-o-keyframes circle-anim { 0% { -o-transform: rotate(0deg) kscale(0.5) skew(1deg); -o-opacity: .1; } 30% { -o-transform: rotate(0deg) scale(0.7) skew(1deg); -o-opacity: .5; } 100% { -o-transform: rotate(0deg) scale(1) skew(1deg); -o-opacity: .1; } } @keyframes circle-anim { 0% { transform: rotate(0deg) scale(0.5) skew(1deg); opacity: .1; } 30% { transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .5; } 100% { transform: rotate(0deg) scale(0.8) skew(1deg); opacity: .1; } } @-moz-keyframes circle-fill-anim { 0% { -moz-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } 50% { -moz-transform: rotate(0deg) -moz-scale(1) skew(1deg); opacity: .2; } 100% { -moz-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } } @-webkit-keyframes circle-fill-anim { 0% { -webkit-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } 50% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); opacity: .2; } 100% { -webkit-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } } @-o-keyframes circle-fill-anim { 0% { -o-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } 50% { -o-transform: rotate(0deg) scale(1) skew(1deg); opacity: .2; } 100% { -o-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } } @keyframes circle-fill-anim { 0% { transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } 50% { transform: rotate(0deg) scale(1) skew(1deg); opacity: .2; } 100% { transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } }