I planned to do like a drop of water travelling around a location icon.Tried a bit,but i couldn't let the water revolve perfectly around the location icon as I'm not much into animation stuffs.
Here is my code,
<div id ="location">
<div id = "droplet"></div>
</div>
#location {
background: black;
height: 200px;
width: 200px;
border-radius: 50% 50% 50% 0;
transform:rotate(-45deg);
}
#location::after{
content '';
width 14px;
height 14px;
margin: 8px 0 0 8px;
background: #89849b;
position absolute;
border-radius 50%;
}
#droplet {
background: #2c3e50;
height: 50px;
width: 50px;
border-radius:50%;
border: 5px double darkgreen;
margin: 23%;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:4s
}
#-webkit-keyframes rotate{
0%{-webkit-transform: rotate(-90deg) rotateY(0) scale(0)}
30%{-webkit-transform: rotate(90eg) rotateY(0) scale(0.7)}
80%{-webkit-transform: rotate(180deg) rotateY(0) scale(1)}
100%{-webkit-transform: rotate(-360deg) rotateY(0) scale(0)}
}
How to make the droplet revolves within the location icon(but it should move around its edges)
Related
I'm doing a project with Flutter web. When Flutter web is opened the first time it takes a few seconds to load so I want to show a spinner loader. I've tried adding the following to the index.html:
<div class="loading">
<div class="loader" />
</div>
with these styles:
.loading {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-image: url("img/images.jpeg");
background-size: contain;
resize: both;
padding: 25px;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border: 15px solid;
border-top: 16px solid #8a2245;
border-right: 16px solid white;
border-bottom: 16px solid #8a2245;
border-left: 16px solid white;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
But background-image has bad size and I want it to be small and located in de middle of spinner. How can I do that?
You can set size of background image using background-size property in px (pixel) or % (percentage). And align the image to center using background-position: center;
I want to add an loader in my angular 4 PWA. https://www.w3schools.com/howto/howto_css_loader.asp this loader is visible till all the contents of page get loaded.
<div *ngIf="isLoaded" class="loader"></div>
<div class="home-container" [hidden]="isLoaded"></div>
Initially isLoaded is true after loading all contents it will become false.
loader poistion => top => 0, right = 50%, left = 50%, bottom= 100%
.scss file
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #59d4bf; /* green */
border-radius: 50%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
here -stackblitz live code sample
Your should put your css,
margin-right: 50%; or margin-right: auto;
margin-top: 50%;
margin-left: 50%; or margin-right: auto;
your loader
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-left: 50%;
margin-right: 50%;
margin-top: 50%;
}
is it working , Live working code sample
I have a jfiddle here in which I am rotating an image in an elliptical form. However, I do not want the image to rotate at the same time.
To correct this, I set the rotational -webkit-keyframes mO with the following properties:
0% { -webkit-transform: rotate(0deg); rotate(0deg); }
100% { -webkit-transform: rotate(360deg); rotate(-360deg); }
Because in past attempts to get an elliptical rotation, setting the opposite rotational property stopped the circle from rotating. In this case, it is not working. Is there another way that I can get the image to not rotate throughout the path? This is my first project designing something for the web.
.deform {
width: 200px;
height: 200px;
-webkit-transform: scaleX(3);
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
border-radius: 50%;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
-webkit-transform-origin: 50% 50%;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 50px;
height: 50px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
-webkit-transform: scaleX(0.33);
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
Check here.
When giving e.g. a <div> a box-shadow as well as rotating it will cause a rotation of the box-shadow direction - which is problematic when the box-shadow should create an illusion of lighting.
Example: https://jsfiddle.net/5h7z4swk/
div {
width: 50px;
height: 50px;
margin: 20px;
box-shadow: 10px 10px 10px #000;
display: inline-block;
}
#box1 {
background-color: #b00;
}
#box2 {
background-color: #0b0;
transform: rotate(30deg);
}
#box3 {
background-color: #00b;
transform: rotate(60deg);
}
#box4 {
background-color: #b0b;
transform: rotate(90deg);
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#box6 {
background-color: #0bb;
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
}
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box6"></div>
The answer to this problem should look similar to this mock up:
How can I rotate a <div> and still keep the box-shadow going the same direction?
The solution should be pure CSS...
Note: The animation in the CSS is for demonstration purposes. The use case will use JavaScript to set the rotation. But the JavaScript will know nothing about the box-shadow as it is in the responsibility of the design to define a (or many...) shadows. That's why it should be a pure CSS solution.
Keeping direction of an offset box-shadow consistent during rotation is simple with CSS transforms.
This approach relies on the fact that the transform origin is moved with the transforms. This means that when several transforms are set on the same element, the coordinate system of each transform changes according to the previous ones.
In the following example, the blue element is a pseudo element and the shadow is the div element:
div {
width: 40px; height: 40px;
margin: 40px;
box-shadow: 0px 0px 10px 5px #000;
animation: spinShadow 2s infinite;
background-color: #000;
}
#keyframes spinShadow {
to { transform: rotate(360deg); }
}
div:before {
content: '';
position: absolute;
left:-5px; top:-5px;
width: 50px; height: 50px;
transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
animation:inherit;
animation-name: spinElt;
background-color: #0bb;
}
#keyframes spinElt {
to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}
<div></div>
Explanation of the transition property on the pseudo element (See the following code snippet for an illustration of the steps):
transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg)
rotate(-360deg) counters the rotation of the parent to make the pseudo element static.
translate(-10px, -10px) the pseudo element is translated to make the shadow offset
rotate(360deg) the pseudo element is rotated in the same direction as parent
div {
width: 40px; height: 40px;
margin: 40px;
box-shadow: 0px 0px 10px 5px #000;
animation: spinShadow 2s infinite;
background-color: #000;
}
#keyframes spinShadow {
to { transform: rotate(360deg); }
}
div:before {
content: '';
position: absolute;
left:-5px; top:-5px;
width: 50px; height: 50px;
animation:inherit;
background-color: #0bb;
}
#first:before{
transform: rotate(0deg);
animation-name: first;
}
#keyframes first {
to { transform: rotate(-360deg); }
}
#second:before{
transform: rotate(0deg) translate(-10px, -10px);
animation-name: second;
}
#keyframes second {
to { transform: rotate(-360deg) translate(-10px, -10px); }
}
#complete:before{
transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
animation-name: complete;
}
#keyframes complete {
to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}
<ol>
<li>Counter rotate:<div id="first"></div></li>
<li>Translate :<div id="second"></div></li>
<li>Rotate:<div id="complete"></div></li>
<ol>
You could as well integrate box-shadow direction inside animation frames:
div {
display: inline-block;
margin: 1em ;
height: 50px;
width: 50px;
box-shadow: 15px 15px 15px 5px gray;
animation: rte 5s infinite linear;
}
.red {
background: red
}
.green {
background: green;
animation-delay:2s;
}
.blue {
background: blue;
animation-delay:4s;
}
.bob {
background: #b0b;
animation-delay:6s;
}
.cyan {
background: cyan;
animation-delay:8s;
}
#keyframes rte {
25% {
box-shadow: 15px -15px 15px 5px gray;
}
50% {
box-shadow: -15px -15px 15px 5px gray;
}
75% {
box-shadow: -15px 15px 15px 5px gray;
}
100% {
transform: rotate(360deg);
}
}
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="bob"></div>
<div class="cyan"></div>
Inspired by the other answers I created my own answer as well:
https://jsfiddle.net/zoxgbcrg/1/
.shadow {
background-color: black !important;
width: 40px;
height: 40px;
box-shadow: 0px 0px 10px 5px #000;
margin-top: 35px;
margin-left: 35px;
position: absolute;
z-index: -1;
}
<div class="box1 shadow"></div><div class="box1"></div>
The trick is also to create an additional <div> to handle the shadow. In my case it's not a :before but a real DOM element that is moved by margin.
Note: it seems that of today (31.01.2016) Firefox and Chrome have a subtile rendering difference. So for Firefox https://jsfiddle.net/zoxgbcrg/ is creating the desired result, for Chrome I suggest https://jsfiddle.net/zoxgbcrg/1/
I am making a solar system website in pure code with no images used. The problem is that I can't figure out how to get stars in the background. I'm trying to get something like a yellow spread-out polka dot pattern on a black background. This is my code (repeat div and styling for every other planet).
html,
body {
width: 100%;
height: 100%;
background-color: black;
}
#sun {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
border-color: orange;
border-width: 2px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 64px yellow;
background-color: yellow;
}
#mercury {
position: absolute;
top: 0;
left: 50%;
height: 10px;
width: 10px;
margin-left: -5px;
margin-top: -5px;
border-radius: 50%;
background-color: #ffd9b3;
}
#mercury-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 260px;
height: 260px;
margin-top: -130px;
margin-left: -130px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 22s linear infinite;
-moz-animation: spin-right 22s linear infinite;
-ms-animation: spin-right 22s linear infinite;
-o-animation: spin-right 22s linear infinite;
animation: spin-right 22s linear infinite;
}
#-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div id="sun"></div>
<div id="mercury-orbit">
<div id="mercury"></div>
</div>
From this, a nice starry night.
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
I found a pure CSS solution thanks to this code pen. This would make your website look like this - unfortunately I can't copy-paste the entire CSS in, as it's far too long (over 40,000 characters and StackOverflow only permits me to paste 30,000 for a code snippet). The original code was generated with SASS, and compiled, it's ridiculously long.
<div id='stars'></div>
<div id='stars2'></div>
<div id="sun"></div>
<div id="mercury-orbit">
<div id="mercury"></div>
</div>
The SASS code generating these stars:
// n is number of stars required
#function multiple-box-shadow ($n)
$value: '#{random(2000)}px #{random(2000)}px #FFF'
#for $i from 2 through $n
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'
#return unquote($value)
$shadows-small: multiple-box-shadow(700)
$shadows-medium: multiple-box-shadow(200)
$shadows-big: multiple-box-shadow(100)
#stars
width: 1px
height: 1px
background: transparent
box-shadow: $shadows-small