CSS to achieve the like card effect in the lower right corner of the web page (example code)

Effect

To implement HTML, first prepare a clean HTML page and write the nodes:

<!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">
                Was this page helpful?
            </div>
            <div class="card-bottom">
                <div title="👍">
                    YES
                </div>
                <div title="👎">
                    NO
                </div>
            </div>
        </section>
    </div>
</body>
</html>

CSS

Create a style.css in the same directory to write our style:

body {
    margin: 0;
    padding: 0;
    /* Switch between horizontal and vertical screens on mobile*/
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    /* Rendering optimization */
    -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;
}

Two animations:

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

Animation process: transform: translateX(-20px) translate(103px, 27px) rotate(35deg);

Note that translateX(-20px) is consistent before and after the animation, and there are only two properties changed.

Summarize

This is the end of this article about how to use CSS to create a small like card effect in the lower right corner of a web page (example code). For more related CSS content about the small like card effect in the lower right corner of a web page, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: How to prevent Flash from covering HTML div elements

>>: Is it easy to encapsulate a pop-up component using Vue3?

HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN

CSS to achieve the like card effect in the lower right corner of the web page (example code)

HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN

Mysql case analysis of transaction isolation level

Windows Server 2008 Tutorial on Monitoring Server Performance

MySQL Series Database Design Three Paradigm Tutorial Examples

Node.js returns different data according to different request paths.

Detailed explanation of modifying the default style of external component Vant based on Vue cli development

Detailed example of MySQL joint table update data

Best Practices for MySQL Upgrades

Solution to MySQL 8.0 cannot start 3534

Detailed installation tutorial of mysql 5.7 under CentOS 6 and 7

Recommend

Detailed installation history of Ubuntu 20.04 LTS

Summary of basic usage of CSS3 @media

How to use not in to optimize MySql

How to detect whether a file is damaged using Apache Tika

JavaScript to achieve a simple magnifying glass effect

Detailed explanation of basic data types in mysql8.0.19

React's component collaborative use implementation

How to view MySQL links and kill abnormal links

Solve the problem of using less in Vue

Detailed explanation of triangle drawing and clever application examples in CSS

MySQL 5.7.29 + Win64 decompression version installation tutorial with pictures and text

Detailed explanation of four solutions for MySQL active-active synchronous replication

5 tips for writing CSS to make your style more standardized

Steps to install MySQL on Windows using a compressed archive file

How to set MySQL foreign keys for beginners