mootools_使用CSS3和MooTools创建旋转，褪色图标

素颜马尾好姑娘i 2023-02-21 15:30 9阅读 0赞

mootools

A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I didn't want to abandon CSS animations completely though;  I added a bit of MooTools to randomize the icon's initial display position and rotation.  Let me show you how to use CSS3 and MooTools to create dymanic, rotating elements.

我最近的博客重新设计的目标是实践我所讲的内容。 增加一些微妙的天赋。 我实现此目标的方法之一是使用CSS3动画来更改我的个人资料图标(RSS，GitHub等)的显示，但我不想完全放弃CSS动画。 我添加了一些MooTools以使图标的初始显示位置和旋转随机化。 让我向您展示如何使用CSS3和MooTools创建动态的旋转元素。

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

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

We'll use the standard, accessible, SEO-friendly HTML for link creation:

我们将使用标准的，可访问的，对SEO友好HTML进行链接创建：

<div id="followIcons">
    	<a href="http://feeds2.feedburner.com/Bludice" rel="nofollow" id="iconRSS">RSS Feed</a>
    	<a href="http://twitter.com/davidwalshblog" rel="nofollow" id="iconTwitter">@davidwalshblog Twitter</a>
    	<a href="http://github.com/darkwing" rel="nofollow" id="iconGitHub">@davidwalshblog Twitter</a>
    	<a href="http://del.icio.us/dwizzlestar" rel="nofollow" id="iconDelicious">dwizzlestar de.licio.us</a>
    	<a href="http://facebook.com/davidwalsh83" rel="nofollow" id="iconFacebook">David Walsh Facebook</a>
    	<a href="http://linkedin.com/in/davidjameswalsh" rel="nofollow" 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" rel="nofollow" id="iconForge">David Walsh MooTools Forge</a>
    </div>

CSS will make these links pretty.

CSS将使这些链接更漂亮。

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

## MooTools JavaScript **(**The MooTools 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事件，以使图像在每个相应事件期间旋转和淡入。

// "Globals" - Will make things compress mo-betta
    var $random = function(x) { return Math.random() * x; };
    var availableWidth = 200, availableHeight = 40;
    
    // Find the appropriate prefix icon
    var cssPrefix = false;
    switch(Browser.name) {
    	case "safari":
    		cssPrefix = "webkit";
    		break;
    	case "chrome":
    		cssPrefix = "webkit";
    		break;
    	case "firefox":
    		cssPrefix = "moz";
    		break;
    	case "opera":
    		cssPrefix = "o";
    		break;
    	case "ie":
    		cssPrefix = "ms";
    		break;
    }
    
    // The Icons
    var icons = $$("#followIcons a");
    // Apply opacity
    var zIndex = 1000;
    
    // Randomize each link
    icons.each(function(element,index) {
    	// Generate the random rotation amount
    	var startDeg = $random(360);
    	// Place the image at the default rotation and opacity
    	var resetPlace = function() {
    		element.fade(0.6).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
    	};
    	// Randomly position the element
    	element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);
    	// Rotate the image initially
    	resetPlace();
    	// Add events
    	element.addEvents({
    		mouseenter: function() {
    			element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");
    		},
    		mouseleave: 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]

And there you have it:  spinning, fading, animated elements.  What's the alternative?  Static, boring, traditional icons.   What do you think?  Too much?  Too little?  Share your ideas!

一切就在这里：旋转，淡入淡出，动画元素。 有什么选择？ 静态，无聊的传统图标。 你怎么看？ 太多了？ 太少了 分享您的想法！

> 翻译自: [https://davidwalsh.name/css-spin][https_davidwalsh.name_css-spin]

mootools

[View Demo]: https://davidwalsh.name/demo/css-animation.php
[https_davidwalsh.name_css-spin]: https://davidwalsh.name/css-spin