jquery css 旋转_使用CSS3和jQuery创建旋转，褪色图标

古城微笑少年丶 2023-02-22 01:26 7阅读 0赞

jquery css 旋转

Last week I debuted a popular blog post titled [Create Spinning, Fading Icons with CSS3 and MooTools][Create Spinning_ Fading Icons with CSS3 and_MooTools]. The post detailed how you could leverage CSS3's transformations and opacity properties, as well as the magical MooTools JavaScript framework, to create spinning, fading, animated icons.  Due to popular request, I've duplicated the effect with another popular JavaScript toolkit:  jQuery.

上周，我发表了一篇颇受欢迎的博客文章，标题为“ [使用CSS3和MooTools创建旋转，褪色图标”][Create Spinning_ Fading Icons with CSS3 and_MooTools] 。 文章详细介绍了如何利用CSS3的转换和不透明度属性以及神奇的MooTools JavaScript框架来创建旋转，褪色，动画图标。 由于受欢迎的要求，我用另一个受欢迎JavaScript工具包jQuery复制了这种效果。

[View Demo][] [观看演示][View Demo]

## HTML **(**The HTML**)** ##

<div id="followIcons">
    	<a href="http://feeds2.feedburner.com/Bludice" id="iconRSS">RSS Feed</a>
    	<a href="http://twitter.com/davidwalshblog" id="iconTwitter">@davidwalshblog Twitter</a>
    	<a href="http://github.com/darkwing" id="iconGitHub">@davidwalshblog Twitter</a>
    	<a href="http://del.icio.us/dwizzlestar" id="iconDelicious">dwizzlestar de.licio.us</a>
    	<a href="http://facebook.com/davidwalsh83" id="iconFacebook">David Walsh Facebook</a>
    	<a href="http://linkedin.com/in/davidjameswalsh" id="iconLinkedIn">David Walsh LinkedIn</a>
    	<a href="skype:davidwalsh83?chat" id="iconSkype">David Walsh Skype</a>
    	<a href="mailto:david@davidwalsh.name" id="iconMail">David Walsh Email</a>
    	<a href="http://mootools.net/forge/profile/davidwalsh" id="iconForge">David Walsh MooTools Forge</a>
    </div>

The links are as standard as they come.  These will be turned into dynamic icons.

链接是它们的标准配置。 这些将变成动态图标。

## CSS **(**The CSS**)** ##

The first part of the process is using standard CSS to move the text off screen and instead use the icons as background images for the link:

该过程的第一部分是使用标准CSS将文本移出屏幕，而是使用图标作为链接的背景图片：

#followIcons a	{
    display:inline-block;
    width:48px;
    height:48px;
    text-indent:-3000px;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
    position:absolute;
    }

Once we've done that time-tested practice, it's time to put a few initial CSS3 settings into place. As you probably know, at this point all CSS transform properties are browser-specific, so our CSS will get a bit lengthy:

一旦完成了这一久经考验的练习，就可以将一些初始CSS3设置放入适当的位置了。 您可能知道，此时所有CSS转换属性都是特定于浏览器的，因此我们CSS会有点冗长：

#followIcons a	{
    transition-duration: 0.8s;
    transition-property: transform;
    }

The transition duration will be 0.8 seconds and transition property will be a basic transform. You can change the transform duration to any duration you'd like. Too fast or too slow will ruin the effect *(that's what she said)*.

过渡持续时间将为0.8秒，过渡属性将是基本转换。 您可以将转换持续时间更改为所需的任何持续时间。 太快或太慢都会破坏效果*(这就是她所说的)* 。

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

The first part is randomly positioning each node/icon within the container. It's important to know the container's width and height, then subtract the icon width and height from that to know the true area you can fit the icon into. Nothing would be more lame than a piece of the icon hidden. The next step of the process is adding mouseenter and mouseleave events to make the images rotate and fade in during each respective event.

第一部分是在容器内随机放置每个节点/图标。 重要的是要知道容器的宽度和高度，然后从中减去图标的宽度和高度，以知道可以将图标放入其中的真实区域。 没有什么比隐藏的图标更me脚了。 该过程的下一步是添加mouseenter和mouseleave事件，以使图像在每个相应事件期间旋转和淡入。

jQuery(document).ready(function() {
    
    	// "Globals" - Will make things compress mo-betta
    	var $random = function(x) { return Math.random() * x; };
    	var availableWidth = 400, availableHeight = 40;
    	
    	// Get the proper CSS prefix
    	if(jQuery.browser.webkit) {
    		cssPrefix = "webkit";
    	}
    	else if(jQuery.browser.mozilla) {
    		cssPrefix = "moz";
    	}
    	else if(jQuery.browser.opera) {
    		cssPrefix = "o";
    	}
    
    	// Apply opacity
    	var zIndex = 1000;
    	
    	// Randomize each link
    	jQuery.each(jQuery("#followIcons a"),function(index) {
    		var startDeg = $random(360);
    		var element = jQuery(this);
    		var resetPlace = function() {
    			element.fadeTo(250,0.6).css("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
    		};
    		element.attr("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex).hover(function() {
    			element.fadeTo(250,1).css("zIndex",++zIndex).css("-" + cssPrefix + "-transform","rotate(0deg)");
    		},resetPlace);
    		resetPlace();
    	});
    	
    });

When the mouseenter event occurs, the rotation is animated to 0, no rotation. When the mouse leaves the element, the element animates to its initial random rotation. You'll also note that I've used opacity to add to the subtle effect.

当发生mouseenter事件时，旋转动画为0，没有旋转。 当鼠标离开该元素时，该元素会动画化为其初始随机旋转。 您还将注意到，我已经使用不透明度添加了微妙的效果。

[View Demo][] [观看演示][View Demo]

There you have it!

你有它！

> 翻译自: [https://davidwalsh.name/fade-spin-css3-jquery][https_davidwalsh.name_fade-spin-css3-jquery]

jquery css 旋转

[Create Spinning_ Fading Icons with CSS3 and_MooTools]: https://davidwalsh.name/css-spin
[View Demo]: https://davidwalsh.name/demo/css-animation-jquery.php
[https_davidwalsh.name_fade-spin-css3-jquery]: https://davidwalsh.name/fade-spin-css3-jquery