admin管理员组

文章数量:1287820

I have the following site which is in Flash with rotating cogs in the background:

.html

I would like to create something similar using CSS and JavaScript - does any one know of any examples out there?

I have the following site which is in Flash with rotating cogs in the background:

http://thedrivepartnership./index.html

I would like to create something similar using CSS and JavaScript - does any one know of any examples out there?

  • javascript
  • jquery
  • css
  • animation
  • css-shapes
Share Improve this question edited Feb 22, 2015 at 19:30 jbutler483 24.6k11 gold badges99 silver badges148 bronze badges asked Nov 24, 2011 at 12:06 highchartsdudehighchartsdude 5713 gold badges10 silver badges16 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 5

I suppose what you could do is create a container which fills the window, then place your gears in that container.

For example, you might place a container holding the animation in the top of the file with a very low z-index which fits the window and has a fixed position. You'd place your content on top and pretend css4 just came out with support for .avi backgrounds. Just kidding. Code:

<body>
    <div id="cogs">
        // Your awesome cog pictures
    </div>
    <div id="content">
        // Your awesome content
    </div>
</body>

The css for the animation container might look like this:

#cogs {
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -100;
}

The css based animation works like this, but with varied vendor prefixes:

@keyframes rotateCogOne {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}

And then you apply the animation like so:

#cogOne {
    animation: rotateCogOne 60s infinite linear;'
    // which means...
    animation: [name], [duration], [repeat], [easing]
}

Without scripting an animation within a canvas element, I think you're going to be pretty limited. Particularly, scaling the animation to fit different resolutions will be difficult (Impossible?) with strict css and html. It can still look cool though, so maybe it still meets your needs. Also, where animation isn't supported, you can still have a cool array of gears in the background, or simply fall back to javascript-based animation.

I've thrown together a basic example of how you could do it with css and html. Here it is full screen. There are further issues I think... This is definitely inplete... But hopefully a step in the right direction. You could extend the same methods to more gears to further resemble your current page.

If you were to take this route (And I'm not sure I remend it), it would be best to design the animation at a resolution that looked good in a range around 800x600 up to perhaps 1400x100. If you have stats, go by your users' most mon window size.

Try this in Chrome. This is specific for webkit browsers, Chrome and Safari. Replace "-webkit" with "-moz" for Mozilla and "-o" for Opera. Or just remove it for newest browser versions.

.cog{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 60000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
}

or

 .cog{
    animation-name: spin;
    animation-duration: 60000ms;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}

I'm afraid that before HTML5's canvas-tag you'll need to use GIF's..

EDIT: Scratch the last one.. See: http://css-tricks./examples/CSS3Clock/ This will most probably help you.

Rotating is a 2D transform, so something like:

.cog {
    height: 100px; width: 100px;
    transform: rotate(180deg);
    animation-duration: 10s;
}

You could use font-awesome's spinning cog icon, unless you want to use your own images.

The font-awesome icon can be implemented with <i class="fa fa-cog"></i> after you have added font-awesome to your project.

本文标签： javascriptHow do I create a rotating cog with CSS3 and jQueryStack Overflow

版权声明：本文标题：javascript - How do I create a rotating cog with CSS3 and jQuery? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741325035a2372424.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。