Social Icons Bar – 有爱前端

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>Social Icons Bar</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Dosis:300,400,700|Noto+Sans'); /* variables */ /* mixins */ /* global */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Dosis', sans-serif; background-color: #555; } .social-container { background-color: #333; text-align: center; transition: all .3s ease-in-out; padding-bottom: 50px; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .social-title { padding: 30px 0; color: #fff; visible: hidden; opacity: 0; transition: all .3s ease-in-out; font-size: 24px; text-transform: uppercase; letter-spacing: 5px; font-weight: 300; } @media (min-width: 530px) { .social-title { padding: 50px 0; font-size: 42px; text-transform: uppercase; letter-spacing: 10px } } .social-title--visible { visible: visible; opacity: 1; } .social-item { width: 40px; height: 40px; display: inline-block; text-align: center; margin-right: 5px; transition: all .3s ease-in-out; border-radius: 4px; } @media (min-width: 530px) { .social-item { width: 60px; height: 60px; margin-right: 10px } } .social-item:hover { animation: bounce 1s; } .social-icon { font-size: 24px; padding-top: 8px; color: #fff; } @media (min-width: 530px) { .social-icon { font-size: 36px; padding-top: 12px } } /* social colors */ .linkedin-color { background-color: #0077B5; } .dribbble-color { background-color: #ea4c89; } .codepen-color { background-color: #191919; } .blogger-color { background-color: #f57d00; } /* animations */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } } </style> </head> <body> <div class="social-container"> <h3 class="social-title">FOLLOW US</h3> <a href="#" class="social-item linkedin-color"> <i class="fab fa-linkedin social-icon"></i> </a> <a href="#" class="social-item dribbble-color"> <i class="fab fa-dribbble social-icon"></i> </a> <a href="#" class="social-item codepen-color"> <i class="fab fa-codepen social-icon"></i> </a> <a href="#" class="social-item blogger-color"> <i class="fab fa-blogger social-icon"></i> </a> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.social-item').each(function (index, value) { $(this).hover(function () { var getClassName = $(this).attr('class').split(' ')[1]; $(".social-container").addClass(getClassName); $(".social-title").addClass("social-title--visible"); var getTitle = getClassName.substr(0, getClassName.indexOf('-')); $(".social-title").text(getTitle); }, function () { var getClassName = $(this).attr('class').split(' ')[1]; $(".social-container").removeClass(getClassName); $(".social-title").removeClass("social-title--visible"); }); }); }); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » Social Icons Bar