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

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?

Recommend

HTML+CSS to achieve cyberpunk style button

First look at the effect: Preface: I came up with...

How to use stored procedures in MySQL to quickly generate 1 million records

Preface When testing, in order to test the projec...

Javascript common higher-order functions details

Table of contents 1. Common higher-order function...

HTML tutorial, easy to learn HTML language (2)

*******************Introduction to HTML language (...

Detailed deployment steps for MySQL MHA high availability configuration and failover

Table of contents 1. Introduction to MHA 1. What ...

How to find the my.ini configuration file in MySQL 5.6 under Windows

Make a note so you can come back and check it lat...

JavaScript example code to determine whether a file exists

1. Business Scenario I have been doing developmen...

N ways to center elements with CSS

Table of contents Preface Centering inline elemen...

Implement full screen and monitor exit full screen in Vue

Table of contents Preface: Implementation steps: ...

Solve the grouping error Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated in MySQL versions greater than 5.7

reason: MySQL 5.7.5 and up implements detection o...

Vue uses the Element el-upload component to step on the pit

Table of contents 1. Basic Use 2. Image quantity ...

MySQL 8.0.15 winx64 decompression version installation and configuration method graphic tutorial

This article shares the installation and configur...

How to install Docker using scripts under Linux Centos

What is the main function of Docker? At present, ...

Implementing calculator functions with WeChat applet

This article is a simple calculator written using...

Solution to MySQL unable to read table error (MySQL 1018 error)

1. Error reproduction I can access the MySQL data...