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
Native JavaScript to achieve skinning
The specific code for implementing skinning with ...
Analysis of several situations where MySQL index fails
1. Best left prefix principle - If multiple colum...
Solution to the problem of MySQL data delay jump
Today we analyzed another typical problem about d...
Summary of nginx configuration location method
location matching order 1. "=" prefix i...
How to completely uninstall mysql under CentOS
This article records the complete uninstallation ...
How to use vue-bootstrap-datetimepicker date plugin in vue-cli 3
Demand Background Recently, I plan to use Vue and...
Examples of common Nginx misconfigurations
Table of contents Missing root location Off-By-Sl...
What are the differences between sql and mysql
What is SQL? SQL is a language used to operate da...
Docker compose deploys SpringBoot project to connect to MySQL and the pitfalls encountered
Earlier, we used Docker to simply deploy the Spri...
Analysis and solution of the reasons why MySQL scheduled tasks cannot be executed normally
Table of contents Preface Cause analysis and solu...
8 ways to manually and automatically backup your MySQL database
As a popular open source database management syst...
Docker container regularly backs up the database and sends it to the specified mailbox (design idea)
Table of contents 1. Background: 2. Design ideas:...
About the problem that the tomcat deployed application cannot access the front-end page
I recently used the ssm framework when doing a pr...
Use standard dl, dt, dd tags to discard table lists
Now, more and more front-end developers are starti...
Detailed explanation of performance monitoring of MySQL server using Prometheus and Grafana
Overview Prometheus is an open source service mon...