Sample code for cool breathing effect using CSS3+JavaScript
|
A simple cool effect achieved with CSS3 animation. The final effect is as follows:
Page structure (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Relax And Breath</h1>
<div class="container">
<div class="circle"></div>
<p id="text"></p>
<div class="pointer-container">
<div class="pointer"></div>
</div>
<div class="gradient-circle"></div>
</div>
<script src="script.js"></script>
</body>
</html>script.js:
const container = document.querySelector('.container');
const text = document.querySelector('#text');
const totalTime = 7500;
const breathTime = (totalTime/5)*2; //Breathing time is 3s
const holdTime = totalTime/5; //hold breathing time is 1.5s
console.log(breathTime);
breathAnimation(); //Start by executing the breathAnimation function function breathAnimation(){
text.innerHTML = 'Breath In';
container.className = 'container grow'; //Add the grow class to the container to achieve the magnification effect setTimeout(function(){
text.innerHTML = 'Hold On';
setTimeout(function(){
text.innerHTML = 'Breath Out';
container.className = 'container shrink'; //Add shrink class to container to achieve shrinking effect},holdTime)
},breathTime)
}
setInterval(breathAnimation,totalTime); //Repeat executionStyle (style.css):
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: url('./img/bg.jpg') no-repeat center center /cover;
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*Note that margin is set to auto*/
.container{
position: relative;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
transform: scale(1);
margin: auto;
}
/*Use a conical gradient as the background, with a slightly larger aspect ratio than .container, and set the z-index to -2, because there is another layer of .circle, and the outermost layer is text*/
.gradient-circle{
position: absolute;
left: -10px;
top: -10px;
background:conic-gradient(
#55b7a4 0%,
#4ca493 40%,
#fff 40%,
#fff 60%,
#336d62 60%,
#2a5b52 100%
);
width: 320px;
height: 320px;
border-radius: 50%;
z-index: -2;
}
/z-index is -1, which is the black circle in the middle/
.circle{
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 300px;
background-color: #010f1c;
border-radius: 50%;
z-index: -1;
}
/*.pointer-container is the container outside the ball. Its height is set to 190 because 150 is the radius and 40 is top-40. This way it will rotate around the center of the circle and will not switch to the inside. Note that transform-origin is in the middle and bottom*/
.pointer-container{
position: absolute;
width: 20px;
height: 190px;
top: -40px;
left: 140px;
/* background-color: red; */
transform-origin: bottom center;
animation: rotate 7.5s linear forwards infinite;
}
/*Small ball*/
.pointer{
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
}
/*Set the ball to spin in circles*/
@keyframes rotate{
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
.container.grow{
animation: grow 3s linear forwards;
}
.container.shrink{
animation: shrink 2s linear forwards;
}
@keyframes grow{
from{
transform: scale(1)
}to{
transform: scale(1.2);
}
}
@keyframes shrink{
from{
transform: scale(1.2)
}to{
transform: scale(1);
}
}If the margin of .container is not set to auto or a specific value, the following effect will occur, with the text and the circle squeezed together:
At the same time, I added background-color: red; in .pointer-container, which will make it easier to understand why the height of .pointer-container is set to 190px. In addition, if the transform-origin is not set to bottom center, it will rotate as the default point marked in the figure, which is not the effect we want.
Another detail is that I set the animation time of .shrink to 2 seconds. Actually, according to the js, the breath out time should be 3 seconds, but in order to have a buffer effect from breath out to breath in, I set it to 2 seconds. Otherwise, there will be no transition from breath out to breath in, which will look abrupt and ugly. This concludes this article about sample code for achieving cool breathing effect with CSS3+JavaScript. For more relevant content on CSS3+JavaScript breathing effect, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: About MariaDB database in Linux
>>: Vue+elementui realizes multiple selection and search functions of drop-down table
Recommend
Detailed graphic explanation of installing MySQL database and configuring Java project on Linux
1. Install MySQL database ① Download and unzip an...
MySQL uses covering index to avoid table return and optimize query
Preface Before talking about covering index, we m...
How to add a column to a large MySQL table
The question is referenced from: https://www.zhih...
Detailed explanation of Nginx log customization and enabling log buffer
Preface If you want to count the source of websit...
Use PS to create an xhtml+css website homepage in two minutes
There are too many articles about xhtml+css websi...
Summary of the differences between Vue's watch, computed, and methods
Table of contents 1 Introduction 2 Basic usage 2....
CSS text alignment implementation code
When making forms, we often encounter the situati...
Design theory: the basics of font design
<br />Words are the inevitable product of hu...
MySQL 8.0.15 installation and configuration method graphic tutorial under Windows
This article shares with you the graphic tutorial...
A brief discussion on HTML doctype and encoding
DOCTYPE Doctype is used to tell the browser which...
How to build a React project with Vite
Table of contents Preface Create a Vite project R...
Optimizing the slow query of MySQL aggregate statistics data
Written in front When we operate the database in ...
CSS to achieve the like card effect in the lower right corner of the web page (example code)
Effect To implement HTML, first prepare a clean H...
Detailed steps for completely uninstalling and reinstalling MySQL under Windows 10
I believe that everyone needs to reinstall MySQL ...