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

Win10 installation of MySQL5.7.18winX64 failed to start the server and no error message

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

Win10 installation of MySQL5.7.18winX64 failed to start the server and no error message

MySQL stored procedures and common function code analysis

WeChat applet implements the snake game

Continuous delivery using Jenkins and Docker under Docker

Ant Design Blazor component library's routing reuse multi-tab function

A brief analysis of the four import methods and priorities in CSS

Zabbix implements monitoring of multiple mysql processes

Implementation of tens of thousands of concurrent connections on a single machine with nginx+lua

Detailed explanation of the murder caused by a / slash in Nginx proxy_pass

MySQL 5.7.15 version installation and configuration method graphic tutorial

Recommend

MySql implements page query function

How to implement encryption and decryption of sensitive data in MySQL database

Vue Element front-end application development table list display

A brief discussion on JS packaging objects

Solve the problem of forgetting password in MySQL 5.7 under Linux

15 Best Practices for HTML Beginners

mysql splits a row of data into multiple rows based on commas

Pitfalls encountered when installing the decompressed version of MySQL 5.7.20 (recommended)

An example of how to write a big sun weather icon in pure CSS

Introduction to useRef and useState in JavaScript

JavaScript offsetParent case study

MySQL cursor principle and usage example analysis

Mysql5.7 my.ini file loading path and data location modification method under windows7

How to control the proportion of Flex child elements on the main axis

Implementation of HTTP and HTTPS services with Nginx reverse proxy for multiple domain names