<!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. 解决MySQL报错ERROR 2002 (HY000)

    今天在为新的业务线搭架数据库后,在启动的时候报错 root@qsbilldatahis-db01:/usr/local/mysql/bin# ./mysql ERROR 2002 (HY000): C ...

  2. memcached 是原子的吗？

    所有的被发送到 memcached 的单个命令是完全原子的.如果您针对同一份数据 同时发送了一个 set 命令和一个 get 命令,它们不会影响对方.它们将被串行化. 先后执行.即使在多线程模式,所有 ...

  3. 指出在 spring aop 中 concern 和 cross-cutting concern 的不同之处?

    concern 是我们想要在应用程序的特定模块中定义的行为.它可以定义为我们想 要实现的功能. cross-cutting concern 是一个适用于整个应用的行为,这会影响整个应用程序. 例如,日 ...

  4. ACM - 动态规划 - UVA437 The Tower of Babylon

    UVA437 The Tower of Babylon 题解 初始时给了 \(n\) 种长方体方块,每种有无限个,对于每一个方块,我们可以选择一面作为底.然后用这些方块尽可能高地堆叠成一个塔,要求只有 ...

  5. DIANA算法

    DIANA算法 DIANA算法示例 DIANA算法练习

  6. leetcode多线程题目

    代码附上了力扣没显示出来的测试 按序打印 class Foo { private CountDownLatch latch = new CountDownLatch(1); private Count ...

  7. uni-app中遇到的跳转问题

    最近在使用uni-app时,遇到的一个问题,使用uni.navigateTo跳转时在H5端是可以的,在小程序端报 fail webview count limit exceed 这个错,解决办法如下: ...

  8. Python网络爬虫 - 爬取中证网银行相关信息

    最终版:07_中证网(Plus -Pro).py # coding=utf-8 import requests from bs4 import BeautifulSoup import io impo ...

  9. HDMS（Headend Device Management System）软件下载

    进入官网http://www.pbi-china.com/CHS/index.aspx点击右下角的下载通道.

  10. ansible模块解析及使用

    模块一:setup(收集远程主机信息) [root@zabbix30 /]# ansible test -m setup 模块二:ping(测试主机是否在线) [root@zabbix30 /]# a ...