脚本之家网页右下角点赞小卡片内容：惊艳你的眼球！

效果

实现HTML先打算一个干净的 html 页面，写好节点：

    
    
    
    


    
    

        

            

                此页面对您是否有帮助？
            
            

                

                    YES
                
                

                    NO
                
            
        
    

CSS

同级目录构建一个 style.css 编写我们的款式：

body {
    margin: 0;
    padding: 0;
    /* mobile 端切换横竖屏适配 */
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    /* 渲染优化 */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
}
* {
    box-sizing: border-box;
    font-family: "Fira Code", Hack, Consolas;
}
:root {
    --color: #ff4081
}
section {
    margin: 0;
    padding: 0;
}
.card {
    font-size: inherit;
    position: fixed;
    right: 0;
    bottom: 0;
    background-color: var(--color);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 16px 60px 0 rgba(86, 91, 115, 0.2);
    opacity: 0.5;
    transform: translateX(-20px) translate(103px, 27px) rotate(35deg);
    transition: all 400ms cubic-bezier(0.26, 0.6, 0.4, 1.54);
}
.card:hover {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) translateX(-20px);
}
.card-top {
    height: 50px;
    line-height: 50px;
    padding: 0 1rem;
    text-align: center;
    user-select: none;
    color: #fff;
}
.card-bottom {
    display: flex;
    background-color: #fff;
    justify-content: space-evenly;
}
.card-bottom div {
    padding: 1rem;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none ;
    color: var(--color);
    transition: all .2s linear;
}
.card-bottom div:hover {
    text-shadow: 0 1px 1px var(--color);
    letter-spacing: 1px;
}

两个动漫：

动画过程：transform: translateX(-20px) translate(103px, 27px) rotate(35deg);

注意这儿 translateX(-20px) 是动漫前后一致的网页点赞，一共只有两个属性改变。

总结

到此这篇关于css实现网页右下角点赞小卡片疗效（实例代码）的文章就介绍到这了,更多相关css网页右下角点赞小卡片内容请搜索脚本之家先前的文章或继续浏览下边的相关文章网页点赞，希望你们之后多多支持脚本之家！