<!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. 线程的 sleep()方法和 yield()方法有什么区别？

    ① sleep()方法给其他线程运行机会时不考虑线程的优先级,因此会给低优先级的线程以运行的机会:yield()方法只会给相同优先级或更高优先级的线程以运行的机会: ② 线程执行 sleep()方法后 ...

  2. Python - Python函数简介

  3. 从零到一：用Phaser.js写意地开发小游戏（Chapter 3 - 加载游戏资源）

    回顾 上一节我们搭建了游戏的骨架,添加了四个游戏场景,分别是加载.开始.游戏.结束.那么这一节我们来介绍加载这个场景,顺带丰富一下各个场景的基本内容. Phaser.Loader Phaser框架自带 ...

  4. ES6-11学习笔记--异步迭代

    ES9提供异步迭代: for await of Symbol.asyncIterator   function getPromise(time) { return new Promise((resol ...

  5. MongoDB从bson文件中恢复数据

    首先需要到mangodb的安装目录的bin下面找到mongorestore.exe WIN10系统MongoDB安装目录bin文件夹下没有mongorestore.exe 先下载工具  https:/ ...

  6. 【Android开发】【布局】 仿QQ的UI

    Demo地址

  7. MapReduce在集群执行任务时报错：Initialization of all the collectors failed. Error in last collector was:java.lang.ClassCastException

    报错信息详细: Error: java.io.IOException: Initialization of all the collectors failed. Error in last colle ...

  8. EMS查看单个邮箱的已用空间

    Exchange查询单个邮箱用户使用状态. 查看用户"wsj"的邮箱使用状态 键入以下命令: Get-MailboxStatistics wsj | FL DiplayName,T ...

  9. css3属性之filter初探

    filter属性是css不常用的一个属性,但是用好了可以给网页增色不少!ps: IE不支持此属性: img { -webkit-filter: grayscale(100%); /* Chrome, ...

  10. python入门-开始

    1.为啥要学Python? 各种语言的优劣势对比视频版:https://www.bilibili.com/video/BV1y3411r7pX/?spm_id_from=autoNext 各种语言的优 ...