I have a semi circle on the center of my page, which I want to be able to spin, I'm able to do some part of it by adjusting the width but I want a way to make it spin a complete 360degrees. If possible, I want to be able to accomplish it using only css, however if required I don't mind vanilla js (no Jquery).
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 50px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
/*background-color: black;*/
animation: spinning infinite;
animation-duration: 3s;
}
#keyframes spinning {
from {
width: 50px
}
to {
width: 0px;
z-index: -5;
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
Is this what you want?
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 50px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
transform-origin: left;
/*background-color: black;*/
animation: spinning infinite;
animation-duration: 3s;
}
#keyframes spinning {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
z-index: -5;
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
If I understand correctly you want the semicircle to revolve around your "hello" text. If so, you could use the transform: rotateY() style to spin your circle. If you do this, you can add your width to the circle div, as well as set the transform-origin to be the left-side of your element so that you rotate around the left-side of your semi-circle and not the center:
transform-origin: left;
width: 50px;
See example below:
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 200px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
animation: spinning linear infinite;
animation-duration: 3s;
transform-origin: left;
width: 50px;
}
#keyframes spinning {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
Related
I have the following code:
scroll {
left: 50%;
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80;
bottom: 25px; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; position: absolute; animation: scrolldown1 1.2s ease-in-out infinite 0.15s;"></scroll>
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80;
bottom: 40px; position: absolute; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; animation: scrolldown1 1.2s ease-in-out infinite;"></scroll>
This is basically a scroll button and on my end the output is looking like this:
As you can see the alignment of the scroll button is slightly off and I would like it to be right on top of the MY STORY text or be centered. How would I achieve this task?
The code of the MY STORY text is as follows:
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
<div class="section-title">
<h2>My Story</h2>
</div>
How would I achieve this task?
Basically, the scroll button should be right on top of the text
Notice that your .section-title's pseudo-elements have their left property set using calc and taking into account half of each element's width:
.section-title h2::before {
...
width: 120px;
...
left: calc(50% - 60px);
}
.section-title h2::after {
...
width: 40px;
...
left: calc(50% - 20px);
}
But the left property in your scroll declaration does not use calc. Therefore one possible fix would be to use it. Since each scroll element has a width of 2em, half of it would be 1em. So:
scroll {
/* left: 50%; */ /* remove this line */
left: calc(50% - 1em); /* add this line */
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
See demo below.
#container {
position: relative;
height: 5em;
}
scroll {
/* left: 50%; */ /* remove this line */
left: calc(50% - 1em); /* add this line */
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
<div id="container">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
<div class="section-title">
<h2>My Story</h2>
</div>
PS.: Unless you're using this positioned layout for browser compatibility reasons, you probably should consider using more modern layout modules, such as flexbox or grid, your life would be much easier.
I have loading symbol which works fine, But when loading symbol opens i can see background and user can edit textbox in backend. I need to disable background, until loading completes. Need to blur background. Tried overlay. Nothing seems to work.
Here is my code.
<style>
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 50%;
opacity: 1;
position: fixed;
top: 50%;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id="loader1" class="lds-dual-ring hidden overlay"></div>
$('#loader1').removeClass('hidden'); //to show
I've recreated a working example of the code you've provided.
Your div contains both overlay and lsd-dual-ring classes. IMO, what you want to achieve is to have the loader ring is inside the overlay div and position at the center of the screen.
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
top: 50%;
left: 50%;
position: fixed;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="overlay">
<div id="loader1" class="lds-dual-ring"></div>
</div>
I have search on the topic about restarting animation and that can be done by remove and add class again. But when I test it myself with the same method, I found that it doesn't work in many browsers. It only work in Edge. Is there something I did wrong?
here is the html:
function(elem) {
elem.classList.remove("animation");
setTimeout(function(){
elem.classList.add("animation");
elem.style.animationName = "transformOuter";
elem.style.webkitAnimationName = "transformOuter";},1)
}
div.wrapperL {
float: left;
width: 40px;
height: 38px;
background: rgb(255, 255, 255);
position: relative;
border: 1px solid white;
margin: 0 1px 5px 0;
}
div.wrapperLeft {
width: 40px;
height: 38px;
background: white;
position: relative;
border: 1px solid lightgrey;
}
div.animation {
-webkit-animation-name: none;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-name: none;
animation-duration: 5s;
animation-iteration-count: 1;
}
#-webkit-keyframes transformOuter {
0% {background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;}
40% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;}
60% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); }
100% {width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}
}
<div class = "wrapperL">
<div class= "wrapperLeft" onclick = functionAnime(this)></div>
</div>
I also have another keyframe without -webkit- but same thing inside.The animation do trigger once in chrome but when I click again, nothings happen.
You have to remove style as well same as you did with class see working example: And yes your function name was incorrect I assumed it was a typo.
function functionAnime(elem) {
elem.classList.remove("animation");
elem.style = '';
setTimeout(function(){
elem.classList.add("animation");
elem.style.animationName = "transformOuter";
elem.style.webkitAnimationName = "transformOuter";
},100)
}
div.wrapperL{
float: left ;
width: 40px;
height: 38px;
background: rgb(255, 255, 255);
position: relative;
border: 1px solid white;
margin: 0 1px 5px 0;}
div.wrapperLeft{
width: 40px;
height: 38px;
background: white;
position: relative;
border: 1px solid lightgrey; }
div.animation{
-webkit-animation-name: none;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-name: none;
animation-duration: 5s;
animation-iteration-count: 1;}
#-webkit-keyframes transformOuter{
0% { background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;}
40% { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;}
60% { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); }
100% { width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}}
<div class = "wrapperL">
<div class= "wrapperLeft animation" onclick = functionAnime(this)></div>
</div>
I want to create a progress wheel in html and css, if necessary than jQuery also. I create a wheel but problem is that how can I set the length of the borders according to given percentage.
Here is Code:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
}
<div class="loader"></div>
It create a circle and blue border on it but I want like the below image.
Here is a radial progress bar that i made. I have updated it to suit your needs.
The fill percentage is determined by the transform rotate value given to .pure-css .semi.right .circle and .pure-css .semi.left .circle
.pure-css {
width: 300px;
height: 300px;
border-radius: 50%;
background: #fff;
position: relative;
color: #fff;
}
.pure-css .semi {
width: 50%;
height: 100%;
position: relative;
display: inline-block;
float: left;
overflow: hidden;
z-index:2;
transform:rotate(30deg)
}
.pure-css .semi.left{
transform-origin:100% 50%;
}
.pure-css .semi.right{
transform-origin:0% 50%;
}
.pure-css .semi.right .circle {
border-top-left-radius: 150px;
border-bottom-left-radius: 150px;
border-right: 0;
transform: rotate(181deg) translate(-100%, 0);
animation: rotate 4s linear forwards;
transform-origin: 0% 50%;
}
.pure-css .semi.left .circle {
border-top-right-radius: 150px;
border-bottom-right-radius: 150px;
border-left: 0;
transform: rotate(36deg) translate(100%, 0);
animation: rotate2 4s linear forwards;
transform-origin: 100% 50%;
animation-delay: 42s;
}
.pure-css .semi .circle {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 50px solid #4ec9aa;
}
.pure-css .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
overflow: hidden;
font-size: 28px;
color:#28645d;
text-align:center;
}
.pure-css .shade {
width: 100%;
height: 100%;
transform:scale(.9,.9);
border-radius: 50%;
box-sizing: border-box;
border: 30px solid #e7ebee;
}
<div class="rp">
<div class="pure-css">
<div class="semi left">
<div class="circle"></div>
</div>
<div class="semi right">
<div class="circle"></div>
</div>
<div class="text">
<span class="num">Goal<br><b>20,000$</b></span>
</div>
<div class="shade"></div>
</div>
</div>
To change the fill value give
.pure-css .semi.left .circle{
transform: rotate(xdeg) translate(-100%, 0);
}
.pure-css .semi.right.circle{
transform: rotate(xdeg) translate(-100%, 0);
}
where x is a value between 0 and 180 (optional) giving 180 to .semi.right will fill half the circle and 180 to .semi-left will fill the full circle.
To fill according to a percentage value,for filling < 50% set the transform of .semi.right .circle to percentage * 360 / 100 deg and for filling > 50% set the transform of .semi.left .circle to 180 - (percentage * 360/100) deg.
For determining the start and end position of the fill value
.pure-css .semi {
transform:rotate(xdeg)
}
I'm trying create a simple animation that when a user hovers over an element, another element contained within it fills its parent. Currently, I have a JSFiddle that does just that.
BUT, I want to finish this with a few other features that I'm not sure I can actually do in CSS3.
I'm trying to find a way to, upon having the inner circle COMPLETELY fill its parent, (ie when its width/height = 300px), I'd like the fill to pause and not disappear after the animation is complete.
When a user moves their mouse outside the :hover range, I would like the animation to reverse direction as opposed to abruptly stopping.
I've gotten this far with CSS3 but am not sure I can implement these 2 features without resorting to Javascript. Does anyone know of a way of doing this entirely in CSS3/does anyone know if it is possible to do these last two features in CSS3, because I can't seem to find anything.
.circle {
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
overflow: hidden;
border-radius: 150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
}
.filler {
width: 0px;
height: 0px;
background-color: red;
border: none;
position: relative;
left: 50%;
top: 50%;
border-radius: 150px;
-mox-border-radius: 150px;
-webkit-border-radius: 150px;
animation: empty 1s;
}
.circle:hover .filler {
animation: fill 2s;
-moz-animation: fill 2s;
-webkit-animation: fill 2s;
background-color: blue;
}
#keyframes fill
{
from {background: red; height: 0px; width: 0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#-moz-keyframes fill /* Firefox */
{
from {background: red; height: 0px; width: 0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#-webkit-keyframes fill /* Safari and Chrome */
{
from {background: red; height:0px; width:0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
#-moz-keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
#-webkit-keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
JS Fiddle
You don't need keyframes for this simple animation. Here is CSS you need:
.circle {
position: relative;
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
border-radius: 150px;
overflow: hidden;
}
.filter {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: red;
border-radius: 0px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.circle:hover .filter {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 150px;
background-color: blue;
}
and HTML:
<div class="circle">
<div class="filter"></div>
</div>
Here is an example: http://jsbin.com/agekef/1/edit
I hope you can try out for this link might help you out
<http://jsfiddle.net/spacebeers/sELKu/3/>
<http://jsfiddle.net/SZqkb/1/>
<http://css-tricks.com/examples/DifferentTransitionsOnOff/>
Thanks