Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 86
          • Tiện ích Blogspot 32
            Máy tính
            • Phần mềm 46
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Tuyển chọn một số nút gọi điện đẹp sử dụng hiệu ứng animation css

                    Dưới đây là một số nút gọi điện sử dụng hiệu ứng animation css mà mình thấy đẹp nên chia sẻ lại cho các bạn. Cách thực hiện cũng rất đơn giản, các bạn chỉ vào chỉnh sửa template thêm css vào <b:skin>...</b:skin>, sau đó thêm code html trước thẻ đóng </body> sửa lại số điện thoại là xong

                    1. Mẫu 1

                    Tuyển chọn một số nút gọi điện đẹp sử dụng hiệu ứng animation css

                    - Xem Demo: https://call-animation-css.blogspot.com/

                    + Code Css

                    Copy
                    .suntory-alo-phone{background-color:transparent;cursor:pointer;height:100px;position:fixed;left:0;bottom:0;transition:visibility 0.5s ease 0s;width:100px;z-index:200000!important}
                    .suntory-alo-ph-circle{animation:1.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim;background-color:transparent;border:2px solid rgba(30,30,30,0.4);border-radius:100%;height:100px;left:0;opacity:0.1;position:absolute;top:0;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:100px}
                    .suntory-alo-ph-circle-fill{animation:2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;border:2px solid transparent;border-radius:100%;height:70px;left:15px;position:absolute;top:15px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:70px}
                    .suntory-alo-ph-img-circle{border-radius:100%;height:50px;left:25px;opacity:1;position:absolute;top:25px;transform-origin:50% 50% 0;width:50px;border:3px solid #fff000}
                    .suntory-alo-phone.suntory-alo-hover,.suntory-alo-phone:hover{opacity:1}
                    .suntory-alo-phone.suntory-alo-active .suntory-alo-ph-circle{animation:1.1s ease-in-out 0s normal none infinite running suntory-alo-circle-anim!important}
                    .suntory-alo-phone.suntory-alo-static .suntory-alo-ph-circle{animation:2.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim!important}
                    .suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle,.suntory-alo-phone:hover .suntory-alo-ph-circle{border-color:#00aff2;opacity:0.5}
                    .suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle{border-color:#f00;opacity:1}
                    .suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle{border-color:#fff000;opacity:1}
                    .suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle-fill,.suntory-alo-phone:hover .suntory-alo-ph-circle-fill{background-color:rgba(0,175,242,0.9)}
                    .suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle-fill,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle-fill{background-color:#02A6E8}
                    .suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle-fill{background-color:#02A6E8}
                    .suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-img-circle,.suntory-alo-phone:hover .suntory-alo-ph-img-circle{background-color:#00aff2}
                    .suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-img-circle,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-img-circle{background-color:#02A6E8}
                    .suntory-alo-phone.suntory-alo-green .suntory-alo-ph-img-circle{background-color:#02A6E8}
                    @keyframes suntory-alo-circle-anim{0%{opacity:0.1;transform:rotate(0deg) scale(0.5) skew(1deg)}30%{opacity:0.5;transform:rotate(0deg) scale(0.7) skew(1deg)}100%{opacity:0.6;transform:rotate(0deg) scale(1) skew(1deg)}}
                    @keyframes suntory-alo-circle-img-anim{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}
                    @keyframes suntory-alo-circle-fill-anim{0%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}50%{opacity:0.2;transform:rotate(0deg) scale(1) skew(1deg)}100%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}}
                    .suntory-alo-ph-img-circle img{animation:1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim;font-size:30px;line-height:39px;color:#fff;display:block;max-width:100%;height:auto}
                    @keyframes suntory-alo-ring-ring{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}

                    + Code Html chèn trước thẻ đóng </body>

                    Copy
                    <a class='suntory-alo-phone suntory-alo-green' href='tel:0908562750' rel='nofollow' title='Gọi điện'>
                      <div class='suntory-alo-ph-circle'/>
                      <div class='suntory-alo-ph-circle-fill'/>
                      <div class='suntory-alo-ph-img-circle'>
                        <img alt='phone' class='img-responsive' src='https://3.bp.blogspot.com/-Px9aJ333WQM/XMVdoLK8eSI/AAAAAAAAP5E/vKlhW7cri28abyb6XJPBQzqc5tbi7JI1QCLcBGAs/s1600/phone_alo.png'/>
                      </div>
                    </a>

                    2. Mẫu 2

                    Tuyển chọn một số nút gọi điện đẹp sử dụng hiệu ứng animation css

                    + Code Css

                    Copy
                    .mypage-alo-phone{position:fixed;right:0;bottom:0;visibility:visible;background-color:transparent;width:110px;height:110px;cursor:pointer;z-index:200000!important}
                    .mypage-alo-ph-circle{width:90px;height:90px;top:12px;left:12px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,.4);opacity:.1;border-color:#00BBD2;opacity:.5}
                    .mypage-alo-ph-circle-fill{width:60px;height:60px;top:28px;left:28px;position:absolute;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:#00bcd4;opacity:.75!important}
                    .mypage-alo-ph-img-circle{width:50px;height:50px;top:33px;left:33px;position:absolute;background:rgba(30,30,30,.1) url(https://4.bp.blogspot.com/-Q0mmtfMrg3Y/XO6zLlEnhlI/AAAAAAAAQc8/e1qNMly6DY4YioZcqFJCA4oL2dfWWbBwQCLcBGAs/s1600/phone-icon.png) no-repeat center center;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.7;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;background-color:#00BBD2;background-size:70%}
                    .animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
                    .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
                    .zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
                    @-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
                    @keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
                    .pulse{-webkit-animation-name:pulse;animation-name:pulse}
                    @-webkit-keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
                    @keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
                    .tada{-webkit-animation-name:tada;animation-name:tada}
                    @-webkit-keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
                    @keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

                    + Code Html chèn trước thẻ đóng </body>

                    Copy
                    <a class='call-now' href='tel:0908562750' rel='nofollow' title='Gọi điện'>
                      <div class='mypage-alo-phone'>
                      <div class='animated infinite zoomIn mypage-alo-ph-circle'/>
                      <div class='animated infinite pulse mypage-alo-ph-circle-fill'/>
                      <div class='animated infinite tada mypage-alo-ph-img-circle'/>
                      </div>
                    </a>

                    Tiếp tục cập nhật khi có mẫu khác...
                    Nội dung chính
                      Bài đăng cũ hơn