<!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. Axure在Chrome浏览解决方案

    AXURE RP EXTENSION FOR CHROME Google Chrome浏览器需要扩展程序才能查看本地存储的项目.或者,将您的RP文件上传到Axure Cloud或使用其他浏览器.您也可 ...

  2. 分布式集群中为什么会有 Master？

    在分布式环境中,有些业务逻辑只需要集群中的某一台机器进行执行,其他的机 器可以共享这个结果,这样可以大大减少重复计算,提高性能,于是就需要进行 leader 选举.

  3. Redis 的回收策略（淘汰策略）?

    volatile-lru:从已设置过期时间的数据集(server.db[i].expires)中挑选最近最 少使用的数据淘汰 volatile-ttl:从已设置过期时间的数据集(server.db[i ...

  4. spring-boot--lernning之自定义starters

    思路: 1这个场景需要使用到的依赖是什么??? 2如何编写自动配置 @Configuration 指定这个类是一个配置类 @ConditionalOnXXXX 指定条件下成立的情况下自动配置类生效 @ ...

  5. Effective Java —— 多字段下考虑使用建造者模式构建实例

    本文参考 本篇文章参考自<Effective Java>第三版第二条"Consider a builder when faced with many constructor pa ...

  6. -> 在c语言中是什么意思？

    ->在C语言中称为间接引用运算符,是二目运算符,优先级同成员运算符".".用法:p->a,其中p是指向一个结构体的指针,a是这个结构体类型的一个成员.表达式p-> ...

  7. 移动端的vw px rem之间换算

    一.vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width).1vw = 1% * 视口宽度.也就是说,一个视口就是100vw. 2.px:px应该是在css中使用最 ...

  8. 前端面试题整理——Javascript基础

    常见值类型: let a; //undefined let s = 'abc'; let n = 100; let b = true; let sb = Symbol('s'); let nn = N ...

  9. 字符串反转&说反话

    题目描述 写出一个程序,接受一个字符串,然后输出该字符串反转后的字符串.(字符串长度不超过1000) 输入描述: 输入N个字符 输出描述: 输出该字符串反转后的字符串 示例1 输入 abcd 输出 d ...

  10. Bugku的exec执行绕过

    题目 思路 1. 打开网页显示403 2. 回去看题目有提示 3. 不用多说,网页访问. 4. 第一行说要传个参数ip,试一下get传参?ip=127.0.0.1 5. 试下 ① 算术运算符 & ...