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
How to use Vue to develop public account web pages
Table of contents Project Background start Create...
Delete the image operation of none in docker images
Since I usually use the docker build command to g...
MySQL query optimization using custom variables
Table of contents Optimizing sorting queries Avoi...
Computed properties and listeners details
Table of contents 1. Calculated properties 1.1 Ba...
Complete steps to implement location punch-in using MySQL spatial functions
Preface The project requirement is to determine w...
MySql 8.0.11 installation and configuration tutorial
Official website address: https://dev.mysql.com/d...
Ubuntu 20.04 sets a static IP address (including different versions)
Because Ubuntu 20.04 manages the network through ...
How to smoothly go online after MySQL table partitioning
Table of contents Purpose of the table For exampl...
Detailed explanation of MySQL database (based on Ubuntu 14.0.4 LTS 64 bit)
1. Composition and related concepts of MySQL data...
An example of changing traditional replication to GTID replication without stopping business in MySQL 5.7
Due to the advantages of GTID, we need to change ...
Dockerfile implementation code when starting two processes in a docker container
I want to make a docker for cron scheduled tasks ...
Detailed explanation of solving the problem of cross-domain access of nginx/apache static resources
1. Apache static resource cross-domain access Fin...
Detailed explanation of CSS sticky positioning position: sticky problem pit
Preface: position:sticky is a new attribute of CS...
Pitfalls encountered when installing the decompressed version of MySQL 5.7.20 (recommended)
MySQL official website: https://www.mysql.com/dow...
Analysis of MySQL data backup and recovery implementation methods
This article uses examples to describe how to bac...