效果预览

代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="author" content="https://www.cnblogs.com/beixuan">

        <meta name="version" content="1.0.0">

        <meta name="date" content="2021/12/01 18:00:26">

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

        <title>CSS动画大全之按钮[b]</title>

    </head>

    <style type="text/css">

      /* 设置 body 内、外边距为 0 */

      body {

        margin: 0;

        padding: 0;

        display: grid;

        grid-template-columns: 100%;

        grid-template-rows: 100%;

        justify-items: center;

        align-items: center;

        width: 100vw;

        height: 100vh;

        background-color: #FFF;

      }

      .page-wrapper {

        display: grid;

        grid-template-columns: 33% 34% 33%;

        grid-template-rows: 100%;

        justify-items: center;

        align-items: center;

        width: 100vw;

        height: 100vh;

      }

      .page-wrapper > div {

        display: inline-block;

      }

      .btn {

        width: 12.5rem;

        height: 3.125rem;

        line-height: 3.125rem;

        font-size: 1.5rem;

        padding: 0.5rem;

        text-align: center;

        box-shadow: 0 0 1px #000;

        position: relative;

        transition: color 0.2s;

        margin-bottom: 1rem;

        cursor: pointer;

      }

      .btn:hover {

        color: #FFF;

      }

      .btn-type-left, .btn-type-right {

        height: 7.85rem;

        line-height: 7.85rem;

      }

      .btn-type-top::after {

        content: '';

        width: 100%;

        height: 0.3rem;

        position: absolute;

        top: 0;

        left: 0;

        background-color: #000000;

        transition: all 0.4s;

        z-index: -1;

      }

      .btn-type-top:hover::after {

        content: '';

        width: 100%;

        height: 100%;

        position: absolute;

        top: 0;

        left: 0;

        background-color: #000000;

      }

      .btn-type-right::after {

        content: '';

        width: 0.3rem;

        height: 100%;

        position: absolute;

        bottom: 0;

        right: 0;

        background-color: #000000;

        transition: all 0.2s;

        z-index: -1;

      }

      .btn-type-right:hover::after {

        content: '';

        width: 100%;

        height: 100%;

        position: absolute;

        bottom: 0;

        right: 0;

        background-color: #000000;

      }

      .btn-type-bottom::after {

        content: '';

        width: 100%;

        height: 0.3rem;

        position: absolute;

        bottom: 0;

        left: 0;

        background-color: #000000;

        transition: all 0.4s;

        z-index: -1;

      }

      .btn-type-bottom:hover::after {

        content: '';

        width: 100%;

        height: 100%;

        position: absolute;

        bottom: 0;

        left: 0;

        background-color: #000000;

      }

      .btn-type-left::after {

        content: '';

        width: 0.3rem;

        height: 100%;

        position: absolute;

        bottom: 0;

        left: 0;

        background-color: #000000;

        transition: all 0.2s;

        z-index: -1;

      }

      .btn-type-left:hover::after {

        content: '';

        width: 100%;

        height: 100%;

        position: absolute;

        bottom: 0;

        left: 0;

        background-color: #000000;

      }

    </style>

    <body>

      <!-- 页面容器 -->

      <div class="page-wrapper">

        <div class="btn btn-type-left">查看详情 Left</div>

        <div>

          <div class="btn btn-type-top">查看详情 Top</div>

          <div class="btn btn-type-bottom">查看详情 Bottom</div>

        </div>

        <div class="btn btn-type-right">查看详情 Right</div>

      </div>

    </body>

</html>

往期回顾

【全】一、CSS动画大全之按钮组【a】

【全】CSS动画大全之按钮【b】的更多相关文章

  1. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  2. 原生html，css+js写下载按钮有提示动画效果的落地页

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

  3. 这样使用 GPU 渲染 CSS 动画（转）

    大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...

  4. Web高性能动画及渲染原理（1）CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  5. 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  6. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  7. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  8. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  9. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  10. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

随机推荐

  1. pytest-parallel 多线程执行用例，访问pymysql数据库，遇到的问题

    遇到的问题 1.pymysql.err.ProgrammingError: execute() first 2.File "D:\xxx\python3.8\lib\site-package ...

  2. 玉炜的iOS开发规范(12.14更新)

    苹果账号篇 1.新建一个新项目之后的bundle ID无论是否定没定,上架的账号如果没定,最好先写一个绝对用不上的名字,因为这个bundle ID一经确定会被绑定在当前你的苹果账号上,如果正好绑定的是 ...

  3. JS的JSON.parse问题

    这个问题,已经有非常多人说过,而且由来已久. 大家都提供了不少的解决方法,但是都不够彻底. 一)现在是什么情况 1.使用SpringMvc+ModelAndView+jsp传递值 由于业务需要,通过m ...

  4. 降维（二）PCA

    PCA 主成成分分析(Principal Component Analysis,PCA)在目前是非常热门的降维算法.首先它找到一个最接近数据的超平面,然后将数据投影到这个平面上. 保持方差(Prese ...

  5. 半夜被慢查询告警吵醒，limit深度分页的坑

    分享是最有效的学习方式. 博客:https://blog.ktdaddy.com/ 故事 梅雨季,闷热的夜,令人窒息,窗外一道道闪电划破漆黑的夜幕,小猫塞着耳机听着恐怖小说,辗转反侧,终于睡意来了,然 ...

  6. QT 使用相对路径读取.txt文件

    QT可以使用QFile来读取.txt文件,具体代码实现如下: 1 #include <QCoreApplication> 2 #include <QString> 3 #inc ...

  7. React Context 的使用

    使用React开发应用程序时,如果多个组件需要共享数据,可以把数据放到父组件中,通过属性向下传递给子组件.但当组件嵌套较深时,两个最底层的组件要想共享数据,那就霜要把数据放到最顶层的组件中,然后再一层 ...

  8. Spring之拦截器和过滤器

    Spring拦截器 拦截器简介 Spring拦截器是一种基于AOP的技术,本质也是使用一种代理技术,它主要作用于接口请求中的控制器,也就是Controller. 因此它可以用于对接口进行权限验证控制. ...

  9. TP5系列 | Queue消息队列

    消费信息如下ThinkPHP5 Queue消息队列 优点 1.Queue内置了 Redis,Database,Topthink ,Sync这四种驱动,本文使用Redis驱动 2.Queue消息队列适用 ...

  10. [oeasy]python00134_[趣味拓展]python起源_历史_Guido人生_ABC编程语言_Tanenbaum

    python 历史 回忆上次内容 颜文字是kaomoji 把字符变成一种图画的方法 一层叠一层 很多好玩儿的kaomoji是一层层堆叠起来的meme   ​   添加图片注释,不超过 140 字(可选 ...