jQuery + CSS: Creating a pulsating heart

jQuery + CSS: Creating a pulsating heart - javascript

I have done s simple heart using pure CSS.
It consists of two pieces, so one piece has a white box-shadow, the other one has a red one.
An example can be found here: JsFiddle (it has a simplified styling with no gradients, so it may not look beautiful :)
So, the question is: how to create animated shadows? All I need is to make white and red shadows pulsating to create an effect of heartbeat.
I have followed through some similar questions already, but they won't work, unfortunately, just because in my case I use :after and :before pseudo-classes, which can not been manipulated via jQuery.

I set it to infinite so it beats non-stop (which is a good thing, so the heart doesn't die right?) But you can change it to n number of times instead. Also, you can change the 5 seconds to longer or shorter obviously. And if you don't want the box shadow going to 0, you can always change that to like 10px or something too.
#b:before {
animation: heartbeat 5s infinite;
}
#keyframes heartbeat {
0% { box-shadow: 0 0 50px #fff; }
25% { box-shadow: 0 0 0 #fff; }
50% { box-shadow: 0 0 50px #fff; }
75% { box-shadow: 0 0 0 #fff; }
100% { box-shadow: 0 0 50px #fff; }
}
body {
width:100%;
margin:0;
background: #000;
}
#b {
position:relative;
width:500px;
height:90px;
margin: 100px auto;
font-size: 12px;
}
#b:before {
position: absolute;
content:"";
left: 208px;
top: 10px;
width: 208px;
height: 320px;
background: red;
border-radius: 200px 200px 0 0;
box-shadow: 0 0 50px #fff;
animation: heartbeat 5s infinite;
}
#b:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#b:after {
position:absolute;
content:"BlaBla!";
color: #fff;
left:0;
top:10px;
width:208px;
height:320px;
background: red;
border-radius:200px 200px 0 0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
box-shadow: 10px 10px 100px #6d0019;
}
#keyframes heartbeat {
0% { box-shadow: 0 0 50px #fff; }
25% { box-shadow: 0 0 0 #fff; }
50% { box-shadow: 0 0 50px #fff; }
75% { box-shadow: 0 0 0 #fff; }
100% { box-shadow: 0 0 50px #fff; }
}
<div class="a">
<div id="b"></div>
</div>

Related

How to make the loading screen disappear? html css js

I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
body {
width: 100%;
height: 100%;
background: wheat;
}
.content {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#gif-wraper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
#gif {
display: flex;
background: black;
padding: 10px;
height: 80px;
width: 80px;
border-radius: 50%;
position: fixed;
top: calc(50% - 40px);
left: calc(50% - 40px);
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
transition: opacity 0.3s linear;
}
#text {
font-family: 'Times New Roman', Times, serif;
position: fixed;
display: block;
top: calc(52% - 10px);
left: calc(50% - 10px);
right: calc(50% - 1px);
transform: translate(-50%, -50%);
/*box-shadow: black, white;*/
font-size: 30px;
}
#gif::before {
content: " ";
position: fixed;
height: 50px;
width: 50px;
border-radius: 50%;
top: -155px;
left: 20px;
background: black;
border: 5px solid white;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
-webkit-animation: reverseRotate 3s linear infinite;
animation: reverseRotate 3s linear infinite;
}
#gif::after {
/* Segmented circle code goes here */
content: " ";
position: fixed;
height: 280px;
width: 280px;
left: -90px;
top: -90px;
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
background-repeat: no-repeat;
z-index: 2;
-webkit-animation: segmentRotate 300s linear infinite;
animation: segmentRotate 300s linear infinite;
}
#keyframes rotate {
0% {
transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
transform: rotate(360deg);
}
}
#keyframes reverseRotate {
0% {
transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#keyframes segmentRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-32000deg);
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes reverseRotate {
0% {
-webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
-webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#-webkit-keyframes segmentRotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-32000deg);
}
}
<!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>
<script>
var loader = document.getElementById("gif-wraper");
window.onload = function() {
loader.style.display = 'none';
}
var x = 0;
function changeColor() {
var txtclr = document.getElementById("text");
var clr = ["black", "white"];
txtclr.style.color = clr[x];
x = (x + 1) % clr.length;
}
setInterval(changeColor, 300);
</script>
<body>
<div class="content">
<img src="https://picsum.photos/300/?random" />
</div>
<div id="gif-wraper">
<div id='gif'></div>
<div id="text">MK</div>
</div>
</body>
</html>

You should move var loader = document.getElementById("gif-wraper"); into onload event function like this:
window.onload = function () {
var loader = document.getElementById("gif-wraper");
loader.style.display = 'none';
}

The code you have returns this error:
Uncaught TypeError: Cannot read property 'style' of null
It is because document.getElementById("gif-wraper"); returns null
To fix this you need to place your script tag below the body tag, so that the script will be able to find the DOM element.

As you can see from the console, you have an error: "Uncaught TypeError: Cannot read property 'style' of null". This happens because you are trying to select the loader before it actually exists. You simply have to move the line var loader = document.getElementById("gif-wraper"); inside the window.onload function.
body {
width: 100%;
height: 100%;
background: wheat;
}
.content {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#gif-wraper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
#gif {
display: flex;
background: black;
padding: 10px;
height: 80px;
width: 80px;
border-radius: 50%;
position: fixed;
top: calc(50% - 40px);
left: calc(50% - 40px);
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
transition: opacity 0.3s linear;
}
#text {
font-family: 'Times New Roman', Times, serif;
position: fixed;
display: block;
top: calc(52% - 10px);
left: calc(50% - 10px);
right: calc(50% - 1px);
transform: translate(-50%, -50%);
/*box-shadow: black, white;*/
font-size: 30px;
}
#gif::before {
content: " ";
position: fixed;
height: 50px;
width: 50px;
border-radius: 50%;
top: -155px;
left: 20px;
background: black;
border: 5px solid white;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
-webkit-animation: reverseRotate 3s linear infinite;
animation: reverseRotate 3s linear infinite;
}
#gif::after {
/* Segmented circle code goes here */
content: " ";
position: fixed;
height: 280px;
width: 280px;
left: -90px;
top: -90px;
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
background-repeat: no-repeat;
z-index: 2;
-webkit-animation: segmentRotate 300s linear infinite;
animation: segmentRotate 300s linear infinite;
}
#keyframes rotate {
0% {
transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
transform: rotate(360deg);
}
}
#keyframes reverseRotate {
0% {
transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#keyframes segmentRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-32000deg);
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes reverseRotate {
0% {
-webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
-webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#-webkit-keyframes segmentRotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-32000deg);
}
}
<!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>
<script>
window.onload = function() {
var loader = document.getElementById("gif-wraper");
loader.style.display = 'none';
}
var x = 0;
function changeColor() {
var txtclr = document.getElementById("text");
var clr = ["black", "white"];
txtclr.style.color = clr[x];
x = (x + 1) % clr.length;
}
setInterval(changeColor, 300);
</script>
<body>
<div class="content">
<img src="https://picsum.photos/300/?random" />
</div>
<div id="gif-wraper">
<div id='gif'></div>
<div id="text">MK</div>
</div>
</body>
</html>

why keyframes animation don't work for <a>?

i make a pulsing circular menu
everything else works well, so here is the part where i need to add animation
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
#import "compass/css3";
.menu-button {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
text-decoration: none;
text-align: center;
color: #ffffff;
border-radius: 50%;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
padding: 10px;
background: #0081ee;
box-shadow: 0 0 0 0 rgba(#0081ee, 0.5);
-webkit-animation: pulse 1.5s infinite;
}
.menu-button:hover {
-webkit-animation: none;
}
#-webkit-keyframes pulse {
0% {
#include transform(scale(0.9));
}
70% {
#include transform(scale(1));
box-shadow: 0 0 0 50px rgba(#0081ee, 0);
}
100% {
#include transform(scale(0.9));
box-shadow: 0 0 0 0 rgba(#0081ee, 0);
}
}
but nothing happens
what's a problem? tell me please

The #include-rule is part of SASS, and is used with SASS identifiers.
What you mean is the transform-property. Use it like this:
transform: scale(0.9);

How to control css animation dependent on html list items

Below is some css which plays a cup filling animation. What I am trying to achieve is to have the water level change in the cup based on the number of list items in an unordered html list so for example the more list items the more filled the cup is, but I am unsure how to go about this.
.cup {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 180px;
border: 6px solid #262626;
border-top: 2px solid transparent;
border-radius: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: url(https://i.imgur.com/kbpChd4.png);
background-repeat: repeat-x;
animation: animate 10s linear infinite;
box-shadow: 0 0 0 6px #fff, 0 20px 35px rgba(0,0,0,1);
}
.cup:before {
content: '';
position: absolute;
width: 50px;
height: 80px;
border: 6px solid #fff;
right: -57px;
top: 30px;
border-top-right-radius: 35px;
border-bottom-right-radius: 35px;
}
#keyframes animate {
0% {
background-position: 0 100px;
}
10% {
background-position: 0 100px;
}
40% {
background-position: 1000px -10px;
}
80% {
background-position: 1000px -20px;
}
100% {
background-position: 2500px 100px;
}
}
<div class="cup">
</div>
<ul id="list">
<li>Item1</li>
</ul>

Change the position of animated fill level in your css to certain classes and then assign or change those classes with JQUERY.
I have created a fiddle for you that shows 2 cups.
.cup {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 180px;
border: 6px solid #262626;
border-top: 2px solid transparent;
border-radius: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: url(https://i.imgur.com/kbpChd4.png);
background-repeat: repeat-x;
animation: animate 10s linear infinite;
box-shadow: 0 0 0 6px #fff, 0 20px 35px rgba(0,0,0,1);
}
.cup.two {
top: 50%;
right: 10%;
animation: half 10s linear infinite;
}
.cup:before {
content: '';
position: absolute;
width: 50px;
height: 80px;
border: 6px solid #fff;
right: -57px;
top: 30px;
border-top-right-radius: 35px;
border-bottom-right-radius: 35px;
}
#keyframes animate {
0% {
background-position: 0 100px;
}
10% {
background-position: 0 100px;
}
40% {
background-position: 1000px -10px;
}
80% {
background-position: 1000px -20px;
}
100% {
background-position: 2500px 100px;
}
}
#keyframes half {
0% {
background-position: 0 100px;
}
10% {
background-position: 0 100px;
}
40% {
background-position: 1000px 70px;
}
80% {
background-position: 1000px 80px;
}
100% {
background-position: 2500px 90px;
}
}
HTML IS HERE:
<ul>
<li>Item1</li>
</ul>
<div class="cup"></div>
<div class="cup two"></div>

Scale down a border-radius div element and keep in same position, egg shape

I have a div element in the shape of an egg and rotated 140 degrees.
HTML:
<div id="egg-container">
<div id="egg-blue" class="egg egg-large"></div>
</div>
CSS:
#egg-container {
width: 150px;
height: 150px;
position: relative;
border-radius: 50%;
border: 1px solid red;
margin: 0 auto;
}
.egg {
position: absolute;
background-image: radial-gradient(#00F9AF, #0054FD 70%);
box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
overflow: hidden;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
height: 10px;
width: 10px;
top: 75px;
}
#egg-blue {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(140deg);
opacity: 0.8;
}
.egg-lg {
top: 25px;
right: -25px;
height: 160px;
width: 140px;
}
.egg-md {
/* How to scale down correctly? */
}
.egg-sm {
/* How to scale down correctly? */
}
.egg-xs {
/* How to scale down correctly? */
}
My goal is to leverage JavaScript to simply switch classes between large, medium, small and extra small. I know how to employ toggling classes.
But I'm having trouble connecting the dots on styling this correctly when classes change between -lg, -md, -sm, -xs. It looks too snappy, choppy, etc.
Another way to imagine this outside of code is a flower blooming. When I toggle the class with JavaScript, that's essentially what I am trying to accomplish. Do note, the red circle styling is there to act as a visual center.
I want that egg that you see illustrated to maintain its aspect ratio AND its rotation. Simply scale the element bigger or smaller, depending on the applied class selector.
I figure the root of my problem at the moment is that I am hard-coding pixel widths and heights.
If you have any ideas, please chime in.
Here is the fiddle: https://jsfiddle.net/excqrun0/12/
Thank you.

you can use transform : scale(0.5); to scale down the element : https://www.w3schools.com/css/css3_2dtransforms.asp
and you can add it to your previous transform like transform: rotate(140deg) scale(1); , move the width and height and other stuff to the id egg-blue and fill the classes with the new transform , and use javascript to switch between the classes :
var egg = document.getElementById('egg-blue');
document.getElementById('big').addEventListener('click', function(){
egg.classList.add("egg-large");
egg.classList.remove("egg-medium");
egg.classList.remove("egg-small");
});
document.getElementById('medium').addEventListener('click', function(){
egg.classList.add("egg-medium");
egg.classList.remove("egg-large");
egg.classList.remove("egg-small");
});
document.getElementById('small').addEventListener('click', function(){
egg.classList.add("egg-small");
egg.classList.remove("egg-large");
egg.classList.remove("egg-medium");
});
#egg-container {
width: 150px;
height: 150px;
position: relative;
border-radius: 50%;
border: 1px solid red;
margin: 0 auto;
}
.egg {
position: absolute;
background-image: radial-gradient(#00F9AF, #0054FD 70%);
box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
overflow: hidden;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
height: 10px;
width: 10px;
top: 75px;
}
#egg-blue {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
opacity: 0.8;
top: 25px;
right: -25px;
height: 160px;
width: 140px;
}
.egg-large {
transform: rotate(140deg) scale(1);
}
.egg-medium {
transform: rotate(140deg) scale(0.7);
}
.egg-small {
transform: rotate(140deg) scale(0.4);
}
#buttons{
position: absolute;
bottom: 0;
}
<div id="egg-container">
<div id="egg-blue" class="egg egg-large"></div>
</div>
<div id="buttons">
<button id="big"> BIG </button>
<button id="medium"> MEDium </button>
<button id="small"> small </button>
</div>

How can I make the underline change color every time the page loads?

I would like the underline under my text to change color randomly every time the page loads.
I have had success using this script before:
<script type="text/javascript">
var classes = ['red', 'blue', 'yellow'];
var random_class = classes[Math.floor(Math.random() * classes.length)];
var title = document.getElementById('decor');
classes.forEach((el) => {
title.classList.remove(el);
});
title.classList.add(random_class);
</script>
with this on my CSS:
.red {
box-shadow: inset 0 -1.3vw 0 0 ##FF0000;
}
.yellow {
box-shadow: inset 0 -1.3vw 0 0 #FFFF00;
}
.blue {
box-shadow: inset 0 -1.3vw 0 0 #0000FF;
}
But I cannot (newb here) rig it with my current code (see snippet below)
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
a, a:visited, a:hover {
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
position: relative;
}
#test1:before {
content: "";
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
position: absolute;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left;
animation-name: stretchRight;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
z-index:-1;
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<body>
<div class="container">
<div id="test1">hello darkness my old</div>
</div>
</div>
</body>
How can I rig them together to make it so that the underline changes color every time the page loads?

You can add the .red, .yellow, .blue,.etc... classes to your css and have javascript pick one of those classes and add it dynamically to test1. Since the number of colors to choose from is small, the colors might repeat very often. If you want to ensure that the colors are different, you might need to use a cookie to store then value.
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var classes = ['red', 'blue', 'yellow','green','cyan','magenta','orange','black'];
var random_index = getRandomIntInclusive(0, classes.length -1);
var title = document.getElementById('test1');
var random_class= classes[random_index];
title.classList.add(random_class);
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
a,
a:visited,
a:hover {
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
position: relative;
}
#test1:before {
content: "";
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
position: absolute;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left;
animation-name: stretchRight;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
z-index: -1;
}
.red:before {
box-shadow: inset 0 -1.3vw 0 0 red !important;
}
.yellow:before {
box-shadow: inset 0 -1.3vw 0 0 yellow !important;
}
.blue:before {
box-shadow: inset 0 -1.3vw 0 0 blue !important;
}
.green:before {
box-shadow: inset 0 -1.3vw 0 0 green !important;
}
.cyan:before {
box-shadow: inset 0 -1.3vw 0 0 cyan !important;
}
.magenta:before {
box-shadow: inset 0 -1.3vw 0 0 magenta !important;
}
.orange:before {
box-shadow: inset 0 -1.3vw 0 0 orange !important;
}
.black:before {
box-shadow: inset 0 -1.3vw 0 0 black !important;
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<body>
<div class="container">
<div id="test1">hello darkness my old
</div>
</div>
</body>

Develop Reference

JavaScript is the programming language of the Web.

jQuery + CSS: Creating a pulsating heart - javascript

Related

How to make the loading screen disappear? html css js

why keyframes animation don't work for <a>?

How to control css animation dependent on html list items

Scale down a border-radius div element and keep in same position, egg shape

How can I make the underline change color every time the page loads?

Categories

Resources