Css3实现链接的阴影和光晕过渡

511yj

文章目录[隐藏]

一、Html布局
二、Css代码
三、兼容性

Css3的动画效果给我们的网站增加不少乐趣特色，你如果喜欢个性动感的效果，学学CSS的动画过渡很有帮助，本站简洁冷重，采用了蓝色调系，为了视觉的平衡，在底部友情链接栏目加了点动画效果，源码来源于网上，你完全可以根据自己的需要来改变它，一起分享一下。

一、Html布局

<a rel="hover-shadow" class="button hover-shadow">Hover Shadow</a>

二、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及以下浏览器。

发布日期： 2016-07-12 作者： 511遇见

所属分类： Css/Html5 标签： css　Css/Html5　css动画

您可能感兴趣的文章:

▪ html5 实现客户端验证上传文件的大小应用举例

▪ 纯css实现div透明度控制调节的方法

▪ css特定属性选择器lang使用详解

▪ CSS教程:last-child与:first-child使用教程

▪ 纯css实现序列行数值排序

▪ 多说评论扁平化风格Css样式

▪ Html5+Jquery+css3发光动画字体特性（源码）

▪ 纯css实现指向图片放大

▪ Html5设计过程中必须遵循的几个原则

▪ CSS 小技巧强烈推荐

没有相关文章!

相关文章:

▪ Html5时尚个性music播放器2016-07-25

▪ Css打造伸缩时间轴样式的Wordpress归档页面archive.php2016-05-05

▪ HTML5 内联 SVG以及与Canvas两者间的区别2016-07-20

▪ Htlm5本地存储和连线时段储存应用举例2016-07-21

▪ 纯css实现指向图片放大2017-02-26

▪ Cordillera采用Html5和Bootstrap框架的免费wordpress主题2016-03-27

▪ Html手动编辑多个Map热点2018-08-25

▪ 多说评论扁平化风格Css样式2016-07-21

▪ 使用compass库编辑css2016-08-01

▪ CSS3边栏字体图标闪烁特效2017-02-20

上一篇:

运用Css伪类Before和After来美化网页

下一篇:

强烈推荐11款优秀的HTML5动画工具