css鼠标滑过文字的波纹demo效果示例(整理)

简介: css鼠标滑过文字的波纹demo效果示例(整理)
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>鼠标滑过文字的波纹效果</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
      .set {
        position: relative;
        font-weight: 400;
        text-align: center;
        width: 200px;
        height: 200px;
        line-height: 200px;
        overflow: hidden;
        position: relative;
        z-index: 0;
        color: #000000;
        background: #fafafa;
        cursor: pointer;
      }
      .anim {
        -moz-transform: translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: -1;
      }
      .anim:before {
        position: relative;
        content: '';
        display: block;
        margin-top: 100%;
        background: #6CB1FF;
      }
      .anim:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 50%;
      }
      .hoverable:hover>.anim:after {
        -webkit-animation: anim-out-pseudo 0.75s;
        animation: anim-out-pseudo 0.75s;
      }
      .set:hover>.anim {
        -webkit-animation: anim-out 0.75s;
        animation: anim-out 0.75s;
      }
      @-webkit-keyframes anim-out-pseudo {
        0% {
          background: rgba(255, 203, 0, 50);
        }
        100% {
          background: transparent;
        }
      }
      @-webkit-keyframes anim-out {
        0% {
          width: 0%;
        }
        100% {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="set hoverable">
      <div class="anim"></div>
      <p>放我上面有惊喜哦</p>
    </div>
    <div style="width: 100%;text-align: center;">记得考虑兼容性哦</div>
  </body>
</html>

相关文章
|
1月前
|
前端开发 内存技术
CSS动画示例(上一篇是CSS过渡…)
CSS动画示例(上一篇是CSS过渡…)
15 1
|
10天前
|
前端开发
|
30天前
css3鼠标悬停图片特效源码
css3鼠标悬停图片特效,图片悬停效果源码,可以在网页上面作为自己的动态加载名片,放到侧边栏或者网站合适的位置即可
14 0
css3鼠标悬停图片特效源码
|
1月前
|
前端开发
CSS3中的动画示例
CSS3中的动画示例
8 1
|
1月前
|
Web App开发 弹性计算 前端开发
纯 CSS 实现多行文字截断
纯 CSS 实现多行文字截断
20 1
|
2月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
|
3月前
|
前端开发
html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果
23 0
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影
|
4月前
|
前端开发
css sprite 的优缺点,使用方法和示例
css sprite 的优缺点,使用方法和示例
29 1
|
4月前
|
前端开发
css实现鼠标多样化
css实现鼠标多样化
25 0