I got this shape and trying to achieve this in css3, what I tried so far is:
.door {
width: 150px;
height: 160px;
background-image: linear-gradient(180deg, #234dbc, #b84295);
position: absolute;
top: 100px;
border-radius: 5px;
transform: rotate(17deg) skew(17deg);
background-size: 200% 200%;
animation: Animation 5s ease infinite;
}
#keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:90% 100%}
100%{background-position:10% 0%}
}
<div class="door"></div>
But I couldn't handle this with skew any idea or solution?
You are almost there. Consider a pseudo element to be able to hide the bottom part using overflow:hidden
.door {
width: 100px;
height: 160px;
display: grid;
border-radius: 10px;
overflow:hidden;
transform-origin: bottom;
transform: skewX(-4deg);
}
.door:before {
content:"";
background-image: linear-gradient(180deg, #234dbc, #b84295);
border-radius: inherit;
transform: skewY(17deg);
transform-origin: bottom left;
background-size: 200% 200%;
animation: Animation 5s ease infinite;
}
#keyframes Animation {
50% {
background-position: 90% 100%
}
}
<div class="door"></div>
Always :before solve the problem
.door {
width: 100px;
height: 160px;
background-image: linear-gradient(180deg, #234dbc, #b84295);
position: absolute;
top: 100px;
border-radius: 5px;
background-size: 200% 200%;
animation: Animation 5s ease infinite;
overflow: hidden;
transform: skewX(-2deg)
}
.door::before {
content: "";
position: absolute;
width: 150px;
height: 52px;
background: rgb(248, 248, 248);
top: -30px;
left: 0px;
transform: skewY(18deg);
}
<div class="door"></div>
You should make the :before background like the background of the area to seem like it's transparent
For that i make the background color of the :before rgb(248, 248, 248)
Related
I'm following a tutorial on youtube on how to create a Glowing Border Animation with CSS
I tried to implement it myself and was pretty successful, however, I encountered a problem which I'm unable to solve. When I view my animation there is an uneven transition. It looks like as if two images are stuck together where the colours transition is cut off.
How can I solve the issue there with my transition looks smooth?
I created a JSFiddle to display what I mean:
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
color: #fff;
font: 300 2rem 'Montserrat';
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
width: calc(100% + 30px);
height: calc(100% + 30px);
top: -15px;
left: -15px;
background: linear-gradient(45deg, #0096FF, #0047AB, #000000, #6082B6, #87CEEB, #00008B, #145DA0, #00008B, #145DA0, #0096FF, #0047AB, #000000, #6082B6, #87CEEB);
background-repeat: repeat;
border-radius: 5px;
background-size: 600%;
animation: border 12s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: 0% 0%;
}
100% {
background-position: 250% 250%;
}
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<div class="box">
Greetings fellow developer!
</div>
Note: The animation looks smooth at first but after about 7ish seconds you encounter the "cut off" where the transition doesn't line up.
Your gradient need to have a kind of repetition to achieve such effect. Make its size 200% 200% then use a repeating gradient where the first color start at 0% and the last one at 50%. Notice how the list of color is repeated twice but in the opposite order.
body {
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
inset: -15px;
background:
repeating-linear-gradient(45deg,
#0096FF 0%, #0047AB, #6082B6, #87CEEB, #00008B,
#00008B, #87CEEB, #6082B6,#0047AB,#0096FF 50%);
border-radius: 5px;
background-size: 200% 200%;
animation: border 2s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: bottom left;
}
100% {
background-position: top right;
}
}
<div class="box">
</div>
I want to create a gradient border animation starting from the top left to the bottom right. The animation will be used for images within this div.
I tried every degree of angle, but didn't get this to work in the direction I want, it always starts at the right top or at the bottom right.
Also tried it with negative degree values.
.block {
position: relative;
margin: 30px auto 0;
width: 250px;
height: 250px;
background: #272727;
}
.block:before, .block:after {
content: '';
position: absolute;
left: -1px;
top: -1px;
background: linear-gradient(45deg, rgba(0,0,0,0)35%, rgba(0,204,255,1)50%, rgba(0,0,0,0)65%);
background-size: 400%;
width: calc(100% + 2px);
height: calc(100% + 2px);
z-index: -1;
animation: shine 8s linear infinite;
}
#keyframes shine {
to {
background-position: 400% center;
}
}
.block:after {
filter: blur(8px);
}
<div class="block"></div>
Update your code like below:
.block {
position: relative;
margin: 30px auto 0;
width: 250px;
height: 250px;
background: #272727;
}
.block:after {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(-45deg, rgba(0, 0, 0, 0)35%, rgba(0, 204, 255, 1)50%, rgba(0, 0, 0, 0)65%);
background-size: 400% 400%;
z-index: -1;
animation: shine 3s linear infinite;
filter: blur(8px);
}
#keyframes shine {
from {
background-position: 100% 100%
}
to {
background-position: 0 0
}
}
<div class="block"></div>
I want to create a rectangle and animate the drawing of lines. The lines should grow vertically up and down from the rectangle. Totally, I want to have 2 lines growing up, and 2 lines growing down.
This is my current script:
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.vertline {
width: 2px;
margin-left: 10%;
background-color: #dd8341;
top: 40%;
animation:lineup 3s forwards;
position: relative;
}
#keyframes lineup {
0% {
height: 0px;
}
100% {
height: 200px;
}
}
<div class="content"></div>
<div class="vertline"></div>
I cannot align all elements correctly. What is the correct way to do this simple task?
You can do it without additional elements, using the :before and :after pseudo-elements to grow up and down, and background: linear-gradient() to create two lines:
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.content:before,
.content:after {
content: "";
width: 6px; /* color white ("no color") color (each 2px wide); here you can adjust the width */
height: 0;
background: linear-gradient(to right, #dd8341, #dd8341 33.33%, #fff 33.33%, #fff 66.66%, #dd8341 66.66%); /* here you can adjust the spacing */
margin-left: 10%;
position: absolute; /* needs to be absolute */
top: 0;
animation: lineup 3s forwards;
}
.content:after {
top: 100%;
animation: linedown 3s forwards;
}
#keyframes lineup {100% {top: -200px; height: 200px}}
#keyframes linedown {100% {height: 200px}}
<div class="content"></div>
Addition:
/* recommended */
* {box-sizing: border-box}
body {margin: 0}
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.content:before,
.content:after,
.linedown1,
.linedown2 {
content: "";
width: 2px;
height: 0;
background: #dd8341;
left: 20%;
position: absolute;
top: 0;
animation: lineup 3s forwards;
}
.linedown1, .linedown2 {top: 100%; animation: linedown 3s forwards}
.content:after, .linedown2 {left: 80%; animation-delay: 1s}
#keyframes lineup {100% {top: -200px; height: 200px}}
#keyframes linedown {100% {height: 200px}}
<div class="content">
<span class="linedown1"></span>
<span class="linedown2"></span>
</div>
Here is an idea with only background and gradient:
.content {
position: fixed;
width:100%;
height:100vh;
background-image:
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341);
background-position:center, 10% center,calc(10% + 4px) center;
background-size:100% 40%,2px 0,2px 0;
background-repeat:no-repeat;
animation:lineup 2s forwards linear;
}
#keyframes lineup {
to {
background-size:100% 40%,2px 100%,2px 100%;
}
}
<div class="content"></div>
UPDATE
To add delay simple add more states to the animation:
.content {
position: fixed;
width:100%;
height:100vh;
background-image:
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341);
background-position:center, 20% center,80% center;
background-size:100% 40%,2px 0,2px 0;
background-repeat:no-repeat;
animation:lineup 2s forwards linear;
}
#keyframes lineup {
50% {
background-size:100% 40%,2px 100%,2px 0%;
}
to {
background-size:100% 40%,2px 100%,2px 100%;
}
}
<div class="content"></div>
I have an oval, and inside the oval, I have a strip that I need it to have waves
I have made this:
.strip {
content: "";
position: relative;
background: #4286f4;
z-index: 1;
width: 100%;
height: 100%;
bottom: 0%;
animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
animation-iteration-count: infinite;
}
#keyframes wipe {
from {
bottom: 0%;
}
to {
bottom: 100%;
}
}
.oval {
position: absolute;
background: #343434;
-moz-border-radius: 0 50% / 0 100%;
-webkit-border-radius: 0 50% / 0 100%;
border-radius: 150px;
height: 100px;
width: 80%;
overflow: hidden;
}
<div class="oval">
<div class="strip"></div>
</div>
How can i make that my strip have infinite wave animation?
You can try some repeated radial-gradient over a linear-graident to create the waves. Then you can simply animate the background-position and you can get rid of one DOM element.
#keyframes wipe {
from {
background-position:0 85px,0 120px;
}
to {
background-position:100px -45px,100px -20px;
}
}
.oval {
border-radius: 150px;
height: 100px;
width: 80%;
overflow: hidden;
background:
radial-gradient(circle at center,#4286f4 67%,transparent 67.5%)0 5px /50px 50px repeat-x,
linear-gradient(#343434,#343434)0 30px/100% 150% repeat-x;
background-color: #4286f4;
animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
animation-iteration-count: infinite;
}
<div class="oval">
</div>
If I understand correctly you want the wave to go up and down?
You can specify percentages instead of from and to as keyframes-selector
.strip {
content: "";
position: relative;
background: #4286f4;
z-index: 1;
width: 100%;
height: 100%;
bottom: 0%;
animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
animation-iteration-count: infinite;
}
#keyframes wipe {
0% {
bottom: 0%;
}
50% {
bottom: 100%;
}
100% {
bottom: 0%;
}
}
.oval {
position: absolute;
background: #343434;
-moz-border-radius: 0 50% / 0 100%;
-webkit-border-radius: 0 50% / 0 100%;
border-radius: 150px;
height: 100px;
width: 80%;
overflow: hidden;
}
<div class="oval">
<div class="strip"></div>
</div>
I found problem in new Firefox 32.0.2
http://jsfiddle.net/hdxoo9wy/1/
Here is example.
HTML
<div class="box">
<div class="ob3d"></div>
</div>
CSS
html,body{
height: 100%;
}
.box{
perspective: 1000px;
width: 80%;
height: 80%;
margin: 10%;
border: 1px rgba(0,255,0,0.2) dashed;
}
.ob3d{
width: 100%;
height: 100%;
transform: rotateX(0.5deg);
background: rgba(255,0,0,0.5);
transform-origin: 50% 100% 0;
outline: 1px transparent solid;
animation: bounce 5s linear infinite;
}
#keyframes bounce{
0% { transform: rotateX(-20deg);}
50% { transform: rotateX(20deg);}
100% { transform: rotateX(-20deg);}
}
Problem appears during rotationX in range -0.5deg , 0.5deg . It jumps and gives a bit random effect. Any ideas how to fix this?