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
VMware Workstation is not compatible with Device/Credential Guard
When installing a virtual machine, a prompt appea...
Use href to simply click on a link to jump to a specified place on the page
After clicking the a tag in the page, you want to ...
Detailed explanation of the points that need to be paid attention to in HTML standards that comply with W3C standards
XML/HTML CodeCopy content to clipboard <!DOCTY...
How to use Docker Swarm to build WordPress
cause I once set up WordPress on Vultr, but for w...
Install nodejs and yarn and configure Taobao source process record
Table of contents 1. Download nodejs 2. Double-cl...
MySQL sorting feature details
Table of contents 1. Problem scenario 2. Cause An...
How to install Android x86 in vmware virtual machine
Sometimes you just want to test an app but don’t ...
Nginx high concurrency optimization practice
1. Necessity of Tuning I have always been reluct...
Multiple ways to insert SVG into HTML pages
SVG (Scalable Vector Graphics) is an image format...
Let's learn about MySQL database
Table of contents 1. What is a database? 2. Class...
Summary of various ways to create objects in js and their advantages and disadvantages
Table of contents Early creation method Factory P...
Detailed explanation of the group by statement in MySQL database group query
1: Statement order of grouping function 1 SELECT ...
52 SQL statements to teach you performance optimization
1. To optimize the query, try to avoid full table...
10 tips for designing useful, easy-to-use web applications
Here are 10 tips on how to design better-usable w...
A collection of button hover border and background animations based on CSS properties
Heart Attributes opacity: .999 creates a stacking...