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
Effect:

insert image description here

If you want to test it, the original picture is at the end of the article

Implementation principle:
Prepare two pictures and let them appear alternately.

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>

insert image description here

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

A brief discussion on the VUE uni-app life cycle

Pure CSS and Flutter realize breathing light effect respectively (example code)

A brief discussion on the VUE uni-app life cycle

What is table partitioning and partitioning? MySql database partitioning and table partitioning method

Implementation steps for building a local web server on Centos8

Detailed explanation of the whole process and steps of installing clion on Ubuntu16.04

Docker installs mysql and solves the Chinese garbled problem

Two ways to manually implement MySQL dual-machine hot standby on Alibaba Cloud Server

MySQL complete collapse query regular matching detailed explanation

Analysis of MySQL's method of exporting to Excel

Neon light effects implemented with pure CSS3

React ref usage examples

Recommend

Introduction to the use of select optgroup tag in html

The most creative 404 page design in history effectively improves website user experience

Use of Linux ifconfig command

Detailed operations of building RabbitMq's common cluster and mirror cluster with Docker

mysql 5.7.17 winx64.zip installation and configuration method graphic tutorial

In-depth understanding of Mysql transaction isolation level and locking mechanism issues

CocosCreator classic entry project flappybird

A brief analysis of the relationship between various Tomcat logs and the segmentation of catalina.out files

Description and use of table attributes CellPad, CellSpace and Border in web page production

What is WML?

Docker Compose practice and summary

Coexistence of python2 and python3 under centos7 system

HTML page jump passing parameter problem

jQuery implements accordion small case

vue cli3 implements the steps of packaging by environment