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?

Introduction to the use and disabling of transparent huge pages in Linux

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

Introduction to the use and disabling of transparent huge pages in Linux

Users need to know why

Example of horizontal arrangement of li tags in HTMl

Problem with resizing tables using relative widths

How to implement Linux deepin to delete redundant kernels

Simple CSS text animation effect

Six ways to reduce the size of Docker images

An article to help you thoroughly understand position calculation in js

Detailed example of using case statement in MySQL stored procedure

How to solve the error of PyCurl under Linux

Recommend

Installation and verification of pytorch in linux or windows environment (solving runtimeerror problem)

Detailed explanation of how to build an Ftp server on Ubuntu (success guaranteed)

Analysis of MySQL general query log and slow query log

Common naming rules for CSS classes and ids

Analysis and solution of the reasons why HTML external reference CSS files are not effective

How to implement nested if method in nginx

An example of elegantly writing status labels in Vue background

Use image to submit the form instead of using button to submit the form

What you need to know about filters in Vue

Introduction and usage summary of React-Native screenshot component react-native-view-shot

CSS Sticky Footer Several Implementations

An exploration of the JS operator in problem

The reason why MySQL manually registers the binlog file and causes master-slave abnormalities

XHTML Getting Started Tutorial: XHTML Tags

vue.config.js packaging optimization configuration