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

一、Html布局

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

二、Css代码

1、给button添加样式

  1. .button {
  2.   margin: .4em;
  3.   padding: 1em;
  4.   cursor: pointer;
  5.   background: #e1e1e1;
  6.   text-decoration: none;
  7.   color: #666666;
  8.   /* Prevent highlight colour when element is tapped */
  9.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  10. }

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

  1. /* Hover Shadow */
  2. @keyframes hover {
  3.   50% {
  4.     -webkit-transform: translateY(-3px);
  5.     -ms-transform: translateY(-3px);
  6.     transform: translateY(-3px);
  7.   }
  8.   100% {
  9.     -webkit-transform: translateY(-6px);
  10.     -ms-transform: translateY(-6px);
  11.     transform: translateY(-6px);
  12.   }
  13. }
  14. @-webkit-keyframes hover-shadow {
  15.   0% {
  16.     -webkit-transform: translateY(6px);
  17.     transform: translateY(6px);
  18.     opacity: .4;
  19.   }
  20.   50% {
  21.     -webkit-transform: translateY(3px);
  22.     transform: translateY(3px);
  23.     opacity: 1;
  24.   }
  25.   100% {
  26.     -webkit-transform: translateY(6px);
  27.     transform: translateY(6px);
  28.     opacity: .4;
  29.   }
  30. }
  31. @keyframes hover-shadow {
  32.   0% {
  33.     -webkit-transform: translateY(6px);
  34.     -ms-transform: translateY(6px);
  35.     transform: translateY(6px);
  36.     opacity: .4;
  37.   }
  38.   50% {
  39.     -webkit-transform: translateY(3px);
  40.     -ms-transform: translateY(3px);
  41.     transform: translateY(3px);
  42.     opacity: 1;
  43.   }
  44.   100% {
  45.     -webkit-transform: translateY(6px);
  46.     -ms-transform: translateY(6px);
  47.     transform: translateY(6px);
  48.     opacity: .4;
  49.   }
  50. }
  51. .hover-shadow {
  52.   display: inline-block;
  53.   position: relative;
  54.   -webkit-transition-duration: 0.3s;
  55.   transition-duration: 0.3s;
  56.   -webkit-transition-property: -webkit-transform;
  57.   transition-property: transform;
  58.   -webkit-transform: translateZ(0);
  59.   -ms-transform: translateZ(0);
  60.   transform: translateZ(0);
  61.   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  62. }
  63. .hover-shadow:before {
  64.   pointer-events: none;
  65.   position: absolute;
  66.   z-index: -1;
  67.   content: '';
  68.   top: 100%;
  69.   left: 5%;
  70.   height: 10px;
  71.   width: 90%;
  72.   opacity: 0;
  73.   background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  74.   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  75.   /* W3C */
  76.   -webkit-transition-duration: 0.3s;
  77.   transition-duration: 0.3s;
  78.   -webkit-transition-property: -webkit-transform, opacity;
  79.   transition-property: transform, opacity;
  80. }
  81. .hover-shadow:hover {
  82.   -webkit-transform: translateY(-6px);
  83.   -ms-transform: translateY(-6px);
  84.   transform: translateY(-6px);
  85.   -webkit-animation-name: hover;
  86.   animation-name: hover;
  87.   -webkit-animation-duration: 1.5s;
  88.   animation-duration: 1.5s;
  89.   -webkit-animation-delay: 0.3s;
  90.   animation-delay: 0.3s;
  91.   -webkit-animation-timing-function: linear;
  92.   animation-timing-function: linear;
  93.   -webkit-animation-iteration-count: infinite;
  94.   animation-iteration-count: infinite;
  95.   -webkit-animation-direction: alternate;
  96.   animation-direction: alternate;
  97. }
  98. .hover-shadow:hover:before {
  99.   opacity: .4;
  100.   -webkit-transform: translateY(6px);
  101.   -ms-transform: translateY(6px);
  102.   transform: translateY(6px);
  103.   -webkit-animation-name: hover-shadow;
  104.   animation-name: hover-shadow;
  105.   -webkit-animation-duration: 1.5s;
  106.   animation-duration: 1.5s;
  107.   -webkit-animation-delay: .3s;
  108.   animation-delay: .3s;
  109.   -webkit-animation-timing-function: linear;
  110.   animation-timing-function: linear;
  111.   -webkit-animation-iteration-count: infinite;
  112.   animation-iteration-count: infinite;
  113.   -webkit-animation-direction: alternate;
  114.   animation-direction: alternate;
  115. }

三、兼容性

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


发布日期:

所属分类: Css/Html5 标签: