HTML5+CSS3小实例：3D分层按钮的悬停效果

HTML5+CSS3小实例之3D分层按钮的悬停效果

技术栈：HTML+CSS

字体图标库：font-awesome

效果：

源码：

    
    

    
    
    



    

        
            

                
                
                
                
                
            
            
QQ
        
        
            

                
                
                
                
                
            
            
微信
        
        
            

                
                
                
                
                
            
            
微博
        
        
            

                
                
                
                
                
            
            
人人网
        
        
            

                
                
                
                
                
            
            
推特
        
    

*{
    /* 初始化 取消内外边距 */
    margin: 0;
    padding: 0;
    /* 设置的边框和内边距的值是包含在总宽高内的 */
    box-sizing: border-box;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#29323c,#485563);
}
.icon-box{
    /* 弹性布局 水平排列 */
    display: flex;
    flex-direction: row;
}
.icon-box a{
    color: #fff;
    margin: 0 30px;
    text-decoration: none;
    display: block;
    /* 相对定位 */
    position: relative;
}
.icon-box a .layer{
    width: 70px;
    height: 70px;
    /* 动画过渡 */
    transition: 0.3s;
}
.icon-box a .layer i{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* --c是自定义属性（颜色），通过var函数进行调用 */
    border: 1px solid var(--c);
    border-radius: 6px;
    transition: 0.3s;
}
.icon-box a .layer i.fa{
    font-size: 35px;
    text-align: center;
    line-height: 70px;
    color: var(--c);
}
.icon-box a .text{
    position: absolute;
    bottom: 0;
    opacity: 0;
    width: 100%;
    text-align: center;
    color: var(--c);
    transition: 0.3s;
}
.icon-box a:hover .text{
    /* 鼠标移入文本出现 */
    bottom: -35px;
    opacity: 1;
}
.icon-box a:hover .layer{
    /* 鼠标移入，该元素旋转-35度并倾斜20度 */
    transform: rotate(-35deg) skew(20deg);
}
/* 鼠标移入，设置图标外的每一层边框样式（不透明度+位置偏移） */
.icon-box a:hover .layer i:nth-child(1){
    opacity: 0.2;
    transform: translate(0,0);
}
.icon-box a:hover .layer i:nth-child(2){
    opacity: 0.4;
    transform: translate(5px,-5px);
}
.icon-box a:hover .layer i:nth-child(3){
    opacity: 0.6;
    transform: translate(10px,-10px);
}
.icon-box a:hover .layer i:nth-child(4){
    opacity: 0.8;
    transform: translate(15px,-15px);
}
.icon-box a:hover .layer i:nth-child(5){
    opacity: 1;
    transform: translate(20px,-20px);
}
/* 鼠标移入，设置每一层边框的阴影样式 */
.icon-box a:hover .layer i{
    box-shadow: -1px 1px 3px var(--c);
}
/* 设置自定义属性--c，为每一个按钮赋予颜色 */
.icon-box a:nth-child(1) .layer i,
.icon-box a:nth-child(1) .text{
    --c: #12B7F5;
}
.icon-box a:nth-child(2) .layer i,
.icon-box a:nth-child(2) .text{
    --c: #2AAE67;
}
.icon-box a:nth-child(3) .layer i,
.icon-box a:nth-child(3) .text{
    --c: #E79115;
}
.icon-box a:nth-child(4) .layer i,
.icon-box a:nth-child(4) .text{
    --c: #2075fd;
}
.icon-box a:nth-child(5) .layer i,
.icon-box a:nth-child(5) .text{
    --c: #2D8DC5;
}