<!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中8种基本数据类型是哪些

    1 public class Ceshi { 2 int a; 3 double b; 4 boolean c; 5 char d; 6 float f; 7 byte e; 8 long h; 9 ...

  2. fsdfd

    static int kWeiOfVal(int val, int k) { int n = 1; int temVal = val; int result; while (1) { temVal = ...

  3. ip地址与子网掩码概述

    IP地址: IP地址(Internet Protocol):IP地址是IP协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物理地址的差异. IP地址分为五 ...

  4. c++中的左值和右值的理解

    1.左值和右值的概念 C++中左值(lvalue)和右值(rvalue)是比较基础的概念,虽然平常几乎用不到,但C++11之后变得十分重要,它是理解 move/forward 等新语义的基础. 左值与 ...

  5. poj_1852_Ants（复杂问题简单化）

    原题传送门 描述 一群蚂蚁走在长度为l cm的水平细杆上,以1cm/s的匀速.当一只行走的蚂蚁到达杆的一端,它就会掉下去.当两只蚂蚁相遇,它们会掉头像反方向走去.我们知道一只蚂蚁在杆上的初始位置,然而 ...

  6. 从零开始开发一款H5小游戏(三) 攻守阵营，赋予粒子新的生命

    本系列文章对应游戏代码已开源 Sinuous game. 每个游戏都会包含场景和角色.要实现一个游戏角色,就要清楚角色在场景中的位置,以及它的运动规律,并能通过数学表达式表现出来. 场景坐标 canv ...

  7. Kurento安装与入门12——Show DataChannel

    Show DataChannel 本示例允许用户在文本框中输入任意文字,输入的文字将以字幕的形式显示在传回的视频中. 官网文档 [Show DataChannel[1] 首先从github上获取代码( ...

  8. 2022DASCTF X SU 三月春季挑战赛 ezpop

    复现一道dactf的ezpop <?php class crow { public $v1; public $v2; function eval() { echo new $this->v ...

  9. java中的方法（method）到底怎么用？给个例子

    7.方法(method)   被调例子, int add(int x, int y){ return x+y; } 主调例子, for example: int result = add(5,3); ...

  10. DOM节点的使用（常用方法+代码）

    DOM节点的应用 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动 ...