Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I want to create something like a this loading button after question. It will be nice to get this rotating button for loading anything with pure CSS (not counting the fact that it will be spinning in a click, it will be done with JS). Maybe someone did something like that? Or at least have an idea how to do it. I just know that this is probably possible with transition.
UPD. No images and icons. My question is about, how to create this kind of borders (two arrows), and rotate them on click (can be done with JS).
Here is example of this button:
Using FontAwesome and the built-in CSS3 rotation
jsBin demo
i.fa-refresh{ color: #a05; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<i class="fa fa-refresh fa-spin fa-2x"></i>
https://fortawesome.github.io/Font-Awesome/icons/
https://fortawesome.github.io/Font-Awesome/examples/
Loading Icon (Using plain CSS and CSS3 animation)
.loading{
display:inline-block;
position:relative;
vertical-align:middle;
width: 24px;
height: 24px;
border:2px solid transparent;
border-top-color:#a05;
border-bottom-color:#a05;
border-radius:50%;
animation: rotate 3s linear infinite;
}
.loading:after,
.loading:before{
position:absolute;
content: "";
width:0; height:0;
border:6px solid transparent;
border-bottom-color:#a05;
}
.loading:after{
top:1px;
right:-7px;
transform: rotate(135deg);
}
.loading:before{
top:11px;
left:-7px;
transform: rotate(-45deg);
}
#keyframes rotate{
to { transform: rotate(360deg); }
}
<span class="loading"></span>
Using it with jQuery would end in something like:
jsBin demo
Check out codepen (fair point out: not my codepen) here for some idea of how to create a css only arrow kinda like what you're thinking about:
http://codepen.io/artemdemo/pen/fLcCn/
the circling is not possible with transition effect but its possible with css only assuming you have the rotating icon already, just make a hover animation like:
.rotate{
animation: rotate ease infinite;
}
#keyframes rotate{
to{ transform: rotate(360deg); }
from { transform: rotate(0deg); }
}
and then on click add the class rotate to the element
You can use the Cursor URL property and link it to an animated GIF of your spinner.
/* CSS */
.wait { cursor: url(wait.gif), wait; }
/* JavaScript */
if (waiting)
document.body.classList.add('wait');
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've been looking through the code of some websites, and notice that the margin sizes change depending on certain actions (eg, mouse hover, screen width) to create a cool dynamic effect.
This effect can be seen here when changing screen width:
http://www.smashbros.com/us/
And here on mouse hover:
http://www.disneyanimation.com/projects
I really have no clue how this is done!
How can the code values automatically change based on certain actions.
Thanks in advance
edit:
I tried something.... but it isn't really giving me the results I want
.cats {
background-color: #eee;
height: 90px;
width: 100%;
}
.cats {
-webkit-animation-duration: 0.5s;
-webkit-animation-name: slide-up;
-moz-animation-duration: 0.5s;
-moz-animation-name: slide-up;
}
.cats {
-webkit-animation: slide-up 0.5s linear;
-moz-animation: slide-up 0.5s linear;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}
.cats :hover {
/* Toggle the animation play state to running when we are hovering over our sticker */
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
}
#-webkit-keyframes slide-up {
from {
margin-top: 0px
}
to {
margin-top: -15px
}
}
You can achieve this using CSS the hover selector as per #David's answer here:
https://stackoverflow.com/a/905042/3264286
Further details here:
http://www.w3schools.com/cssref/sel_hover.asp
Alternatively, if you are happy to use JavaScript, you can have a lot more power.
http://www.w3schools.com/jsref/event_onmouseover.asp
More discussion:
css hover vs. javascript mouseover
To move gradually, you can apply transition to your div. For example transition: 0.6s;
For more info on transitions property please visit this link.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am new to html and css code, I am reading the source code of the http://www.quarryequipments.com/products/crusher/pe-jaw-crusher.html ,look at the facebook logo int the bottom if I put the mouse in it ,it will rotate slowly, how can I achieve that cool things?
Thanks.
Have a look here.
http://daneden.me/animate/
That site you refrenced was using
.end-public a:hover img {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
That's simple CSS:
.end_public a:hover img {
transform:rotate(45deg);
transition-duration:1s;
}
I got a pretty annoying problem, looking at a transformation -> translate.
Currently, I am fading in my navigation "blocks" from right to the left.
Now, I want a hover effect on every single one, so when you hover over it, that the block translates to the right just a little bit.
For that I used this code:
.navpoint:hover {
-webkit-transform: translate(20px, 0px);
-moz-transform: translate(20px, 0px);
-o-transform: translate(20px, 0px);
-ms-transform: translate(20px, 0px);
transform: translate(20px, 0px);
}
This should actually work, but looking at the demo, the blocks aren't even bothered to move to the right.
Here is a demo
I have the feeling that something with my set up is not right, please have a look at my HTML setup first:
<div class="navigation">
<h2 class="animated fadeInRightBig1 navpoint one">Working process</h2>
<h2 class="animated fadeInRightBig2 navpoint two">Subscribe</h2>
<h2 class="animated fadeInRightBig3 navpoint three">Contact us</h2>
</div>
Explaination: the "animated" is the general animation, custom times and delays set in each of the "fadeInRightBig's".
The "navpoint" looks like this:
.navpoint {
padding-left:5px;
padding-right:5px;
margin-top:0px;
margin-bottom:1px;
border-right:solid;
border-color:#333;
border-width:4px;
background:#FC3;
cursor:pointer;
}
The "one/two/three" in my html is set as an underclass of navpointm, just like this:
.navpoint.one {
width:96.73202614379085%;
}
This is my setup, and I guess something is wrong with my Navpoint classes, but I don't know what.
It would be very, very kind if you could answer this question and help me.
Thank you very much in advance.
You could try using the transitions property for this effect:
.navpoint {
padding-left:5px;
padding-right:5px;
margin-top:0px;
margin-bottom:1px;
border-right:solid;
border-color:#333;
border-width:4px;
background:#FC3;
cursor:pointer;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
.navpoint:hover {
margin-left: 20px;
}
working example can be seen here: http://codepen.io/jonwelsh/pen/sfewj
From what I can tell, your slide-in animation is interfering with the transform you have set on :hover.
Not sure what the exact fix for that is (if there is a simple one) other than removing the animation class via Javascript (or perhaps altering the animation params a bit), but a simple way to fix this is to just change how the nav items animate on :hover.
Rather than using transform, just set a margin-left:
.nav.one:hover {
margin-left:20px;
}
You will get the same result. And it can be animated with CSS transitions.
So I want to make a pop-up book effect but in 2D only. (so NOT like the beercamp page).
Ideal results:
bottom of img stays in the same position
img starts invisible then is popped up (imagine it lying on its back, then being lifted up till it is vertical)
Item should not appear too (if possible) compressed
I've read into CSS animations, the closest animation I can find is
transform: rotateX(xdeg);
So I produced this to test it out:
<!doctype html>
<style type="text/css">
#popup
{
transform: rotateX(90deg);
animation-delay: 2s;
animation-duration: 3s;
animation-name: popupanim;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes popupanim
{
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
</style>
<body>
<img id="popup" src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width=379px height=400px/>
</body>
The problem with this is that the bottom level of the image changes, and that the image is obviously compressed.
How could I improve this to meet my needs?
(also as a side not rotate3d(xdeg, ydeg, zdeg) does not produce any output, why?)
Add a container element and use the transform-origin property to make it pivot properly:
#container {
display: inline-block;
perspective: 600px; /* Tweak this */
}
#popup {
transform: rotateX(90deg);
transform-origin: bottom;
}
Demo: http://jsfiddle.net/BEy9f/3/
You need to use a parent element (#container) to make the perspective work properly. Also, if the #popup isn't in the exact center of the element (which is why I put display: inline-block in there), it'll appear off-center in the animation.
Chrome supports 3D transformations as well, so you can add support by using the -webkit- prefix.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I'd like to write some text on a circle (I mean, the text will not be horizontal, but every letter will have a different orientation).
Is it possible using html and css?
Thanks you!
There isn't any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We'll explore one way to do it here. But be forewarned, we're going to use some CSS3 and JavaScript and not give two hoots about older browsers that don't support some of the required tech. If you're interested in this for a real project, this kind of thing is probably still best served by and image with proper alt text, or proper feature detection which can flip out the image for this fancy technique in browsers that can handle it. Thanks to the css-tricks.com
DEMO
DOWNLOAD FILES
DOCUMENTATION
HTML
<h1>
<span class="char1">E</span>
<span class="char2">s</span>
<span class="char3">t</span>
<span class="char4">a</span>
<span class="char5">b</span>
<!-- you get the idea -->
</h1>
CSS
h1 span {
font: 26px Monaco, MonoSpace;
height: 200px;
position: absolute;
width: 20px;
left: 0;
top: 0;
transform-origin: bottom center;
}
.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* and so on */
THERE IS A SUPER DEMO GIVE FROM THE HERE
You can but you will end up having to do some major math to accomplish your goal. You will want to use the following CSS as a starting point.
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
From css-tricks.com