I am trying to put loader inside a table but it is not working. The issue is when I am putting div inside a td, the tabular format is not working.
When I inspected the elements the div was outside of the table.
.loader {
background: #000;
background: radial-gradient(#222, #000);
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
.loader-inner {
height: 60px;
left: 0;
position: absolute;
right: 0;
width: 100px;
}
.loader-line-wrap {
animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) {
animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {
animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {
animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
border-color: hsl(0, 80%, 60%);
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: hsl(60, 80%, 60%);
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: hsl(120, 80%, 60%);
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: hsl(180, 80%, 60%);
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: hsl(240, 80%, 60%);
height: 34px;
width: 34px;
top: 35px;
}
#keyframes spin {
0%, 15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>
<div id="preloader" class="loader">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
</td>
</tr>
</table>
If you need to contain the loading graphic within the <td> then you should not use fixed positioning.
Here is one solution. Remove the fixed positioning and related properties. Set positioning to relative along with a height and width for .loader.
.loader {
position: relative;
background: #000;
background: radial-gradient(#222, #000);
overflow: hidden;
z-index: 99999;
width: 100px;
height: 100px;
}
.loader-inner {}
.loader-line-wrap {
animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) {
animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {
animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {
animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
border-color: hsl(0, 80%, 60%);
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: hsl(60, 80%, 60%);
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: hsl(120, 80%, 60%);
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: hsl(180, 80%, 60%);
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: hsl(240, 80%, 60%);
height: 34px;
width: 34px;
top: 35px;
}
#keyframes spin {
0%, 15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
table td {
border: 1px solid #CCC;
}
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>
<div id="preloader" class="loader">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
</td>
</tr>
</table>
Add an id or class to the loader's parent td and set its position to relative. Make the loader's position absolute.
#loaderContainer {
position: relative;
height: 100px;
width: 100px;
}
.loader {
background: #000;
background: radial-gradient(#222, #000);
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 99999;
}
.loader-inner {
height: 60px;
left: 0;
position: absolute;
right: 0;
width: 100px;
}
.loader-line-wrap {
animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) {
animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {
animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {
animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
border-color: hsl(0, 80%, 60%);
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: hsl(60, 80%, 60%);
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: hsl(120, 80%, 60%);
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: hsl(180, 80%, 60%);
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: hsl(240, 80%, 60%);
height: 34px;
width: 34px;
top: 35px;
}
#keyframes spin {
0%, 15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td id="loaderContainer">
<div id="preloader" class="loader">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
</td>
</tr>
</table>
Related
I am working on angular app and I am very new to html and css. I am trying to make a progress bar. I want to divide each section of this progress bar into two sub sections with different background color as shown here in the image below.
my code is as follows:
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
simple
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
How can I do this? Please help.
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(-45deg);
}
#div1{
width:60%;
}
#div2{
width:40%;
}
#div2:hover:before,#div2:hover:after
{
background: green !important;
}
#div1:hover:before,#div1:hover:after
{
background: orange; !important;
}
<div class="wrap">
<div class="progress">
<div class="progress" id="div1">simple</div>
<div class="progress" id="div2">simple</div>
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(-45deg);
}
#div1{
width:60%;
}
#div2{
width:40%;
}
#div2:hover:before,#div2:hover:after
{
background: green !important;
}
#div1:hover:before,#div1:hover:after
{
background: orange; !important;
}
<div class="wrap">
<div class="progress">
<div class="progress" id="div1">simple</div>
<div class="progress" id="div2">simple</div>
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
You could use a linear gradient, e.g.:
background: linear-gradient(90deg, rgba(0,212,255,1) 80%, rgba(0,0,0,0.2) 80%);
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
background: linear-gradient(90deg, rgba(0,212,255,1) 80%, rgba(0,0,0,0.2) 80%);
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
simple
</div>
<div class="progress">
<div style="display:inline-block;width:80%;">80%</div>
<div style="display:inline-block;width:20%;">20%</div>
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
The CSS animation here on my website is missing some features from the Codepen example such as the smoke and there is gaps in between some parts of the train. The code used is identical except I have to decompile the SASS to CSS before I put it into Shopify. And here is the Codepen link
body {
background: linear-gradient(90deg, #1A2980 10%, #26D0CE 90%);
height: 100vh;
width: 100vw;
display: -webkit-box;
display: flex;
align-items: center;
justify-content: center;
}
.toy-train {
position: relative;
width: 11vw;
}
.engine {
float: right;
position: relative;
}
.window {
height: 2.8vw;
width: 3vw;
background-color: #194488;
position: relative;
border: .3vw solid #000;
}
.window:before,
.window:after {
content: "";
position: absolute;
left: 50%;
border: .3vw solid #000;
}
.window:before {
height: .7vw;
background-color: #F82510;
width: 4.5vw;
margin-top: -1.3vw;
margin-left: -2.6vw;
border-radius: .8vw;
}
.window:after {
margin-left: -.8vw;
margin-top: .3vw;
border-radius: 50%;
height: 1.1vw;
width: 1.1vw;
background-color: #fff;
}
.engine-main {
height: 1vw;
width: 3.5vw;
border: .3vw solid #000;
background-color: #3D9A01;
position: absolute;
border-radius: 0 .8vw .8vw 0;
right: -4.1vw;
bottom: -.3vw;
}
.engine-main:before {
content: "";
height: 1vw;
width: .8vw;
background-color: #000;
position: absolute;
top: -1.1vw;
left: .4vw;
transform: rotate(180deg);
border-radius: 50% 50% 50% 50% / 90% 90% 40% 40%;
}
.engine-main:after {
content: "";
height: 1.2vw;
width: .8vw;
position: absolute;
display: block;
right: .5vw;
top: -1.8vw;
border-radius: 50% 50% 50% 50% / 90% 90% 40% 40%;
transform: rotate(180deg);
z-index: -1;
background-color: #194488;
border: .3vw solid #000;
}
.engine-body {
height: 1.7vw;
width: 7.5vw;
position: absolute;
left: -.2vw;
top: 3.0vw;
background-color: #F69F00;
border: .3vw solid #000;
border-radius: .5vw;
}
.engine-body .big-wheel {
top: .3vw;
left: .2vw;
}
.engine-body .normal-wheel {
left: 4.5vw;
top: .5vw;
}
.engine-body:before {
content: "";
position: absolute;
height: .5vw;
width: .5vw;
left: -1.1vw;
bottom: .2vw;
z-index: -1;
background-color: #fff;
border-radius: 50%;
border: .3vw solid #000;
}
.wheels>div {
position: absolute;
background-color: #F82510;
border-radius: 50%;
border: .3vw solid #000;
animation: wheel-rotate 1s linear infinite;
}
.wheels>div:before {
content: "";
position: absolute;
width: 100%;
border-bottom: .1vw solid #000;
top: 50%;
margin-top: -.1vw;
}
.wheels>div:after {
content: "";
height: .8vw;
width: .8vw;
position: absolute;
background-color: #000;
border-radius: 50%;
left: 50%;
top: 50%;
margin-left: -.4vw;
margin-top: -.4vw;
}
.wheels .big-wheel {
width: 2.2vw;
height: 2.2vw;
animation-delay: -0.3s;
}
.wheels .normal-wheel {
height: 2.0vw;
width: 2.0vw;
animation-delay: -0.6s;
}
.locomotive {
height: 3.5vw;
width: 6.0vw;
border: .3vw solid #000;
background-color: #F69F00;
border-radius: .5vw;
position: relative;
float: left;
margin-top: 1.3vw;
}
.locomotive:before {
content: "";
width: 100%;
background: linear-gradient(to right, #000000 0%, #000000 8%, #f69f00 8%, #f69f00 15%, #000000 15%, #000000 28%, #000000 34%, #f69f00 34%, #f69f00 65%, #000000 65%, #000000 65%, #000000 100%);
height: .3vw;
position: absolute;
top: .6vw;
left: 0;
}
.locomotive:after {
content: "";
width: 100%;
background: linear-gradient(to right, #000000 0%, #000000 24%, #f69f00 24%, #f69f00 65%, #f69f00 65%, #000000 65%, #000000 85%, #f69f00 85%, #f69f00 90%, #000000 90%, #000000 100%);
height: .3vw;
position: absolute;
top: 1.4vw;
left: 0;
}
.locomotive .wheels>div {
top: 2.2vw;
animation-delay: -0.6s;
}
.locomotive .wheels>div:first-child {
animation-delay: -0.9s;
}
.locomotive .normal-wheel:first-of-type {
left: .2vw;
}
.locomotive .normal-wheel:last-of-type {
right: .2vw;
}
.locomotive .trash {
height: 3.5vw;
width: 5.0vw;
position: absolute;
top: -1.8vw;
border: .3vw solid #000;
background-color: #3D9A01;
border-radius: 50%;
left: .2vw;
z-index: -1;
}
.tracks {
position: relative;
width: 20vw;
bottom: -1vw;
overflow: hidden;
height: .3vw;
}
.tracks span {
display: inline;
height: .3vw;
width: 20vw;
position: absolute;
left: 20vw;
background: linear-gradient(to right, black 0%, black 30%, transparent 30%, transparent 39%, black 39%, black 61%, black 65%, transparent 65%, transparent 70%, black 71%, black 100%);
animation: track 2s linear infinite;
animation-fill-mode: forwards;
}
.tracks span:nth-child(2) {
animation-delay: -1s;
}
.smokes:before,
.smokes:after,
.smokes span:before {
display: block;
content: "";
height: .8vw;
width: .8vw;
background-color: #e80404;
border-radius: 50%;
position: absolute;
right: .8vw;
top: 1.5vw;
z-index: -1;
}
.smokes:before {
animation: smoke 1s linear infinite;
}
.smokes span:before {
animation: smoke 1s linear infinite;
animation-delay: -0.6s;
}
.smokes:after {
animation: smoke 1s linear infinite;
animation-delay: -0.3s;
}
#keyframes smoke {
100% {
top: -5vw;
opacity: 0.5;
}
}
#keyframes wheel-rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes track {
100% {
left: -20vw;
}
}
<div class="toy-train">
<div class="engine">
<div class="window">
<div class="engine-main">
<div class="smokes">
<span></span>
</div>
</div>
</div>
<div class="engine-body">
<div class="wheels">
<div class="big-wheel"></div>
<div class="normal-wheel"></div>
</div>
</div>
</div>
<div class="locomotive">
<div class="trash"></div>
<div class="wheels">
<div class="normal-wheel"></div>
<div class="normal-wheel"></div>
</div>
</div>
<div class="tracks">
<span></span>
<span></span>
</div>
</div>
Hi I have two divs side by side - but when I change to mobile view they overlap, how can I stop this? Codepen - https://codepen.io/MarkHarrison/pen/NXNGgJ Thanks
box {
position: absolute !important;
left: 0;}
iframe{
border:10px solid transparent;
border-image-source:url(https://i.imgur.com/91tJ1qi.png);
border-image-slice:10;
width:500px;
height:300px;
display:block;
margin:auto;
}
.box {
position: relative;
margin: 0px;
display: block;
width: 600px;
height: 420px;
margin-top: 15%;
You may simply remove the .box class where there is the absolute position and let bootstrap restruct the content on small screens :
h1,
h2 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
padding-bottom: 100px;
}
body {
background: #2B2B2B;
}
.neon {
color: #fff;
text-shadow: 0 0 5px #F5D5D5, 0 0 10px #F2A7A7, 0 0 20px #F58484, 0 0 40px #FC5858, 0 0 80px #FF0F0F, 0 0 90px #F5D5D5, 0 0 100px #F2A7A7, 0 0 150px #F58484;
}
iframe {
border: 10px solid transparent;
border-image-source: url(https://i.imgur.com/91tJ1qi.png);
border-image-slice: 10;
width: 500px;
height: 300px;
display: block;
margin: auto;
}
.box {
position: relative;
margin: 0px;
display: block;
width: 600px;
height: 420px;
margin-top: 15%;
}
.face {
position: absolute;
height: 70%;
width: 40%;
left: 30%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 80% 80% 40% 40%;
}
.face-copy {
position: absolute;
height: 100%;
width: 100%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 80% 80% 40% 40%;
z-index: 2;
}
.ear-left {
position: absolute;
width: 15%;
height: 20%;
left: 5%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 50% 50% 90% 90%;
transform: rotate(-60deg);
z-index: 1;
}
.ear-right {
position: absolute;
width: 15%;
height: 20%;
left: 80%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 50% 50% 90% 90%;
transform: rotate(60deg);
z-index: 1;
}
.ear-inner {
bottom: 20%;
margin-top: 30%;
background: #8B4513;
width: 35%;
height: 80%;
margin-left: 32%;
border-radius: 70% 70%;
}
.eye-left {
position: absolute;
background: white;
width: 15%;
height: 13%;
left: 30%;
top: 30%;
z-index: 2;
border-radius: 50%;
}
.eye-right {
background: white;
width: 15%;
height: 13%;
position: absolute;
left: 55%;
top: 30%;
z-index: 2;
border-radius: 50%;
}
.eye-left-inner,
.eye-right-inner {
background: black;
width: 70%;
height: 70%;
border-radius: 50%;
margin-top: 25%;
z-index: 3;
}
.eye-left-inner {
margin-left: 20%;
}
.eye-right-inner {
margin-left: 10%;
}
.pupil {
position: absolute;
background: white;
width: 30%;
height: 30%;
z-index: 4;
border-radius: 50%;
left: 35%;
}
.nose {
position: absolute;
background: #603311;
width: 50%;
height: 30%;
border-radius: 50%;
margin-left: 25%;
z-index: 4;
margin-top: 65%;
}
.inner-nose {
position: absolute;
width: 85%;
margin-top: 1%;
height: 90%;
background: #8B4513;
border-radius: 50%;
border-top-right-radius: 45%;
transform: rotate(-10deg)
}
.horn-left,
.horn-right {
position: absolute;
margin-left: 15%;
margin-top: -80%;
width: 10%;
height: 80%;
background: #8B4513;
transform: rotate(-20deg);
border-radius: 70% 70% 50% 50% / 50% 50% 50% 50%;
}
.horn-left-bottom,
.horn-left-top,
.horn-left-middle,
.horn-right-bottom,
.horn-right-middle,
.horn-right-top {
background: #8B4513;
position: absolute;
width: 90%;
height: 35%;
transform: rotate(60deg);
margin-top: 500%;
margin-left: 108%;
border-radius: 0.5em 2em 0.5em 2em;
}
.horn-left-top {
margin-top: 20%;
}
.horn-left-middle {
transform: rotate(-60deg);
margin-top: 250%;
margin-left: -110%;
}
.horn-right {
margin-left: 75%;
transform: rotate(21deg);
}
.horn-right-bottom,
.horn-right-top {
background: #8B4513;
transform: rotate(-60deg);
margin-left: -110%;
border-radius: 2em 0.5em 0.5em 2em;
}
.horn-right-top {
margin-top: 20%;
}
.horn-right-middle {
margin-top: 250%;
}
.box {
-webkit-animation: mymove 5s;
/* Safari 4.0 - 8.0 */
animation: mymove 5s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
50% {
top: 50px;
}
75% {
top: 150px
}
100% {
top: 0px;
}
}
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<h1 class="neon">Welcome to TLW Christmas Countdown</h1>
<h2 class="neon">You Will be taken to your deal shortly!</h2>
</div>
<div class="row">
<div class="col-md-4 blue">
<!--Reindeer-->
<div class="box">
<!--Head -->
<div class="face">
<div class="face-copy"></div>
<div class="ear-left">
<div class="ear-inner"></div>
</div>
<div class="ear-right">
<div class="ear-inner"></div>
</div>
<div class="eye-left">
<div class="eye-left-inner">
<div class="pupil"></div>
</div>
</div>
<div class="eye-right">
<div class="eye-right-inner">
<div class="pupil"></div>
</div>
</div>
<div class="nose">
<div class="inner-nose"></div>
</div>
<div class="horn-left">
<div class="horn-left-bottom"></div>
<div class="horn-left-middle"></div>
<div class="horn-left-top"></div>
</div>
<div class="horn-right">
<div class="horn-right-bottom"></div>
<div class="horn-right-middle"></div>
<div class="horn-right-top"></div>
</div>
<!-- Closing Face -->
</div>
<!-- Closing Box -->
</div>
</div>
<div class="col-md-4 yellow">
<!--Youtube-->
<div class="video" ;>
<iframe width="540" height="285" src="https://www.youtube.com/embed/iDNWwxJonII" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
Could some one bring me on track? How could I make that wave on the bottom of the header?
This is what I have so far: https://codepen.io/zimex/pen/XaQjZL
<header id="header">
<div class="container">
<div class="logo">
</div>
<div class="mobile-wrap">
<div class="inner">
<div class="user">
<div class="wrap">
<span>Hi</span>
</div>
</div>
<div class="nav">
<ul>
<li>Menu</li>
<li>Items</li>
<li>Are</li>
<li>Located</li>
<li>Here</li>
</ul>
</div>
</div>
</div>
<div class="burger">
<span></span>
</div>
</div>
</header>
1) you can use img for this - bad solution but work
2) check http://dev.wavemaker.com/wiki/bin/wmdoc_6.3/CSS
3)
html, body {
height: 100%;
}
html {
background: #eee;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 300px;
height: 300px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(black, .2);
background: lighten(#f0f4c3, 10%);
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.wave {
opacity: .4;
position: absolute;
top: 3%;
left: 50%;
background: #0af;
width: 500px;
height: 500px;
margin-left: -250px;
margin-top: -250px;
transform-origin: 50% 48%;
border-radius: 43%;
animation: drift 3000ms infinite linear;
}
.wave.-three {
animation: drift 5000ms infinite linear;
}
.wave.-two {
animation: drift 7000ms infinite linear;
opacity: .1;
background: yellow;
}
.box:after {
content: '';
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
z-index: 11;
transform: translate3d(0, 0, 0);
}
.title {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
line-height: 300px;
text-align: center;
transform: translate3d(0, 0, 0);
color: white;
text-transform: uppercase;
font-family: 'Playfair Display', serif;
letter-spacing: .4em;
font-size: 24px;
text-shadow: 0 1px 0 rgba(black, .1);
text-indent: .3em;
}
#keyframes drift {
from { transform: rotate(0deg); }
from { transform: rotate(360deg); }
}
sample
I'm having trouble with the code below.
I want the reflection of the windmill and all to be embedded inside the circle shape, but i'm unable to do so.
Please help me.
Thank you in advance.
Here is my html
body {
background-color: white;
}
#Circle {
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
#Circle #cont {
background-color: transparent;
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>
You can clip the circle like this:
body {
background-color: white;
}
#Circle {
-webkit-clip-path: inset(0 0 0 0 round 250px);
clip-path: inset(0 0 0 0 round 250px);
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
#Circle #cont {
background-color: transparent;
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>
Set position: relative; z-index: 1; to #Circle
body {
background-color: white;
}
#Circle {
position: relative;
z-index: 1;
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
#Circle #cont {
background-color: transparent;
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>
Like in similar questions (Overflow hidden with border radius not working in chrome), it seems that setting
#Circle {
position: relative;
z-index: 1;
}
will solve your issue.
increase width and height of #circle and #Circle #cont so its display properly
body {
background-color: white;
}
#Circle {
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 570px;
height: 570px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
z-index:-2px;
position:absolute;
}
#Circle #cont {
background-color: transparent;
width: 570px;
height: 570px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>