Pure CSS to achieve candle melting (water droplets) sample code

Achieve results

When it rains, collect your clothes

Implementation ideas

The melting effect is achieved using the contrast and blur of the filfilter.
Setting contrast in the parent element and blur in the child element can achieve the effect of blending the two.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Water drop effect</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
  <div class="hpc">Put away your clothes when it rains</div>
</body>
</html>

html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  filter:contrast(20);
}


.both{
  left: 0;
  content: "";
  width: 10px;
  height: 20px;
  bottom: -20px;
  border-radius: 50%;
  position: absolute;
  background-color: #fff;
}
.hpc{
  top: 80px;
  left: 100px;
  color: #fff;
  width: 400px;
  height: 107px;
  font-size: 6rem;
  filter: blur(3px);
  font-style: italic;
  position: relative;
  transform: skewY(5deg);
  font-family: "Comic Sans MS";
  border-bottom: 10px solid #fff;

  &::before{
    @extend .both;
    animation: move 6s ease-in-out infinite;
  }

  &::after{
    @extend .both;
    animation: move 6s 1s ease-in-out infinite;
  }

  @keyframes move{
    70%
      bottom: -20px;
      transform: translate(380px, 5px);
    }
    80%
      transform: translate(380px, 3px);
      opacity: 1;
    }
    100%{
      transform: translate(380px, 180px);
      opacity: 0;
    }
  }
}

Just convert SCSS to CSS and import it.

This concludes this article about the sample code for implementing candle melting (water drops) with pure CSS. For more relevant CSS candle melting content, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: A brief discussion on when MySQL uses internal temporary tables

>>: Hbase installation and configuration tutorial under Linux

Detailed explanation of MySQL 30 military rules

Pure CSS to achieve candle melting (water droplets) sample code

Detailed explanation of MySQL 30 military rules

Implementation steps for docker deployment of springboot and vue projects

Detailed explanation of HTML style tags and related CSS references

How to use vue filter

Example method of viewing IP in Linux

Apache Calcite code for dialect conversion

A brief discussion on the use of React.FC and React.Component

Detailed explanation of how to efficiently import multiple .sql files into MySQL

Docker+nextcloud to build a personal cloud storage system

How to quickly paginate MySQL data volumes of tens of millions

Recommend

Summary of accurate calculations of various distances/scroll distances in a window

Detailed explanation of the process of querying user permissions using mysql statements

Docker custom network implementation

The latest popular script Autojs source code sharing

Detailed explanation of the use of router-view components in Vue

Jmeter connects to the database process diagram

Docker container accesses the host's MySQL operation

MySQL max_allowed_packet setting

How to use docker+devpi to build local pypi source

How can we promote Jiedaibao so that everyone will register? Jiedaibao promotion methods and skills

The whole process of configuring hive metadata to MySQL

XHTML Tutorial: XHTML Basics for Beginners

5 MySQL GUI tools recommended to help you with database management

Explanation of the steps for Tomcat to support https access

Pure CSS to achieve cool charging animation