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>
Related
I have the following code:
scroll {
left: 50%;
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80;
bottom: 25px; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; position: absolute; animation: scrolldown1 1.2s ease-in-out infinite 0.15s;"></scroll>
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80;
bottom: 40px; position: absolute; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; animation: scrolldown1 1.2s ease-in-out infinite;"></scroll>
This is basically a scroll button and on my end the output is looking like this:
As you can see the alignment of the scroll button is slightly off and I would like it to be right on top of the MY STORY text or be centered. How would I achieve this task?
The code of the MY STORY text is as follows:
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
<div class="section-title">
<h2>My Story</h2>
</div>
How would I achieve this task?
Basically, the scroll button should be right on top of the text
Notice that your .section-title's pseudo-elements have their left property set using calc and taking into account half of each element's width:
.section-title h2::before {
...
width: 120px;
...
left: calc(50% - 60px);
}
.section-title h2::after {
...
width: 40px;
...
left: calc(50% - 20px);
}
But the left property in your scroll declaration does not use calc. Therefore one possible fix would be to use it. Since each scroll element has a width of 2em, half of it would be 1em. So:
scroll {
/* left: 50%; */ /* remove this line */
left: calc(50% - 1em); /* add this line */
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
See demo below.
#container {
position: relative;
height: 5em;
}
scroll {
/* left: 50%; */ /* remove this line */
left: calc(50% - 1em); /* add this line */
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
<div id="container">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
<div class="section-title">
<h2>My Story</h2>
</div>
PS.: Unless you're using this positioned layout for browser compatibility reasons, you probably should consider using more modern layout modules, such as flexbox or grid, your life would be much easier.
I have loading symbol which works fine, But when loading symbol opens i can see background and user can edit textbox in backend. I need to disable background, until loading completes. Need to blur background. Tried overlay. Nothing seems to work.
Here is my code.
<style>
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 50%;
opacity: 1;
position: fixed;
top: 50%;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id="loader1" class="lds-dual-ring hidden overlay"></div>
$('#loader1').removeClass('hidden'); //to show
I've recreated a working example of the code you've provided.
Your div contains both overlay and lsd-dual-ring classes. IMO, what you want to achieve is to have the loader ring is inside the overlay div and position at the center of the screen.
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
top: 50%;
left: 50%;
position: fixed;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="overlay">
<div id="loader1" class="lds-dual-ring"></div>
</div>
Here is one of the best loaders on the net:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: white;
}
.container{
positition: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .loader{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #424242;
animation: animate 1s linear infinite;
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.container .loader::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(to top, transparent, dodgerblue);
background-size: 100px 180px;
background-repeat: no-repeat;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.container .loader::after{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
background-color: #00B0FF;
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 10px #00B0FF,
0 0 20px #00B0FF,
0 0 30px #00B0FF,
0 0 40px #00B0FF,
0 0 50px #00B0FF,
0 0 60px #00B0FF,
0 0 70px #00B0FF,
0 0 80px #00B0FF,
0 0 90px #00B0FF,
0 0 100px #00B0FF;
}
.container .loader span{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 50%;
background-color: #212121;
}
<div class="container">
<div class="loader">
<span></span>
</div>
</div>
I want to modify the code or find a solution to get ride of the black background in the center and make it transparent while the spinner remain intact but when I remove the background color from container .loader span the spinner ruins completely. is there any solution to have the same spinning effect with transparent center?
You can apply a mask to the before element like below
mask: radial-gradient(farthest-side at right, transparent calc(100% - 10px), #fff 0);
This will keep only the border visible and you can get rid of all the backgrounds
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin:0;
background:linear-gradient(to right,grey,transparent);
}
.loader{
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
animation: animate 1s linear infinite;
}
#keyframes animate{
100%{
transform: rotate(360deg);
}
}
.loader::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(to top, transparent, dodgerblue) no-repeat;
background-size: 100% 80%;
border-radius: 100px 0 0 100px;
-webkit-mask: radial-gradient(farthest-side at right, transparent calc(100% - 10px), #fff 0);
}
.loader::after{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 10px #00B0FF,
0 0 20px #00B0FF,
0 0 30px #00B0FF,
0 0 40px #00B0FF,
0 0 50px #00B0FF,
0 0 60px #00B0FF,
0 0 70px #00B0FF,
0 0 80px #00B0FF,
0 0 90px #00B0FF,
0 0 100px #00B0FF;
}
<div class="loader"></div>
Or like below to keep the circular border:
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin:0;
background:linear-gradient(to right,grey,transparent);
}
.loader{
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
animation: animate 1s linear infinite;
}
#keyframes animate{
100%{
transform: rotate(360deg);
}
}
.loader::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, transparent, dodgerblue) no-repeat lightgrey;
background-size: 50% 80%;
border-radius: 50%;
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #fff 0);
}
.loader::after{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 10px #00B0FF,
0 0 20px #00B0FF,
0 0 30px #00B0FF,
0 0 40px #00B0FF,
0 0 50px #00B0FF,
0 0 60px #00B0FF,
0 0 70px #00B0FF,
0 0 80px #00B0FF,
0 0 90px #00B0FF,
0 0 100px #00B0FF;
}
<div class="loader"></div>
Change both the background colours to a whiter shade in .container .loader and .container .loader span.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: white;
}
.container{
positition: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .loader{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #DBDBDB;
animation: animate 1s linear infinite;
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.container .loader::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(to top, transparent, dodgerblue);
background-size: 100px 180px;
background-repeat: no-repeat;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.container .loader::after{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
background-color: #00B0FF;
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 10px #00B0FF,
0 0 20px #00B0FF,
0 0 30px #00B0FF,
0 0 40px #00B0FF,
0 0 50px #00B0FF,
0 0 60px #00B0FF,
0 0 70px #00B0FF,
0 0 80px #00B0FF,
0 0 90px #00B0FF,
0 0 100px #00B0FF;
}
.container .loader span{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 50%;
background-color: #FEFEFE;
}
<div class="container">
<div class="loader">
<span></span>
</div>
</div>
I have a semi circle on the center of my page, which I want to be able to spin, I'm able to do some part of it by adjusting the width but I want a way to make it spin a complete 360degrees. If possible, I want to be able to accomplish it using only css, however if required I don't mind vanilla js (no Jquery).
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 50px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
/*background-color: black;*/
animation: spinning infinite;
animation-duration: 3s;
}
#keyframes spinning {
from {
width: 50px
}
to {
width: 0px;
z-index: -5;
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
Is this what you want?
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 50px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
transform-origin: left;
/*background-color: black;*/
animation: spinning infinite;
animation-duration: 3s;
}
#keyframes spinning {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
z-index: -5;
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
If I understand correctly you want the semicircle to revolve around your "hello" text. If so, you could use the transform: rotateY() style to spin your circle. If you do this, you can add your width to the circle div, as well as set the transform-origin to be the left-side of your element so that you rotate around the left-side of your semi-circle and not the center:
transform-origin: left;
width: 50px;
See example below:
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 200px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
animation: spinning linear infinite;
animation-duration: 3s;
transform-origin: left;
width: 50px;
}
#keyframes spinning {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
As the title describes, I am trying to animate a dashed arrow. I want it to look as close as possible to this on this site.
I was able to make an arrow although I'm not sure that this was the correct way of making such arrow. I'm assuming I'd have to have drawn it with SVG...
Also the animation looks weird and I don't know how to make it smoother...
I'd appreciate some help guys :)
This is the JsFiddle i made
Here is the code:
body {
margin: 0;
font-size: 16px;
line-height: 1.528571429;
padding: 0;
height: 100%;
}
body #contact {
height: calc(100vh - 40px);
background-color: #ffffff;
}
body #contact .to-top-btn-wrapper {
position: absolute;
z-index: 999;
left: 7%;
bottom: 15%;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper {
margin: -35px auto;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper .btn-text {
font-size: 14px;
letter-spacing: 0.25em;
text-align: center;
color: #676565;
text-transform: uppercase;
}
body #contact .to-top-btn-wrapper .to-top-btn {
position: absolute;
top: 0;
left: 35px;
bottom: 25px;
cursor: pointer;
}
body #contact .to-top-btn-wrapper .to-top-btn .line {
border-right: 0.1rem dashed #676565;
display: inline-block;
animation: show 1000ms linear forwards infinite;
}
body #contact .to-top-btn-wrapper .to-top-btn .arrow {
position: absolute;
top: -0.3rem;
bottom: 0;
height: 1rem;
border-right: 0.1rem solid #676565;
display: inline-block;
}
body #contact .to-top-btn-wrapper .to-top-btn .right {
left: 0.3rem;
transform: rotate(-45deg);
}
body #contact .to-top-btn-wrapper .to-top-btn .left {
right: 0.3rem;
transform: rotate(45deg);
}
#keyframes show {
0% {
height: 5rem;
}
100% {
height: 0rem;
}
}
<section id="contact" class="container-fluid">
<div class="to-top-btn-wrapper">
<div class="btn-text-wrapper">
<span class="btn-text">Scroll to top</span>
</div>
<div class="to-top-btn">
<span class="arrow left"></span>
<span class="line"></span>
<span class="arrow right"></span>
</div>
</div>
</section>
A clip-path animation with some background can do it
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-block;
position: relative;
padding-bottom:4px;
color: #fff;
background: linear-gradient(currentColor 50%, transparent 50%) top/2px 15px content-box repeat-y;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
animation:hide infinite 2s linear;
}
.arrow:after {
content: "";
position: absolute;
border-left: 2px solid;
border-bottom: 2px solid;
width: 80%;
padding-top: 80%;
bottom: 4px;
left: 1px;
transform: rotate(-45deg);
}
#keyframes hide {
50% {
clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
}
50.1% {
clip-path:polygon(0 0 ,100% 0 ,100% 0 ,0 0);
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
A similar idea using mask
.arrow {
width: 20px;
margin:10px;
height: 150px;
padding-bottom:4px;
display:inline-block;
position: relative;
color: #fff;
background: linear-gradient(currentColor 50%, transparent 50%) top/2px 15px content-box repeat-y;
-webkit-mask:linear-gradient(#fff,#fff);
-webkit-mask-size:100% 0%;
-webkit-mask-repeat:no-repeat;
mask:linear-gradient(#fff,#fff);
mask-size:100% 0%;
mask-repeat:no-repeat;
animation:hide infinite 2s linear;
}
.arrow:after {
content: "";
position: absolute;
border-left: 2px solid;
border-bottom: 2px solid;
width: 80%;
padding-top: 80%;
bottom: 4px;
left: 1px;
transform: rotate(-45deg);
}
#keyframes hide {
50% {
-webkit-mask-size:100% 100%;
-webkit-mask-position:top;
mask-size:100% 100%;
mask-position:top;
}
50.1% {
-webkit-mask-size:100% 100%;
-webkit-mask-position:bottom;
mask-size:100% 100%;
mask-position:bottom;
}
100% {
-webkit-mask-position:bottom;
mask-position:bottom;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
Here is a background only solution with no clip-path:
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-block;
color: #fff;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
currentColor 0 calc(50% + 1px),
transparent 0)
bottom left/10px 10px,
linear-gradient(to bottom right,
transparent calc(50% - 1px),
currentColor 0 calc(50% + 1px),
transparent 0)
bottom right/10px 10px,
repeating-linear-gradient(currentColor 0 7px, transparent 7px 15px)
bottom/2px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
#keyframes hide {
50% {
padding:150px 0 0;
}
50.1% {
padding:0 0 150px;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
Another version with less gradient:
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-flex;
}
.arrow:before,
.arrow:after{
content:"";
width:50%;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
white 0 calc(50% + 1px),
transparent 0)
bottom/100% 10px,
repeating-linear-gradient(white 0 7px, transparent 0 15px)
right/1px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
.arrow:after {
transform:scaleX(-1);
}
#keyframes hide {
50% {
padding:150px 0 0;
}
50.1% {
padding:0 0 150px;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
And with CSS variables to easily control everything:
.arrow {
--h:150px; /* height */
--w:20px; /* width */
--b:7px; /* width of the dash*/
--g:8px; /* gap between dashes*/
width: var(--w);
margin:10px;
height: var(--h);
display:inline-flex;
}
.arrow:before,
.arrow:after{
content:"";
width:50%;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
white 0 calc(50% + 1px),
transparent 0)
bottom/100% calc(var(--w)/2),
repeating-linear-gradient(white 0 var(--b), transparent 0 calc(var(--b) + var(--g)))
right/1px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
.arrow:after {
transform:scaleX(-1);
}
#keyframes hide {
50% {
padding:var(--h) 0 0;
}
50.1% {
padding:0 0 var(--h);
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1);--h:100px;--g:3px;"></div>
<div class="arrow" style="--h:120px;--b:3px;--w:30px"></div>
<div class="arrow" style="transform:scaleY(-1);--h:150px;--b:5px;--g:10px;--w:40px"></div>
toke a different approach to the arrow animation.
you can use SVG instead of text.
POC:
body {
margin: 0;
}
.arrow-container {
padding: 0 50px;
animation: scrolling 2s infinite linear;
overflow: hidden;
height: 150px;
}
.arrow {
animation: scrolling-a 2s infinite linear;
}
.arrow-point {
font-size: 50px;
display: block;
margin: 0 0 -50px -10px;
}
#keyframes scrolling {
0% {
margin-top: 150px;
height: 0;
}
50% {
margin-top: 0;
height: 150px;
}
100% {
margin-top: 0;
height: 0;
}
}
#keyframes scrolling-a {
0% {
margin-top: -150px;
}
50%,
100% {
margin-top: 0;
}
}
<div class="arrow-container">
<div class="arrow">
<span class="arrow-point">^</span><br> |
<br> |
<br> |
<br> |
<br> |
<br> |
<br> |
</div>
</div>