欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css實現(xiàn)網(wǎng)頁右下角點贊小卡片效果（實例代碼）

  發(fā)布時間：2020-09-02 10:07:23   作者：萌信   我要評論
這篇文章主要介紹了css實現(xiàn)網(wǎng)頁右下角點贊小卡片效果，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

效果

實現(xiàn)HTML先準(zhǔn)備一個干凈的 html 頁面，寫好節(jié)點：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="styleSheet" type="text/css" href="./style.css" />
</head>
<body>
    
    <div>
        <section class="card">
            <div class="card-top">
                此頁面對您是否有幫助？
            </div>
            <div class="card-bottom">
                <div title="👍">
                    YES
                </div>
                <div title="👎">
                    NO
                </div>
            </div>
        </section>
    </div>
</body>
</html>

CSS

同級目錄建立一個 style.css 編寫我們的樣式：

body {
    margin: 0;
    padding: 0;
    /* mobile 端切換橫豎屏適配 */
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    /* 渲染優(yōu)化 */
    -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;
}

兩個動畫：

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

動畫過程：transform: translateX(-20px) translate(103px, 27px) rotate(35deg);

注意這里 translateX(-20px) 是動畫前后一致的，一共只有兩個屬性改變。

總結(jié)

到此這篇關(guān)于css實現(xiàn)網(wǎng)頁右下角點贊小卡片效果（實例代碼）的文章就介紹到這了,更多相關(guān)css網(wǎng)頁右下角點贊小卡片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論