Pure CSS and Flutter realize breathing light effect respectively (example code)
|
Last time, a very studious fan asked if it was possible to make the moon a breathing light effect. Because I couldn't find a picture the size of the moon, I used stars instead. Today, this blogger used pure CSS and Flutter animation to implement it respectively. Remember to collect and learn
If you want to test it, the original picture is at the end of the article Implementation principle: Pure CSS implementation, the code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.img1,
.img2{
margin-top: 100px;
width: 100px;
position: absolute;
}
.img2{
-webkit-animation: breath 3s infinite ease-in-out alternate;
animation: breath 3s infinite ease-in-out alternate;
}
@-webkit-keyframes breath {
0% {opacity: .2;}60% {opacity: 1;}to {opacity: .2;}
}
@keyframes breath {
0% {opacity: .2;}60% {opacity: 1;}to {opacity: .2;}
}
</style>
</head>
<body>
<div class="wrap">
<img src="images/star1.jpg" alt="Basemap" class="img1">
<img src="images/star2.jpg" alt="Above" class="img2">
</div>
</body>
</html>
This is the end of this article about how to achieve breathing light effects with pure CSS and Flutter (example code). For more information about how to achieve breathing light with CSS, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Comprehensive understanding of HTML basic structure
>>: Detailed explanation of Linux command unzip
Recommend
Detailed process of FastAPI deployment on Docker
Docker Learning https://www.cnblogs.com/poloyy/p/...
MySQL 5.7 mysql command line client usage command details
MySQL 5.7 MySQL command line client using command...
Vue custom directive details
Table of contents 1. Background 2. Local custom i...
Implementation code for taking screenshots using HTML and saving them as local images
The specific code is as follows: <!DOCTYPE htm...
Why node.js is not suitable for large projects
Table of contents Preface 1. Application componen...
Several ways to solve the 1px border problem on mobile devices (5 methods)
This article introduces 5 ways to solve the 1px b...
Mysql 8.0.18 hash join test (recommended)
Hash Join Hash Join does not require any indexes ...
Detailed explanation of Windows time server configuration method
Recently, I found that the company's server t...
How to implement multiple parameters in el-dropdown in ElementUI
Recently, due to the increase in buttons in the b...
Should I use Bootstrap or jQuery Mobile for mobile web wap
Solving the problem Bootstrap is a CSS framework ...
What to do if the auto-increment primary key in MySQL is used up
In the interview, you should have experienced the...
The main differences between MySQL 4.1/5.0/5.1/5.5/5.6
Some command differences between versions: show i...
Implementation steps for docker deployment of springboot and vue projects
Table of contents A. Docker deployment of springb...
Introduction to the B-Tree Insertion Process
In the previous article https://www.jb51.net/arti...
MySQL master-slave replication delay causes and solutions
Table of contents A brief overview of the replica...