| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
|
|
|
| <style type="text/css">
|
|
|
| /*---sharetoggle--*/
|
| #ss_menu {
|
| z-index: 9999;
|
| bottom: 30px;
|
| width: 60px;
|
| height: 60px;
|
| color: #fff;
|
| position: fixed;
|
| -webkit-transition: all 1s ease;
|
| -moz-transition: all 1s ease;
|
| transition: all 1s ease;
|
| right: 30px;
|
| -webkit-transform: rotate(180deg);
|
| -moz-transform: rotate(180deg);
|
| -ms-transform: rotate(180deg);
|
| -o-transform: rotate(180deg);
|
| transform: rotate(180deg);
|
|
|
| }
|
|
|
| #ss_menu > .menu {
|
| display: block;
|
| position: absolute;
|
| border-radius: 50%;
|
| width: 60px;
|
| height: 60px;
|
| text-align: center;
|
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
|
| color: #fff;
|
| -webkit-transition: all 1s ease;
|
| -moz-transition: all 1s ease;
|
| transition: all 1s ease;
|
| bottom: 14px;
|
| right: -1px;
|
|
|
| }
|
|
|
| #ss_menu > .menu .share {
|
| width: 100%;
|
| height: 100%;
|
| position: absolute;
|
| left: 0px;
|
| top: 0px;
|
| -webkit-transform: rotate(180deg);
|
| -moz-transform: rotate(180deg);
|
| -ms-transform: rotate(180deg);
|
| -o-transform: rotate(180deg);
|
| transform: rotate(180deg);
|
| -webkit-transition: all 1s ease;
|
| -moz-transition: all 1s ease;
|
| transition: all 1s ease;
|
| border-radius:100%;
|
| background: #ff242d;
|
| }
|
|
|
| #ss_menu > .menu .share .circle {
|
| -webkit-transition: all 1s ease;
|
| -moz-transition: all 1s ease;
|
| transition: all 1s ease;
|
| position: absolute;
|
| width: 12px;
|
| height: 12px;
|
| border-radius: 50%;
|
| background: #fff;
|
| top: 50%;
|
| margin-top: -6px;
|
| left: 12px;
|
| opacity: 1;
|
| }
|
|
|
| #ss_menu > .menu .share .circle:after, #ss_menu > .menu .share .circle:before {
|
| -webkit-transition: all 1s ease;
|
| -moz-transition: all 1s ease;
|
| transition: all 1s ease;
|
| content: '';
|
| opacity: 1;
|
| display: block;
|
| position: absolute;
|
| width: 12px;
|
| height: 12px;
|
| border-radius: 50%;
|
| background: #fff;
|
| }
|
|
|
| #ss_menu > .menu .share .circle:after {
|
| left: 20.78461px;
|
| top: 12.0px;
|
| }
|
|
|
| #ss_menu > .menu .share .circle:before {
|
| left: 20.78461px;
|
| top: -12.0px;
|
| }
|
|
|
| #ss_menu > .menu .share .bar {
|
| -webkit-transition: all 1s ease;
|
| -moz-transition: all 1s ease;
|
| transition: all 1s ease;
|
| width: 24px;
|
| height: 3px;
|
| background: #fff;
|
| position: absolute;
|
| top: 50%;
|
| margin-top: -1.5px;
|
| left: 18px;
|
| -webkit-transform-origin: 0% 50%;
|
| -moz-transform-origin: 0% 50%;
|
| -ms-transform-origin: 0% 50%;
|
| -o-transform-origin: 0% 50%;
|
| transform-origin: 0% 50%;
|
| -webkit-transform: rotate(30deg);
|
| -moz-transform: rotate(30deg);
|
| -ms-transform: rotate(30deg);
|
| -o-transform: rotate(30deg);
|
| transform: rotate(30deg);
|
| }
|
|
|
| #ss_menu > .menu .share .bar:before {
|
| -webkit-transition: all 1s ease;
|
| -moz-transition: all 1s ease;
|
| transition: all 1s ease;
|
| content: '';
|
| width: 24px;
|
| height: 3px;
|
| background: #fff;
|
| position: absolute;
|
| left: 0px;
|
| -webkit-transform-origin: 0% 50%;
|
| -moz-transform-origin: 0% 50%;
|
| -ms-transform-origin: 0% 50%;
|
| -o-transform-origin: 0% 50%;
|
| transform-origin: 0% 50%;
|
| -webkit-transform: rotate(-60deg);
|
| -moz-transform: rotate(-60deg);
|
| -ms-transform: rotate(-60deg);
|
| -o-transform: rotate(-60deg);
|
| transform: rotate(-60deg);
|
| }
|
|
|
| #ss_menu > .menu .share.close .circle { opacity: 0; }
|
|
|
| #ss_menu > .menu .share.close .bar {
|
| top: 50%;
|
| margin-top: -1.5px;
|
| left: 50%;
|
| margin-left: -12px;
|
| -webkit-transform-origin: 50% 50%;
|
| -moz-transform-origin: 50% 50%;
|
| -ms-transform-origin: 50% 50%;
|
| -o-transform-origin: 50% 50%;
|
| transform-origin: 50% 50%;
|
| -webkit-transform: rotate(405deg);
|
| -moz-transform: rotate(405deg);
|
| -ms-transform: rotate(405deg);
|
| -o-transform: rotate(405deg);
|
| transform: rotate(405deg);
|
| }
|
|
|
| #ss_menu > .menu .share.close .bar:before {
|
| -webkit-transform-origin: 50% 50%;
|
| -moz-transform-origin: 50% 50%;
|
| -ms-transform-origin: 50% 50%;
|
| -o-transform-origin: 50% 50%;
|
| transform-origin: 50% 50%;
|
| -webkit-transform: rotate(-450deg);
|
| -moz-transform: rotate(-450deg);
|
| -ms-transform: rotate(-450deg);
|
| -o-transform: rotate(-450deg);
|
| transform: rotate(-450deg);
|
| }
|
|
|
| #ss_menu > .menu.ss_active {
|
| background: #01b7f2;
|
| -webkit-transform: scale(0.7);
|
| -moz-transform: scale(0.7);
|
| -ms-transform: scale(0.7);
|
| -o-transform: scale(0.7);
|
| transform: scale(0.7);
|
| bottom: 39px;
|
| right: -25%;
|
| }
|
|
|
| #ss_menu > div {
|
| -webkit-box-sizing: border-box;
|
| -moz-box-sizing: border-box;
|
| box-sizing: border-box;
|
| position: absolute;
|
| width: 60px;
|
| height: 60px;
|
| font-size: 30px;
|
| text-align: center;
|
| background: #01b7f2;
|
| border-radius: 50%;
|
| display: table;
|
| }
|
|
|
| #ss_menu > div i {
|
| display: table-cell;
|
| vertical-align: middle;
|
| color: #fff;
|
| line-height: 61px;
|
| }
|
|
|
| #ss_menu > div:hover {
|
| background: #009688;
|
| cursor: pointer;
|
| }
|
|
|
| #ss_menu div:nth-child(1) {
|
| top: 0px;
|
| left: -160px;
|
| background: #0797ef;
|
| }
|
|
|
| #ss_menu div:nth-child(2) {
|
| top: -80.0px;
|
| left: -138.56406px;
|
| background: #1dcaff;
|
| }
|
|
|
| #ss_menu div:nth-child(3) {
|
| top: -138.56406px;
|
| left: -80.0px;
|
| background: #0077b5;
|
| }
|
|
|
| #ss_menu div:nth-child(4) {
|
| top: -160px;
|
| left: 0.0px;
|
| background: #dd4b39;
|
| }
|
| .static
|
| {
|
| position: static !important;
|
| }
|
| .pulse {
|
| /* margin: 100px; */
|
| /* display: block; */
|
| /* width: 22px; */
|
| /* height: 22px; */
|
| border-radius: 0% 0% 0% 0%;
|
| background: rgb(18, 155, 244);
|
| cursor: pointer;
|
| box-shadow: 0 0 0 rgb(18, 155, 244, 0.5);
|
| animation: pulse 1.5s infinite;
|
| font-size: 16px;
|
| }
|
| .pulse:hover {
|
| /* animation: none; */
|
| color: #fff;
|
| }
|
| .pulse:focus {
|
| /* animation: none; */
|
| color: #fff;
|
| }
|
| @-webkit-keyframes pulse {
|
| 0% {
|
| -webkit-box-shadow: 0 0 0 0 rgba(18, 155, 244, 0.8);
|
| }
|
| 70% {
|
| -webkit-box-shadow: 0 0 0 10px rgba(18, 155, 244, 0);
|
| }
|
| 100% {
|
| -webkit-box-shadow: 0 0 0 0 rgba(18, 155, 244, 0);
|
| }
|
| }
|
| @keyframes pulse {
|
| 0% {
|
| -moz-box-shadow: 0 0 0 0 rgba(18, 155, 244, 0.8);
|
| box-shadow: 0 0 0 0 rgba(18, 155, 244, 0.4);
|
| }
|
| 70% {
|
| -moz-box-shadow: 0 0 0 10px rgba(18, 155, 244, 0.5);
|
| box-shadow: 0 0 0 10px rgba(18, 155, 244, 0);
|
| }
|
| 100% {
|
| -moz-box-shadow: 0 0 0 0 rgba(18, 155, 244, 0);
|
| box-shadow: 0 0 0 0 rgba(18, 155, 244, 0);
|
| }
|
| }
|
|
|
| /*---sharetoggle--*/
|
| </style>
|
|
|
|
|
| <div id='ss_menu'>
|
| <div> <a href="https://facebook.com" title="Facebook"><i class="fa fa-facebook-official"></i></a> </div>
|
| <div> <a href="https://twitter.com" title="Twitter"> <i class="fa fa-twitter"></i></a> </div>
|
| <div> <a href="https://linkedin.com" title="Linkedin"><i class="fa fa-linkedin"></i></a> </div>
|
| <div> <a href="https://googleplus.com" title="pinterest"> <i class="fa fa-pinterest"></i> </a></div>
|
| <div class='menu'>
|
| <div class='share' id='ss_toggle' data-rot='180'>
|
| <div class='circle'></div>
|
| <div class='bar'></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
|
|
|
|
|
| <script>
|
| $(document).ready(function(ev) {
|
| var toggle = $('#ss_toggle');
|
| var menu = $('#ss_menu');
|
| var rot;
|
|
|
| $('#ss_toggle').on('click', function(ev) {
|
| rot = parseInt($(this).data('rot')) - 180;
|
| menu.css('transform', 'rotate(' + rot + 'deg)');
|
| menu.css('webkitTransform', 'rotate(' + rot + 'deg)');
|
| if ((rot / 180) % 2 == 0) {
|
| //Moving in
|
| toggle.parent().addClass('ss_active');
|
| toggle.addClass('close');
|
| } else {
|
| //Moving Out
|
| toggle.parent().removeClass('ss_active');
|
| toggle.removeClass('close');
|
| }
|
| $(this).data('rot', rot);
|
| });
|
|
|
| menu.on('transitionend webkitTransitionEnd oTransitionEnd', function() {
|
| if ((rot / 180) % 2 == 0) {
|
| $('#ss_menu div i').addClass('ss_animate');
|
| } else {
|
| $('#ss_menu div i').removeClass('ss_animate');
|
| }
|
| });
|
|
|
| });
|
| </script>
|
|
|
|
|
|
|
Comments
Post a Comment