<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>

    <title>Title</title>

    <style>

        .set_4_button1 {

            position: relative;

            text-align: center;

            padding: 0 25px;

            line-height: 450px;

            overflow: hidden;

            z-index: 0;  /*使得z-index为负数的子元素不被普通文档流元素覆盖*/

            color: #fff;

            transition: all .1s;

            background: #FCA700;

        }

        /* hover 值后出现的效果，一开始没有宽高，位于父元素中间 */

        .anim {

            position: absolute;

            overflow: hidden;

            top: 50%;

            left: 50%;

            z-index: -1;

            transform: translate(-50%, -50%);

            border-radius: 50%;

        }

        .anim::before {

            position: relative;

            display: block;

            content: '';

            /*margin-top: 100%;*/

            padding-top: 100%;

            /* 当hover时，父元素的width会增大，而子元素margin/padding为百分比时会参照父元素宽度，

            这时，margin或padding增加都会使得父元素高度增加，如果是padding的话，伪元素before会有高度。 */

        }

        /* 伪元素 after 是用于背景色的过渡，其实可以不用 after，背景色、宽高的动画都归到父元素即可*/

        .anim::after {

            position: absolute;

            content: '';

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

        }

        /* 分开设 start */

        .hoverable:hover > .anim {

            animation: anim-out 3s infinite;

        }

        .hoverable:hover > .anim:after {

            animation: anim-out-pseudo 3s infinite;

        }

        @keyframes anim-out {

            0% { width: 0%;}

            100% { width: 100%;}

        }

        @keyframes anim-out-pseudo {

            0% { background: rgba(0,0,0,.25); }

            100% { background: transparent; }

        }

        /* 分开设 end */

        /* 合并设 start */

        .hoverable:hover > .anim {

            animation: merge 3s infinite;}

        @keyframes merge {

            0% {

                width: 0;

                background: rgba(0,0,0,.25);

            }

            100% {

                width: 100%;

                background: transparent;

            }

        }

        /* 合并设 end */

    </style>

</head>

<body>

    <div class="set_4_button1 raised hoverable">

        <div class="anim"></div>

        <span>Sample Button</span>

    </div>

</body>

</html>

更简单实现方式：

说明padding / margin 为百分比时值是参照父元素：

hover特效的更多相关文章

  1. CSS3实现的一批hover特效

    本特效的原版是codepen上面的hover.css项目.个人非常喜欢所以把全部的hover特效自己也写了一遍,上传文件麻烦所以直接把css整合到HTML代码中了.代码复制下来保存后就可以用浏览器打开 ...

  2. 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效

    今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...

  3. 图片样式加hover特效

    之前有个尴尬的事情发生,我不知道如何将文字放在图片右边,我想了个麻烦且愚蠢的办法,后来才知道只需要将图片居左就可以达到效果.....不说了看下面 需要实现的效果: 很简单, <img src=& ...

  4. div hover 特效 css样式

    -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -moz-box-sha ...

  5. 【特效】hover向上翻转效果

    前段时间做了很多有关css3动画的项目.虽然当时都较圆满的完成了,但事后还是要总结一下的,趁着近期工作不忙,系统的学习了一些动画理论,重点看了transform3D变换,学习了translate平移. ...

  6. 干货：Vue粒子特效（vue-particles插件）

    转:https://www.jianshu.com/p/53199b842d25 image.png 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事 ...

  7. Vue 动态粒子特效(vue-particles)

    图上那些类似于星座图的点和线 是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动. 是非常炫的一种动态特效 可以在Vue项目中使用,需要安装第三方依赖 使用步骤 1. 安装 ...

  8. vue.js 实现粒子特效之插件( vue-particles )

    首先先一张效果图 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动. 使用教程: npm install vue-particles --s ...

  9. Vue粒子特效（vue-particles插件）

    ` npm install vue-particles --save-dev ` ` import VueParticles from 'vue-particles' Vue.use(VueParti ...

随机推荐

  1. Java 中怎么打印数组？

    你可以使用 Arrays.toString() 和 Arrays.deepToString() 方法来打印数组.由 于数组没有实现 toString() 方法,所以如果将数组传递给 System.ou ...

  2. List、Set、Map 是否继承自 Collection 接口？

    List.Set 是,Map 不是.Map 是键值对映射容器,与 List 和 Set 有明显的区别, 而 Set 存储的零散的元素且不允许有重复元素(数学中的集合也是如此),List 是线性结构的容 ...

  3. 集合流之"交集(相同)和差集(区别的)"的使用

    一.需求 今天做的是将两个字符串转为数组后再转集合,然后利用集合的流stream来进行差集过滤 二.差集代码 差集:将两个集合相同的数据去掉,留下不同的数据 1 @Test 2 public void ...

  4. css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放，达到图片不变形目的，做出批量打印图片功能,页面打印“window.print()”

    一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...

  5. 遇到的错误之“Cannot find module 'XXX’的错误”

    一.问题: 在进行webpack打包的时候,会出现Cannot find module 'XXX'的错误,找不到某个模块的错误 二.解决方法: (1)方法1: 直接进行npm install重新打包: ...

  6. Rust 中的数据布局-repr

    repr(Rust) 首先,所有类型都有一个以字节为单位的对齐方式,一个类型的对齐方式指定了哪些地址可以用来存储该值.一个具有对齐方式n的值只能存储在n的倍数的地址上.所以对齐方式 2 意味着你必须存 ...

  7. html5手机页面的那些meta

    一.普通手机页的设置1.<meta name="viewport" content=""/>说明:屏幕的缩放 content的几个属性: width ...

  8. H5打造3d场景不完全攻略（一）: H5 3d表现形式

    前言 日前,taobao造物节H5放肆地火了一把.相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到.工作之余体验了若干个3d H5页面,感觉这类的H5互动体验性明显要比普通的要强,把二维的 ...

  9. 【Android开发】Coding + git命令行基本使用

    上传代码 进入本地仓库的目录. cd ... 查看仓库链接 : git remote -v 如果没有,则添加url链接 : git remote add testName https://git.co ...

  10. Android Studio登陆界面+Button不变色问题

    今日所学内容: 1.初始相对布局 2.AS登录界面 3.一个可以下载小图标的阿里的网站iconfont-阿里巴巴矢量图标库 用GitHub账号绑定就可以免费下载 4.取颜色工具ColorCop 遇到的 ...