css3 实现盒子四周光晕_CSS3给超链接增加阴影和光晕效果

Css3的动画效果给我们的网站增加不少乐趣特色，你如果喜欢个性动感的效果，学学CSS的动画过渡很有帮助。

一、Html布局

Hover Shadow

二、Css代码

1、给button添加样式

.button {

margin: .4em;

padding: 1em;

cursor: pointer;

background: #e1e1e1;

text-decoration: none;

color: #666666;

/* Prevent highlight colour when element is tapped */

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

2、给Hover Shadow添加动画效果和兼容

/* Hover Shadow */

@keyframes hover {

50% {

-webkit-transform: translateY(-3px);

-ms-transform: translateY(-3px);

transform: translateY(-3px);

}

100% {

-webkit-transform: translateY(-6px);

-ms-transform: translateY(-6px);

transform: translateY(-6px);

}

}

@-webkit-keyframes hover-shadow {

0% {

-webkit-transform: translateY(6px);

transform: translateY(6px);

opacity: .4;

}

50% {

-webkit-transform: translateY(3px);

transform: translateY(3px);

opacity: 1;

}

100% {

-webkit-transform: translateY(6px);

transform: translateY(6px);

opacity: .4;

}

}

@keyframes hover-shadow {

0% {

-webkit-transform: translateY(6px);

-ms-transform: translateY(6px);

transform: translateY(6px);

opacity: .4;

}

50% {

-webkit-transform: translateY(3px);

-ms-transform: translateY(3px);

transform: translateY(3px);

opacity: 1;

}

100% {

-webkit-transform: translateY(6px);

-ms-transform: translateY(6px);

transform: translateY(6px);

opacity: .4;

}

}

.hover-shadow {

display: inline-block;

position: relative;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-property: -webkit-transform;

transition-property: transform;

-webkit-transform: translateZ(0);

-ms-transform: translateZ(0);

transform: translateZ(0);

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

}

.hover-shadow:before {

pointer-events: none;

position: absolute;

z-index: -1;

content: '';

top: 100%;

left: 5%;

height: 10px;

width: 90%;

opacity: 0;

background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);

background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);

/* W3C */

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-property: -webkit-transform, opacity;

transition-property: transform, opacity;

}

.hover-shadow:hover {

-webkit-transform: translateY(-6px);

-ms-transform: translateY(-6px);

transform: translateY(-6px);

-webkit-animation-name: hover;

animation-name: hover;

-webkit-animation-duration: 1.5s;

animation-duration: 1.5s;

-webkit-animation-delay: 0.3s;

animation-delay: 0.3s;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

}

.hover-shadow:hover:before {

opacity: .4;

-webkit-transform: translateY(6px);

-ms-transform: translateY(6px);

transform: translateY(6px);

-webkit-animation-name: hover-shadow;

animation-name: hover-shadow;

-webkit-animation-duration: 1.5s;

animation-duration: 1.5s;

-webkit-animation-delay: .3s;

animation-delay: .3s;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

}

三、兼容性

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。