enter image description here
please tell me anybody in above image when cursor on it hover automatic rotate border only in above image is it possible by css if possible give a code please
You can do that with animation when hover element.
You can see example here it's the same idea.
Example :- https://www.w3schools.com/howto/howto_css_loader.asp
You can achieve the effect you want like this:
*,
*::after {
box-sizing: border-box;
}
body,
html {
height: 100%;
width: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.circle {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
background-image: url(//unsplash.it/400/400);
background-repeat: no-repeat;
background-size: cover;
border: 15px solid lightgrey;
}
.circle::after {
content: '';
position: absolute;
top: -15px;
left: -15px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 15px solid lightgrey;
border-right: 15px solid steelblue;
}
.circle:hover::after {
animation: spin .75s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="circle"></div>
Related
What would be the best approach to have this face always point towards my mouse? The tricky part for me has been having it skew and scale as if it's rotating around a sphere. (I turned it into a CSS animation to show what I would like it to do)
Thank you so much for your help, and I hope that you have a great day!
const head = document.querySelector('.head');
const face = document.querySelector('.face');
addEventListener('mousemove', e => {
// face follows cursor
// rotates and scales accordingly
});
*,
*::before,
*::after {
box-sizing: border-box;
}
#keyframes move {
0% {
transform: translateX(0) translateY(0px) rotate3d(0, 0, 0, 45deg) scale(1);
}
25% {
transform: translateX(150px) translateY(0px) rotate3d(0, 10, 0, 45deg) scale(0.9);
}
50% {
transform: translateX(0px) translateY(-150px) rotate3d(10, 0, 0, 45deg) scale(0.9);
}
75% {
transform: translateX(-100px) translateY(100px) rotate3d(10, 10, 0, 45deg) scale(0.9);
}
}
.head {
width: 500px;
height: 500px;
border-radius: 50%;
background-image: linear-gradient(120deg, yellow, #c47400);
box-shadow: inset -5px -5px 20px yellow;
position: relative;
}
.head::before {
content: "";
position: absolute;
left: 75px;
top: 75px;
border-radius: 50%;
width: 150px;
height: 150px;
background-color: white;
opacity: 0.35;
filter: blur(45px)
}
.eye {
width: 65px;
height: 100px;
margin: 10px;
border-radius: 100px;
display: inline-block;
background-color: #8a6b0c;
}
.mouth {
width: 175px;
height: 50px;
background-color: #8a6b0c;
border-radius: 100px;
}
.container {
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.face {
display: inline-block;
animation: move 4s ease infinite;
}
<div>
<div class="head">
<div class="container">
<div class="face">
<div class="eye"></div>
<div class="eye"></div>
<div class="mouth"></div>
</div>
</div>
</div>
</div>
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 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" />
I was wondering if anyone knew how to make an object in this case my ball div appears like it is coming at the screen. Something that is sort of a 3D effect if that makes sense. My code is attached to the bottom.
var ballMotion = gsap.timeline();
ballMotion
.to(".circle", {duration: 3, transform: 'scale(14)'})
body {
width: 300px;
margin: 20px auto;
}
.circle {
display: block;
background: black;
border-radius: 100%;
height: 300px;
width: 300px;
margin: 0;
background: radial-gradient(circle at 100px 100px, #FE0, #FAFAD2);
}
<figure class="circle"></figure>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
I see you are using gsap.js, I am unsure exactly how this is working but in pure css you can use transform-style: preserve-3d; and the use perspective() and translateZ() and the #keyframes. I am sure with knowledge of Green Sock you can getting this working. see code below:
CSS
.wrapper--outer {
display: flex;
justify-content: center;
position: relative;
margin: 0;
width: 100%;
height: 100%;
padding: 1px;
}
.snowman {
display: flex;
justify-content: center;
position: absolute;
top: 18vh;
height: 200px;
width: 200px;
}
.snowball {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: blue;
position: absolute;
top: 10%;
left: 50%;
perspective: 550px;
transform-style: preserve-3d;
animation-name: snowball;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes snowball {
0% {
transform: perspective(550px) translateZ(200px);
}
100% {
transform: perspective(1000px) translateZ(999px);
}
}
<body>
<div class="wrapper--outer">
<div class="snowman">
<div class="snowball"></div>
</div>
</div>
</body>
JSBin
https://jsbin.com/ropomoquxu/edit?html,css,output
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)
}