css3Transitions 实现的鼠标经过图标位移、旋转、翻转、发光、淡入淡出等多种特效

HTML如下：

  1 <div class="container">
  3 <!--特效1 -->

 <section id="set-1">

 <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">

 <a href="#set-1" class="hi-icon hi-icon-archive">Archive</a>

 <a href="#set-1" class="hi-icon hi-icon-chat">Chat</a>

 <a href="#set-1" class="hi-icon hi-icon-bookmark">Bookmarks</a>

 <a href="#set-1" class="hi-icon hi-icon-user">User</a>

 <a href="#set-1" class="hi-icon hi-icon-contract">Contact</a>

 </div>

 <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">

 <a href="#set-1" class="hi-icon hi-icon-archive">Archive</a>

 <a href="#set-1" class="hi-icon hi-icon-chat">Chat</a>

 <a href="#set-1" class="hi-icon hi-icon-bookmark">Bookmarks</a>

 <a href="#set-1" class="hi-icon hi-icon-user">User</a>

 <a href="#set-1" class="hi-icon hi-icon-contract">Contact</a>

 </div>

 <!--特效2 -->

 </section>

 <section id="set-2">

 <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2a">

 <a href="#set-2" class="hi-icon hi-icon-mobile">Mobile</a>

 <a href="#set-2" class="hi-icon hi-icon-screen">Desktop</a>

 <a href="#set-2" class="hi-icon hi-icon-earth">Partners</a>

 <a href="#set-2" class="hi-icon hi-icon-support">Support</a>

 <a href="#set-2" class="hi-icon hi-icon-locked">Security</a>

 </div>

 <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2b">

 <a href="#set-2" class="hi-icon hi-icon-mobile">Mobile</a>

 <a href="#set-2" class="hi-icon hi-icon-screen">Desktop</a>

 <a href="#set-2" class="hi-icon hi-icon-earth">Partners</a>

 <a href="#set-2" class="hi-icon hi-icon-support">Support</a>

 <a href="#set-2" class="hi-icon hi-icon-locked">Security</a>

 </div>

 <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2c">

 <a href="#set-2" class="hi-icon hi-icon-mobile">Mobile</a>

 <a href="#set-2" class="hi-icon hi-icon-screen">Desktop</a>

 <a href="#set-2" class="hi-icon hi-icon-earth">Partners</a>

 <a href="#set-2" class="hi-icon hi-icon-support">Support</a>

 <a href="#set-2" class="hi-icon hi-icon-locked">Security</a>

 </div>

 <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2d">

 <a href="#set-2" class="hi-icon hi-icon-mobile">Mobile</a>

 <a href="#set-2" class="hi-icon hi-icon-screen">Desktop</a>

 <a href="#set-2" class="hi-icon hi-icon-earth">Partners</a>

 <a href="#set-2" class="hi-icon hi-icon-support">Support</a>

 <a href="#set-2" class="hi-icon hi-icon-locked">Security</a>

 </div>

 </section>

 <!--特效3 -->

 <section id="set-3">

 <div class="hi-icon-wrap hi-icon-effect-3">

 <a href="#set-3" class="hi-icon hi-icon-cog">Settings</a>

 <a href="#set-3" class="hi-icon hi-icon-support">Support</a>

 <a href="#set-3" class="hi-icon hi-icon-star">Fav</a>

 <a href="#set-3" class="hi-icon hi-icon-contract">Contract</a>

 <a href="#set-3" class="hi-icon hi-icon-refresh">Refresh</a>

 </div>

 </section>

 <!--特效4-->

 <section id="set-4">

 <div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4a">

 <a href="#set-4" class="hi-icon hi-icon-cog">Settings</a>

 <a href="#set-4" class="hi-icon hi-icon-clock">Time</a>

 <a href="#set-4" class="hi-icon hi-icon-videos">Videos</a>

 <a href="#set-4" class="hi-icon hi-icon-list">List</a>

 <a href="#set-4" class="hi-icon hi-icon-refresh">Refresh</a>

 </div>

 <div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4b">

 <a href="#set-4" class="hi-icon hi-icon-cog">Settings</a>

 <a href="#set-4" class="hi-icon hi-icon-clock">Time</a>

 <a href="#set-4" class="hi-icon hi-icon-videos">Videos</a>

 <a href="#set-4" class="hi-icon hi-icon-list">List</a>

 <a href="#set-4" class="hi-icon hi-icon-refresh">Refresh</a>

 </div>

 </section>

 <!--特效5-->

 <section id="set-5">

 <div class="hi-icon-wrap hi-icon-effect-5">

 <a href="#set-5" class="hi-icon hi-icon-archive">Archive</a>

 <a href="#set-5" class="hi-icon hi-icon-chat">Chat</a>

 <a href="#set-5" class="hi-icon hi-icon-bookmark">Bookmarks</a>

 <a href="#set-5" class="hi-icon hi-icon-user">User</a>

 <a href="#set-5" class="hi-icon hi-icon-contract">Contact</a>

 </div>

 </section>

 <!--特效6-->

 <section id="set-6">

 <div class="hi-icon-wrap hi-icon-effect-6 hi-icon-effect-6a">

 <a href="#set-6" class="hi-icon hi-icon-images">Images</a>

 <a href="#set-6" class="hi-icon hi-icon-pencil">Edit</a>

 <a href="#set-6" class="hi-icon hi-icon-link">Link</a>

 <a href="#set-6" class="hi-icon hi-icon-mail">Mail</a>

 <a href="#set-6" class="hi-icon hi-icon-location">Location</a>

 </div>

 <div class="hi-icon-wrap hi-icon-effect-6 hi-icon-effect-6b">

 <a href="#set-6" class="hi-icon hi-icon-images">Images</a>

 <a href="#set-6" class="hi-icon hi-icon-pencil">Edit</a>

 <a href="#set-6" class="hi-icon hi-icon-link">Link</a>

 <a href="#set-6" class="hi-icon hi-icon-mail">Mail</a>

 <a href="#set-6" class="hi-icon hi-icon-location">Location</a>

 </div>

 </section>

 </div>

CSS 如下

.container {

    height: 100%;

    position: relative;

}

.container > section {

    min-height: 100%;

    margin: 0 auto;

    padding: 20em 3em;

}

.touch .container > section {

    padding:;

    min-height:;

}

.container > header {

    margin: 0 auto;

    padding: 2em 1em 2em;

    position: fixed;

    top:;

    left:;

    width: 100%;

    text-align: center;

    background: #fff;

    z-index:;

    -webkit-backface-visibility: hidden;

}

.touch .container > header {

    position: relative;

}

.container > header h1 {

    font-size: 2.625em;

    line-height: 1.3;

    margin:;

    font-weight:;

}

.container > header span {

    display: block;

    font-size: 60%;

    opacity: 0.6;

    padding: 0 0 0.6em 0.1em;

}

.container > section p {

    color: #fff;

    text-align: center;

    padding: 1em;

    margin:;

}

/* To Navigation Style */

.codrops-top {

    background: #fff;

    background: rgba(255, 255, 255, 0.6);

    text-transform: uppercase;

    width: 100%;

    font-size: 0.69em;

    line-height: 2.2;

    position: fixed;

    top:;

    left:;

    width: 100%;

    z-index:;

}

.codrops-top a {

    padding: 0 1em;

    letter-spacing: 0.1em;

    display: inline-block;

}

.codrops-top a:hover {

    background: rgba(255,255,255,0.95);

    color: #777;

}

.codrops-top span.right {

    float: right;

}

.codrops-top span.right a {

    float: left;

    display: block;

}

.codrops-icon:before {

    font-family: 'codropsicons';

    margin: 0 4px;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height:;

    -webkit-font-smoothing: antialiased;

}

.codrops-icon-drop:before {

    content: "\e001";

}

.codrops-icon-prev:before {

    content: "\e004";

}

.codrops-icon-archive:before {

    content: "\e002";

}

.codrops-icon-next:before {

    content: "\e000";

}

.codrops-icon-about:before {

    content: "\e003";

}

/* Demo Buttons Style */

.codrops-demos {

    padding-top: 1em;

    font-size: 0.9em;

}

.touch .codrops-demos {

    display: none;

}

.codrops-demos a {

    display: inline-block;

    margin: 0.5em;

    padding: 0.6em 1em;

    border: 3px solid #ddd;

    font-weight:;

}

.codrops-demos a:hover {

    opacity: 0.6;

}

.codrops-demos a.current-demo, .codrops-demos a.current-demo:hover {

    border: 3px solid #aaa;

    opacity:;

    color: #aaa;

}

#set-4 {

    background: #0e83cd;

}

#set-5 {

    background: #702fa8;

}

#set-6 {

    background: #64bb5d;

}

#set-7 {

    background: #d54f30;

}

#set-8 {

    background: #3851bc;

}

#set-9 {

    background: #96a94b;

}

 @media screen and (max-width: 800px) {

.hi-icon {

    margin: 15px !important;

}

.container > section {

    padding: 20em 1em;

}

}

 @media screen and (max-width: 25em) {

.codrops-icon span {

    display: none;

}

}

@font-face {

    font-family: 'ecoicon';

    src: url('../fonts/ecoicons/ecoicon.eot');

    src: url('../fonts/ecoicons/ecoicon.eot?#iefix') format('embedded-opentype'),  url('../fonts/ecoicons/ecoicon.woff') format('woff'),  url('../fonts/ecoicons/ecoicon.ttf') format('truetype'),  url('../fonts/ecoicons/ecoicon.svg#ecoicon') format('svg');

    font-weight: normal;

    font-style: normal;

}

.hi-icon-wrap {

    text-align: center;

    margin: 0 auto;

    padding: 2em 0 3em;

}

.hi-icon {

    display: inline-block;

    font-size: 0px;

    cursor: pointer;

    margin: 15px 30px;

    width: 90px;

    height: 90px;

    border-radius: 50%;

    text-align: center;

    position: relative;

    z-index:;

    color: #fff;

}

.hi-icon:after {

    pointer-events: none;

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    content: '';

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box;

}

.hi-icon:before {

    font-family: 'ecoicon';

    speak: none;

    font-size: 48px;

    line-height: 90px;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    display: block;

    -webkit-font-smoothing: antialiased;

}

.hi-icon-mobile:before {

    content: "\e009";

}

.hi-icon-screen:before {

    content: "\e00a";

}

.hi-icon-earth:before {

    content: "\e002";

}

.hi-icon-support:before {

    content: "\e000";

}

.hi-icon-locked:before {

    content: "\e001";

}

.hi-icon-cog:before {

    content: "\e003";

}

.hi-icon-clock:before {

    content: "\e004";

}

.hi-icon-videos:before {

    content: "\e005";

}

.hi-icon-list:before {

    content: "\e006";

}

.hi-icon-refresh:before {

    content: "\e007";

}

.hi-icon-images:before {

    content: "\e008";

}

.hi-icon-pencil:before {

    content: "\e00b";

}

.hi-icon-link:before {

    content: "\e00c";

}

.hi-icon-mail:before {

    content: "\e00d";

}

.hi-icon-location:before {

    content: "\e00e";

}

.hi-icon-archive:before {

    content: "\e00f";

}

.hi-icon-chat:before {

    content: "\e010";

}

.hi-icon-bookmark:before {

    content: "\e011";

}

.hi-icon-user:before {

    content: "\e012";

}

.hi-icon-contract:before {

    content: "\e013";

}

.hi-icon-star:before {

    content: "\e014";

}

/*特效1*/

.hi-icon-effect-4 .hi-icon {

    width: 92px;

    height: 92px;

    box-shadow: 0 0 0 4px rgba(255,255,255,1);

}

.hi-icon-effect-4a .hi-icon {

    -webkit-transition: box-shadow 0.2s;

    -moz-transition: box-shadow 0.2s;

    transition: box-shadow 0.2s;

}

.hi-icon-effect-4 .hi-icon:before {

    line-height: 92px;

}

.hi-icon-effect-4 .hi-icon:after {

    top: -4px;

    left: -4px;

    padding:;

    z-index:;

    border: 4px dashed #fff;

}

.hi-icon-effect-4 .hi-icon:hover {

    box-shadow: 0 0 0 0 rgba(255,255,255,0);

    color: #fff;

}

/*4b */

.hi-icon-effect-4b .hi-icon:hover {

    -webkit-transition: box-shadow 0.2s;

    -moz-transition: box-shadow 0.2s;

    transition: box-shadow 0.2s;

}

.hi-icon-effect-4b .hi-icon:hover:after {

    -webkit-animation: spinAround 9s linear infinite;

    -moz-animation: spinAround 9s linear infinite;

    animation: spinAround 9s linear infinite;

}

 @-webkit-keyframes spinAround {

 from {

 -webkit-transform: rotate(0deg)

}

to {

    -webkit-transform: rotate(360deg);

}

}

@-moz-keyframes spinAround {

 from {

 -moz-transform: rotate(0deg)

}

to {

    -moz-transform: rotate(360deg);

}

}

@keyframes spinAround {

 from {

 transform: rotate(0deg)

}

to {

    transform: rotate(360deg);

}

}

/* 特效2 */

.hi-icon-effect-5 .hi-icon {

    box-shadow: 0 0 0 4px rgba(255,255,255,1);

    overflow: hidden;

    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;

    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;

    transition: background 0.3s, color 0.3s, box-shadow 0.3s;

}

.hi-icon-effect-5 .hi-icon:after {

    display: none;

}

.hi-icon-effect-5 .hi-icon:hover {

    background: rgba(255,255,255,1);

    color: #702fa8;

    box-shadow: 0 0 0 8px rgba(255,255,255,0.3);

}

.hi-icon-effect-5a .hi-icon:hover:before {

    -webkit-animation: toRightFromLeft 0.3s forwards;

    -moz-animation: toRightFromLeft 0.3s forwards;

    animation: toRightFromLeft 0.3s forwards;

}

 @-webkit-keyframes toRightFromLeft {

 49% {

 -webkit-transform: translate(100%);

}

 50% {

 opacity:;

 -webkit-transform: translate(-100%);

}

 51% {

 opacity:;

}

}

@-moz-keyframes toRightFromLeft {

 49% {

 -moz-transform: translate(100%);

}

 50% {

 opacity:;

 -moz-transform: translate(-100%);

}

 51% {

 opacity:;

}

}

@keyframes toRightFromLeft {

 49% {

 transform: translate(100%);

}

 50% {

 opacity:;

 transform: translate(-100%);

}

 51% {

 opacity:;

}

}

.hi-icon-effect-5b .hi-icon:hover:before {

    -webkit-animation: toLeftFromRight 0.3s forwards;

    -moz-animation: toLeftFromRight 0.3s forwards;

    animation: toLeftFromRight 0.3s forwards;

}

 @-webkit-keyframes toLeftFromRight {

 49% {

 -webkit-transform: translate(-100%);

}

 50% {

 opacity:;

 -webkit-transform: translate(100%);

}

 51% {

 opacity:;

}

}

@-moz-keyframes toLeftFromRight {

 49% {

 -moz-transform: translate(-100%);

}

 50% {

 opacity:;

 -moz-transform: translate(100%);

}

 51% {

 opacity:;

}

}

@keyframes toLeftFromRight {

 49% {

 transform: translate(-100%);

}

 50% {

 opacity:;

 transform: translate(100%);

}

 51% {

 opacity:;

}

}

.hi-icon-effect-5c .hi-icon:hover:before {

    -webkit-animation: toTopFromBottom 0.3s forwards;

    -moz-animation: toTopFromBottom 0.3s forwards;

    animation: toTopFromBottom 0.3s forwards;

}

 @-webkit-keyframes toTopFromBottom {

 49% {

 -webkit-transform: translateY(-100%);

}

 50% {

 opacity:;

 -webkit-transform: translateY(100%);

}

 51% {

 opacity:;

}

}

@-moz-keyframes toTopFromBottom {

 49% {

 -moz-transform: translateY(-100%);

}

 50% {

 opacity:;

 -moz-transform: translateY(100%);

}

 51% {

 opacity:;

}

}

@keyframes toTopFromBottom {

 49% {

 transform: translateY(-100%);

}

 50% {

 opacity:;

 transform: translateY(100%);

}

 51% {

 opacity:;

}

}

.hi-icon-effect-5d .hi-icon:hover:before {

    -webkit-animation: toBottomFromTop 0.3s forwards;

    -moz-animation: toBottomFromTop 0.3s forwards;

    animation: toBottomFromTop 0.3s forwards;

}

 @-webkit-keyframes toBottomFromTop {

 49% {

 -webkit-transform: translateY(100%);

}

 50% {

 opacity:;

 -webkit-transform: translateY(-100%);

}

 51% {

 opacity:;

}

}

@-moz-keyframes toBottomFromTop {

 49% {

 -moz-transform: translateY(100%);

}

 50% {

 opacity:;

 -moz-transform: translateY(-100%);

}

 51% {

 opacity:;

}

}

@keyframes toBottomFromTop {

 49% {

 transform: translateY(100%);

}

 50% {

 opacity:;

 transform: translateY(-100%);

}

 51% {

 opacity:;

}

}

/* 特效3 */

.hi-icon-effect-6 .hi-icon {

    box-shadow: 0 0 0 4px rgba(255,255,255,1);

    -webkit-transition: background 0.2s, color 0.2s;

    -moz-transition: background 0.2s, color 0.2s;

    transition: background 0.2s, color 0.2s;

}

.hi-icon-effect-6 .hi-icon:hover {

    background: rgba(255,255,255,1);

    color: #64bb5d;

}

.hi-icon-effect-6 .hi-icon:hover:before {

    -webkit-animation: spinAround 2s linear infinite;

    -moz-animation: spinAround 2s linear infinite;

    animation: spinAround 2s linear infinite;

}

/* 特效4 */

.hi-icon-effect-7 .hi-icon {

    box-shadow: 0 0 0 4px rgba(255,255,255,1);

    -webkit-transition: background 0.2s, color 0.2s;

    -moz-transition: background 0.2s, color 0.2s;

    transition: background 0.2s, color 0.2s;

}

.hi-icon-effect-7 .hi-icon:hover {

    color: #fff;

}

.hi-icon-effect-7 .hi-icon:after {

    top: -8px;

    left: -8px;

    padding: 8px;

    z-index: -1;

    opacity:;

}

/* 7a */

.hi-icon-effect-7a .hi-icon:after {

    box-shadow: 0 0 0 rgba(255,255,255,1);

    -webkit-transition: opacity 0.2s, box-shadow 0.2s;

    -moz-transition: opacity 0.2s, box-shadow 0.2s;

    transition: opacity 0.2s, box-shadow 0.2s;

}

.hi-icon-effect-7a .hi-icon:hover:after {

    opacity:;

    box-shadow: 3px 3px 0 rgba(255,255,255,1);

}

.hi-icon-effect-7a .hi-icon:before {

    -webkit-transform: scale(0.8);

    -moz-transform: scale(0.8);

    -ms-transform: scale(0.8);

    transform: scale(0.8);

    opacity: 0.7;

    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;

    -moz-transition: -moz-transform 0.2s, opacity 0.2s;

    transition: transform 0.2s, opacity 0.2s;

}

.hi-icon-effect-7a .hi-icon:hover:before {

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    opacity:;

}

/* 7b */

.hi-icon-effect-7b .hi-icon:after {

    box-shadow: 3px 3px rgba(255,255,255,1);

    -webkit-transform: rotate(-90deg);

    -moz-transform: rotate(-90deg);

    -ms-transform: rotate(-90deg);

    transform: rotate(-90deg);

    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;

    -moz-transition: opacity 0.2s, -moz-transform 0.2s;

    transition: opacity 0.2s, transform 0.2s;

}

.hi-icon-effect-7b .hi-icon:hover:after {

    opacity:;

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    transform: rotate(0deg);

}

.hi-icon-effect-7b .hi-icon:before {

    -webkit-transform: scale(0.8);

    -moz-transform: scale(0.8);

    -ms-transform: scale(0.8);

    transform: scale(0.8);

    opacity: 0.7;

    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;

    -moz-transition: -moz-transform 0.2s, opacity 0.2s;

    transition: transform 0.2s, opacity 0.2s;

}

.hi-icon-effect-7b .hi-icon:hover:before {

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    opacity:;

}

/* 特效5 */

.hi-icon-effect-8 .hi-icon {

    background: rgba(255,255,255,0.1);

    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;

    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;

    transition: transform ease-out 0.1s, background 0.2s;

}

.hi-icon-effect-8 .hi-icon:after {

    top:;

    left:;

    padding:;

    z-index: -1;

    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);

    opacity:;

    -webkit-transform: scale(0.9);

    -moz-transform: scale(0.9);

    -ms-transform: scale(0.9);

    transform: scale(0.9);

}

.hi-icon-effect-8 .hi-icon:hover {

    background: rgba(255,255,255,0.05);

    -webkit-transform: scale(0.93);

    -moz-transform: scale(0.93);

    -ms-transform: scale(0.93);

    transform: scale(0.93);

    color: #fff;

}

.hi-icon-effect-8 .hi-icon:hover:after {

    -webkit-animation: sonarEffect 1.3s ease-out 75ms;

    -moz-animation: sonarEffect 1.3s ease-out 75ms;

    animation: sonarEffect 1.3s ease-out 75ms;

}

 @-webkit-keyframes sonarEffect {

 0% {

 opacity: 0.3;

}

 40% {

 opacity: 0.5;

 box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

}

 100% {

 box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

 -webkit-transform: scale(1.5);

 opacity:;

}

}

@-moz-keyframes sonarEffect {

 0% {

 opacity: 0.3;

}

 40% {

 opacity: 0.5;

 box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

}

 100% {

 box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

 -moz-transform: scale(1.5);

 opacity:;

}

}

@keyframes sonarEffect {

 0% {

 opacity: 0.3;

}

 40% {

 opacity: 0.5;

 box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

}

 100% {

 box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

 transform: scale(1.5);

 opacity:;

}

}

/* 特效6 */

.hi-icon-effect-9 .hi-icon {

    -webkit-transition: box-shadow 0.2s;

    -moz-transition: box-shadow 0.2s;

    transition: box-shadow 0.2s;

}

.hi-icon-effect-9 .hi-icon:after {

    top:;

    left:;

    padding:;

    box-shadow: 0 0 0 3px #fff;

    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;

    -moz-transition: -moz-transform 0.2s, opacity 0.2s;

    transition: transform 0.2s, opacity 0.2s;

}

/* 9a */

.hi-icon-effect-9a .hi-icon:hover:after {

    -webkit-transform: scale(0.85);

    -moz-transform: scale(0.85);

    -ms-transform: scale(0.85);

    transform: scale(0.85);

    opacity: 0.5;

}

.hi-icon-effect-9a .hi-icon:hover {

    box-shadow: 0 0 0 10px rgba(255,255,255,1);

    color: #fff;

}

/* 9b */

.hi-icon-effect-9b .hi-icon:hover:after {

    -webkit-transform: scale(0.85);

    -moz-transform: scale(0.85);

    -ms-transform: scale(0.85);

    transform: scale(0.85);

}

.hi-icon-effect-9b .hi-icon:hover {

    box-shadow: 0 0 0 10px rgba(255,255,255,0.4);

    color: #fff;

}

css3Transitions 实现的鼠标经过图标位移、旋转、翻转、发光、淡入淡出等多种特效的更多相关文章

9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...
为什么arcgis里，鼠标的图标都变成放大镜不能用了
做作业做到一半,鼠标的图标就只有放大镜了,不管是点箭头还是作图工具都没用,手抓的也没用,只剩下放大镜的功能和图标了,这是怎么一回事啊?种情况我碰到过几次,具体原因不清楚,但是解决方法是有的:把你的数据 ...
Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
/**-------------------------------------------------代码区--------------------------------------------- ...
threejs 鼠标移动控制模型旋转
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
NOI题库 09:图像旋转翻转变换
NOI题库开始的题,也是略水,当然也是大水,所以彼此彼此 09:图像旋转翻转变换总时间限制: 1000ms 内存限制: 65536kB 描述给定m行n列的图像各像素点灰度值,对其依次进行一系列操作 ...
[转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附图片淡入淡出效果)
http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...
Excel 二维数组(数据块)旋转/翻转技巧
Excel 二维数组(数据块)旋转/翻转技巧原创 2017-12-30 久石六久石六工作中遇到个问题,需要将Excel中的数据块或者说二维数组向右旋转90度,才能再加工处理.当然,不是旋转文本方 ...
js+jq 淡入淡出轮播（点击+定时+鼠标进入移出事件）
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
jquery鼠标键盘悬停事件，形变动画和淡入淡出
鼠标和键盘悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

一次LVS+MySQL的主主负载均衡实战
这是去年做的一个项目的记录,如果大家有更好的解决方案,欢迎指出. 先说说项目需求,用户需要在两个地市部署两套应用系统和两套数据库,在一个地市主用,在另一个热备:数据要互备:而且如果主用地市流量很大,可 ...
【转】Pro Android学习笔记（五）：了解Content Provider（上）
Content Provider是抽象数据封装和数据访问机制,例如SQLite是Android设备带有的数据源,可以封装到一个content provider中.要通过content provider ...
.NETFramework：Random
ylbtech-.NETFramework:Random 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c ...
Entity Framework5学习笔记
主要是学习DbContext http://zzk.cnblogs.com/s?w=DbContext&t=b
[hdu2544]最短路spfa
解题关键:最短路模板一直没整理过,这里整理了一下spfa+链式前向星建图的最短路模板,以后网络赛省的打了. spfa算法的关键就是松弛操作,只有进行松弛操作,其后的点距离才可能被更新. #includ ...
反射获取窗体所有控件的Text
可以直接通过反射获取当前窗体的所有控件的Text(具有Text属性),具体代码如下: foreach (var field in form.GetType().GetFields(System.Ref ...
ZOJ 3512 Financial Fraud (左偏树)
题意:给定一个序列,求另一个不递减序列,使得Abs(bi - ai) 和最小. 析:首先是在每个相同的区间中,中位数是最优的,然后由于要合并,和维护中位数,所以我们选用左偏树来维护,当然也可以用划分树 ...
You have configured this virtual machine to use a 64-bit guest operating system. However, 64-bit
vm虚拟机问题:You have configured this virtual machine to use a 64-bit guest operating system. However, ...
使用WSAIoctl获取AcceptEx函数指针 [转]
Winsock2的其他供应商不一定会实现AcceptEx函数.同样情况也包括的其他Microsoft的特定APIs如TransmitFile,GetAcceptExSockAddrs以及其他Micro ...
Guid.NewGuid().ToString()的几种格式 (转)
1.Guid.NewGuid().ToString("N") 结果为: 38bddf48f43c48588e0d78761eaa1ce6 2.Guid.NewGuid() ...

css3Transitions 实现的鼠标经过图标位移、旋转、翻转、发光、淡入淡出等多种特效

css3Transitions 实现的鼠标经过图标位移、旋转、翻转、发光、淡入淡出等多种特效的更多相关文章

随机推荐

热门专题