返回顶部

收藏

CSS3 心跳动画

更多
/**
 * Edited by Jeroen Franse
 * Shake is now heartbeat
 * CSSReset.com - Demo - Shaking Up The Web With CSS3 (or: How To Make Links Shake In Their Space-Boots) - Webkit only
 * 
 * Contains CSS rules to make elements shake using -webkit-animations.
 * Original Tutorial: http://www.cssreset.com/2011/css-tutorials/css3-webkit-animation-shake-links/
 *
 * by Joss Crowcroft and CSS Reset
 * 1st January 2011
 *
 * License: Do whatever makes you happy! And, you know, give credit and links back if you like it.
 *
 * If you manage to work this into a project, please comment up and let me know. Kay?
 */

/**
 * The declaration of the groovy shaky 'spaceboots' animation 
 */
@-webkit-keyframes spaceboots {
    0% { -webkit-transform: scale(1); }
    30% { -webkit-transform: scale(1); }
    40% { -webkit-transform: scale(1.05); }
    50% { -webkit-transform: scale(1); }
    60% { -webkit-transform: scale(1); }
    70% { -webkit-transform: scale(1.03); }
    80% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(1); }

}

/**
 * Apply the aforementioned animation to the following pseudo-selectors:
 * 
 * NB: Normally, we'd just use the class e.g. '.shake', but for this demo, I'm also applying it to all links.
 * To all intents and purposes, you can pretty much apply this to anything (read the tutorial for more info)
 */
.shake:hover, 
.shake:focus,
a:hover, 
a:focus {
    -webkit-animation-name: 'spaceboots';
    -webkit-animation-duration: 900ms;
    -webkit-transform-origin:70% 70%;
    -webkit-animation-iteration-count: 5;
    -webkit-animation-timing-function: linear;
}

/**
 * Some extra styling to help it along, as inline elements won't do the shake:
 */
.shake {
    display:block;
    position:relative;
}
a,
.shake.inline {
    display:inline-block 
}

标签:css

收藏

0人收藏

支持

0

反对

0