css实现网页右下角点赞小卡片效果（实例代码）

效果

实现HT ML 先准备一个干净的 html 页面，写好节点：

<!DOCTY PE  html>
<html lang="en">
<head>
    < ;m eta charset="UTF-8">
    <meta n am e="viewport" content="width=device-width, in IT ial -s cale=1.0">
    <title>Document</title>
    <link rel="styleSheet" type="text/css"  hr ef="./style.css" />
</head>
<body>
    
    <div>
        <section class="card">
            <div class="card -t op">
                此页 面对 您 是否 有帮助？
            </div>
            <div class="card-bottom">
                <div title="& # 128077;">
                    YES
                </div>
                <div title="👎">
                    NO
                </div>
            </div>
        </section>
    </div>
</body>
</html>

CSS

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

body {
    m arg in: 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-f ami ly: "Fira Code", Hack, Consolas;
}

:root {
    --color: #ff4081
}

section {
    mar gin : 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: trans latex (-20px) translate(103px, 27px) rotate(35 deg );
    transition: all 400ms c ub ic-bezier(0.26, 0.6, 0.4, 1.54);
}

.card:hover {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) translateX(-20px);
}

.card-top {
    h ei ght: 50px;
    line-height: 50px;
    padding: 0 1rem;
    text-align:  center ;
     user-select : none;
    color: #fff;
}

.card-bottom {
    dis play : 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;
}

两个动画：

rotate(0deg) -> rotate(35deg) translate(0px, 0px) -> translate(103px, 27px)

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

注意这里 translateX(-20px) 是动画前后一致的，一共只有两个属性改变。

总结

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

总结

以上是为你收集整理的 css实现网页右下角点赞小卡片效果（实例代码）全部内容，希望文章能够帮你解决 css实现网页右下角点赞小卡片效果（实例代码）所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css实现网页右下角点赞小卡片效果（实例代码）的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201440

更新时间：2023-04-27 阅读：23次