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>
Related
I am working on the invite page, in which the envelope is shown first and after clicking on envelope it shows content, the problem is that the envelope is not responsive, I am using display:flex for my main page, but the template I used for envelope does not use flex, when I remove it, it works fine but my main page broke down, so is there any way to fix it?:
(the envelope looks like this on mobile screen)
.frame {
width: 550px;
height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 580px;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 0;
height: 0;
position: absolute;
top: 0;
z-index: 310;
}
.left {
border-left: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right {
border-right: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
left: 300px;
}
.top {
border-right: 300px solid transparent;
border-top: 200px solid #03a9f4;
border-left: 300px solid transparent;
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 600px;
height: 190px;
position: absolute;
background: #2b67cb;
top: 160px;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh;
width: 100%; */
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
The border properties unfortunately don't take responsive percentages, so your .top .left and .right elements will not be responsive. You could instead create those envelope shapes with clip-path and then combined with a few other CSS updates and your envelope will adjust with screen size. Demo included
.frame {
width: 100%;
max-width: 550px;
height: 100%;
max-height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
bottom: 0;
left: 50%;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transform: translateX(-50%);
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: translateX(-50%) scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 100%;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
bottom: 0;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 310;
}
.left {
background: #337efc;
clip-path: polygon(0 0, 0 90%, 50% 50%);
}
.right {
background: #337efc;
clip-path: polygon(100% 0, 100% 90%, 50% 50%);
}
.top {
background: #03a9f4;
clip-path: polygon(0 0, 100% 0, 50% 62.5%);
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
background: #2b67cb;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
I'm a beginner and wanted to add one button that I saw on YouTube, the author left a link to the codepen, I went in and copied all the code from there, and pasted it into my project in visual studio code, but the html code looked strange and didn't work at all.
[Link to the Codepen page][1]
$('.order').click(function(e) {
let button = $(this);
if(!button.hasClass('animate')) {
button.addClass('animate');
setTimeout(() => {
button.removeClass('animate');
}, 10000);
}
});
:root {
--primary: #275EFE;
--primary-light: #7699FF;
--dark: #1C212E;
--grey-dark: #3F4656;
--grey: #6C7486;
--grey-light: #CDD9ED;
--white: #FFF;
--green: #16BF78;
--sand: #DCB773;
--sand-light: #EDD9A9;
}
.order {
appearance: none;
border: 0;
background: var(--dark);
position: relative;
height: 63px;
width: 240px;
padding: 0;
outline: none;
cursor: pointer;
border-radius: 32px;
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-tap-highlight-color: transparent;
overflow: hidden;
transition: transform .3s ease;
span {
--o: 1;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 19px;
line-height: 24px;
color: var(--white);
font-size: 16px;
font-weight: 500;
opacity: var(--o);
transition: opacity .3s ease;
&.default {
transition-delay: .3s;
}
&.success {
--offset: 16px;
--o: 0;
svg {
width: 12px;
height: 10px;
display: inline-block;
vertical-align: top;
fill: none;
margin: 7px 0 0 4px;
stroke: var(--green);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: var(--offset);
transition: stroke-dashoffset .3s ease;
}
}
}
&:active {
transform: scale(.96);
}
.lines {
opacity: 0;
position: absolute;
height: 3px;
background: var(--white);
border-radius: 2px;
width: 6px;
top: 30px;
left: 100%;
box-shadow: 15px 0 0 var(--white), 30px 0 0 var(--white), 45px 0 0 var(--white), 60px 0 0 var(--white), 75px 0 0 var(--white), 90px 0 0 var(--white), 105px 0 0 var(--white), 120px 0 0 var(--white), 135px 0 0 var(--white), 150px 0 0 var(--white), 165px 0 0 var(--white), 180px 0 0 var(--white), 195px 0 0 var(--white), 210px 0 0 var(--white), 225px 0 0 var(--white), 240px 0 0 var(--white), 255px 0 0 var(--white), 270px 0 0 var(--white), 285px 0 0 var(--white), 300px 0 0 var(--white), 315px 0 0 var(--white), 330px 0 0 var(--white);
}
.back,
.box {
--start: var(--white);
--stop: var(--grey-light);
border-radius: 2px;
background: linear-gradient(var(--start), var(--stop));
position: absolute;
}
.truck {
width: 60px;
height: 41px;
left: 100%;
z-index: 1;
top: 11px;
position: absolute;
transform: translateX(24px);
&:before,
&:after {
--r: -90deg;
content: '';
height: 2px;
width: 20px;
right: 58px;
position: absolute;
display: block;
background: var(--white);
border-radius: 1px;
transform-origin: 100% 50%;
transform: rotate(var(--r));
}
&:before {
top: 4px;
}
&:after {
--r: 90deg;
bottom: 4px;
}
.back {
left: 0;
top: 0;
width: 60px;
height: 41px;
z-index: 1;
}
.front {
overflow: hidden;
position: absolute;
border-radius: 2px 9px 9px 2px;
width: 26px;
height: 41px;
left: 60px;
&:before,
&:after {
content: '';
position: absolute;
display: block;
}
&:before {
height: 13px;
width: 2px;
left: 0;
top: 14px;
background: linear-gradient(var(--grey), var(--grey-dark));
}
&:after {
border-radius: 2px 9px 9px 2px;
background: var(--primary);
width: 24px;
height: 41px;
right: 0;
}
.window {
overflow: hidden;
border-radius: 2px 8px 8px 2px;
background: var(--primary-light);
transform: perspective(4px) rotateY(3deg);
width: 22px;
height: 41px;
position: absolute;
left: 2px;
top: 0;
z-index: 1;
transform-origin: 0 50%;
&:before,
&:after {
content: '';
position: absolute;
right: 0;
}
&:before {
top: 0;
bottom: 0;
width: 14px;
background: var(--dark);
}
&:after {
width: 14px;
top: 7px;
height: 4px;
position: absolute;
background: rgba(255, 255, 255, .14);
transform: skewY(14deg);
box-shadow: 0 7px 0 rgba(255, 255, 255, .14);
}
}
}
.light {
width: 3px;
height: 8px;
left: 83px;
transform-origin: 100% 50%;
position: absolute;
border-radius: 2px;
transform: scaleX(.8);
background: rgba(240, 220, 95, 1);
&:before {
content: '';
height: 4px;
width: 7px;
opacity: 0;
transform: perspective(2px) rotateY(-15deg) scaleX(.94);
position: absolute;
transform-origin: 0 50%;
left: 3px;
top: 50%;
margin-top: -2px;
background: linear-gradient(90deg, rgba(240, 220, 95, 1), rgba(240, 220, 95, .7), rgba(240, 220, 95, 0));
}
&.top {
top: 4px;
}
&.bottom {
bottom: 4px;
}
}
}
.box {
--start: var(--sand-light);
--stop: var(--sand);
width: 21px;
height: 21px;
right: 100%;
top: 21px;
&:before,
&:after {
content: '';
top: 10px;
position: absolute;
left: 0;
right: 0;
}
&:before {
height: 3px;
margin-top: -1px;
background: rgba(0, 0, 0, .1);
}
&:after {
height: 1px;
background: rgba(0, 0, 0, .15);
}
}
&.animate {
.default {
--o: 0;
transition-delay: 0s;
}
.success {
--offset: 0;
--o: 1;
transition-delay: 7s;
svg {
transition-delay: 7.3s;
}
}
.truck {
animation: truck 10s ease forwards;
&:before {
animation: door1 2.4s ease forwards .3s;
}
&:after {
animation: door2 2.4s ease forwards .6s;
}
.light {
&:before,
&:after {
animation: light 10s ease forwards;
}
}
}
.box {
animation: box 10s ease forwards;
}
.lines {
animation: lines 10s ease forwards;
}
}
}
#keyframes truck {
10%,
30% {
transform: translateX(-164px);
}
40% {
transform: translateX(-104px);
}
60% {
transform: translateX(-224px);
}
75%,
100% {
transform: translateX(24px);
}
}
#keyframes lines {
0%,
30% {
opacity: 0;
transform: scaleY(.7) translateX(0);
}
35%,
65% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
transform: scaleY(.7) translateX(-400px);
}
}
#keyframes light {
0%,
30% {
opacity: 0;
transform: perspective(2px) rotateY(-15deg) scaleX(.88);
}
40%,
100% {
opacity: 1;
transform: perspective(2px) rotateY(-15deg) scaleX(.94);
}
}
#keyframes door1 {
30%,
50% {
transform: rotate(32deg);
}
}
#keyframes door2 {
30%,
50% {
transform: rotate(-32deg);
}
}
#keyframes box {
8%,
10% {
transform: translateX(40px);
opacity: 1;
}
25% {
transform: translateX(112px);
opacity: 1;
}
26% {
transform: translateX(112px);
opacity: 0;
}
27%,
100% {
transform: translateX(0px);
opacity: 0;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
font-family: Roboto, Arial;
display: flex;
justify-content: center;
align-items: center;
background: #E4ECFA;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
}
button(class='order')
span(class='default') Complete Order
span(class='success') Order Placed
svg(viewbox='0 0 12 10')
polyline(points='1.5 6 4.5 9 10.5 1')
div(class='box')
div(class='truck')
div(class='back')
div(class='front')
div(class='window')
div(class='light top')
div(class='light bottom')
div(class='lines')
<!-- dribbble -->
a(class='dribbble' href='https://dribbble.com/shots/7112021-Order-confirm-animation' target='_blank')
img(src='https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg')
Can someone please help me???
Looks like Jade, not HTML. It's very easy to convert, just add arrow brackets and closing tags div(class="whatever") is <div class="whatever"></div>. The indentations matter as they are what is considered "in" a tag
div(class="whatever")
span hello
is
<div class="whatever">
<span>hello</span>
</div>
The code in the CSS block is Sass a CSS preprocessor.
I am trying to run a transition when entering the viewport. I want the cards to simply opacity in... I have a proxy element inside my div with backdrop-filters applied to apply a "frosted glass" look. When there is any type of opacity change to the parent the filter simply doesn't apply and results in a clunky animation. Here is the CSS for context:
.card {
width: 100%;
position: relative;
min-height: 320px;
border-radius: 12px;
overflow: hidden;
padding: 32px 24px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
max-width: 45rem;
margin: 8px 0;
transition: all 0.4s ease;
.backdrop {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
border-radius: 12px;
backdrop-filter: blur(32px) brightness(115%);
background-color: rgba(255, 255, 255, 0.16);
}
}
I have tried applying a transition to the child aswell, also tried applying the following to both parent and backdrop:
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-perspective: 1000;
You can use #keyframes to make animation like this:
.card {
width: 100%;
position: relative;
min-height: 320px;
border-radius: 12px;
overflow: hidden;
padding: 32px 24px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
max-width: 45rem;
margin: 8px 0;
animation: fadein 3s;
.backdrop {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
border-radius: 12px;
backdrop-filter: blur(32px) brightness(115%);
background-color: rgba(255, 255, 255, 0.16);
}
}
#keyframes fadein {
from{opacity: 0;}
50%{opacity: 0.5} /* Ignored */
to{opacity: 1;}
You can change that to maybe on hover to change it.
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>
I have one question about responsive left sidebar open close function.
I have created this DEMO from codepen.io
You can see in the demo there is a button (Click to show blue div). When you click this button then blue div will open from left side. It is ok but if you change your browser width < 800px then the .left div will displayed. After than if you click again (Click to show blue div) the blue div not opening, also at the same time if you change your browser width>880px then you can see the blue div still be opened because you clicked it before.
I want to make it when browser width<880px and when i click the (Click to show blue div) then i want to show blue div from left side.
How can i do that anyone can help me in this regard ?
HTML
<div class="test_container">
<div class="left">
<div class="left_in">Here is a some text</div>
<div class="problem-div">
<div class="proglem-div-in">
<!--Here is a some menu-->
</div>
</div>
</div>
<div class="gb" data-id="1" data-state="close">Click To Show Blue Div</div>
<div class="right">
<div class="bb"></div>
</div>
</div>
CSS
.test_container {
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
max-width: 980px;
min-width: 300px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background-color: #000;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 140px;
}
.left {
display: block;
position: absolute;
float: left;
width: 30%;
overflow: hidden;
padding: 0px;
bottom: 0;
top: 0;
left: 0;
background-color: red;
border-right: 1px solid #d8dbdf;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in {
z-index: 999 !important;
position: absolute;
float: left;
width: 100%;
height: 100%;
background-color: red;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(25rem);
transform: translateX(25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slideLeft {
0% {
-webkit-transform: translateX(15rem);
transform: translateX(15rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.aa {
background-color: #f7f7f7;
/*background-color: #dfdfdf;
background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
width: 0;
top: 0;
border-radius: 0%;
z-index: 1000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
}
.click_open_close {
right: 0px;
padding: 10px;
color: #fff;
position: absolute;
background-color: green;
cursor: pointer;
z-index: 999;
display: none;
}
.pp {
right: 0px;
padding: 10px;
color: #fff;
position: absolute;
background-color: green;
cursor: pointer;
}
.right {
display: block;
position: absolute;
width: 70%;
bottom: 0;
top: 0;
right: 0%;
background-color: pink;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gb {
cursor: pointer;
position: absolute;
left: 30%;
padding: 10px;
color: #fff;
background-color: black;
z-index: 9999;
}
.problem-div {
z-index: 999 !important;
position: absolute;
float: left;
width: 0%;
height: 100%;
background-color: blue;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#media all and (max-width: 840px) {
.left {
left: -60%;
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.right {
width: 100%;
}
.click_open_close {
display: block;
}
}
JS
$(".gb").on('click', function() {
var id = $(this).data("id");
var state = $(this).data("state");
if (state === "close") {
$(this).data("state", 'open');
$(".problem-div").animate({
width: "100%"
}, 200).find(".proglem-div-in").animate({
width: "100%"
}, 200);
} else {
$(this).data("state", 'close');
$(".problem-div").animate({
width: "0%"
}, 200).find(".proglem-div-in").animate({
width: "0%"
}, 200);
}
});
The problem is with CSS, replace media query css with this CSS:
#media all and (max-width: 840px) {
.left {
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.click_open_close {
display: block;
}
}