个人中心点击展示媒体信息 按钮

发布于 2020-02-20  199 次阅读

展示地址：http://show.cqdefxxx.com/Media%20Buttons/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" href="style.css">
        <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	</head>
	<body>
        <div class="middle">
            <div class="sm-container">
                <i class="show-btn fas fa-user"></i>
                <div class="sm-menu">
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-zhihu"></i></a>
                </div>
            </div>
        </div>
     <script type="text/javascript">
         $(".show-btn").click(function(){
             $(".sm-menu").fadeToggle("fast");
         })
     </script>
	</body>
</html>

style.css

body{
    margin:0;
    padding: 0;
    background: #9c88ff;
}

.middle{
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-50%);
}

.sm-container{
    text-align: center;
}

.sm-container i{
    color: #f5f6fa;
    padding: 20px;
    font-size: 20px;
    cursor:pointer;
    tansition:0.4s;
}

.sm-container i:hover{
    transform:scale(1.2);    
}

.sm-menu{
    background: #0097e6;
    position: absolute;
    border-radius: 8px;
    display: none;
}

.sm-menu:before{
    content: "";
    width:10px;
    height: 10px;
    background: #0097e6;
    position: absolute;
    top:-5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

 

 

注错之当