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
A brief discussion on the construction and operation mechanism of the real-time computing framework Flink cluster
Table of contents 1. Flink Overview 1.1 Basic Int...
Code block highlighting can be copied and displayed js plug-in highlight.js + clipboard.js integration
Mainly from two aspects: 1. Highlight/Line Break ...
How to modify the port mapping of a running Docker container
Preface When docker run creates and runs a contai...
Nginx domain name SSL certificate configuration (website http upgraded to https)
Preface HTTP and HTTPS In our daily life, common ...
React configuration px conversion rem method
Install related dependencies npm i lib-flexible -...
Teach you how to deploy Vue project with Docker
1.Write in front: As a lightweight virtualization...
Some suggestions for HTML beginners and novices, experts can ignore them
Feelings: I am a backend developer. Sometimes when...
Introduction to encryption of grub boot program in Linux
Table of contents 1. What is grub encryption 2. g...
Tips for optimizing MySQL SQL statements
When faced with a SQL statement that is not optim...
Introduction to new ECMAscript object features
Table of contents 1. Object properties 1.1 Attrib...
Introduction to deploying selenium crawler program under Linux system
Table of contents Preface 1. What is selenium? 2....
Sample code for making desktop applications with vue + Electron
1.vue packaging Here we use the vue native packag...
Detailed explanation of MySQL view management view example [add, delete, modify and query operations]
This article uses an example to describe the mana...
Causes and solutions to the garbled character set problem in MySQL database
Preface Sometimes when we view database data, we ...
Summary of Linux vi command knowledge points and usage
Detailed explanation of Linux vi command The vi e...