效果预览

代码

<!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. Lru-k在Rust中的实现及源码解析

    LRU-K 是一种缓存淘汰算法,旨在改进传统的LRU(Least Recently Used,最近最少使用)算法的性能.将其中高频的数据达到K次访问移入到另一个队列进行保护. 算法思想 LRU-K中的 ...

  2. Nuxt3 的生命周期和钩子函数（二）

    title: Nuxt3 的生命周期和钩子函数(二) date: 2024/6/26 updated: 2024/6/26 author: cmdragon excerpt: 摘要:本文深入介绍了Nu ...

  3. 扫描版PDF目录制作指南

    目前网上找到的扫描版的电子书往往没有目录,这使得阅读变得非常困难.本文总结我的经验,介绍快速制作扫描版 PDF 目录的方法,以便更轻松地阅读扫描版电子书. 本文首先介绍手动制作目录的方法,之后介绍如何 ...

  4. 粗枝大叶记录一下java9模块化改造一个项目的过程(Jigsaw)

    假设项目结构如下: 其中的依赖关系为 我实际用的jdk是17 1. common模块创建描述文件,在common的src/main/java下创建module-info.java, 内容默认 /** ...

  5. react-devtools安装以及使用中的问题

    使用react框架开发的小伙伴肯定都想使用想vue-devtools开发工具一样,可以看见组件的状态,和当前组件里的props,data等等. 当然react也有一个开发者工具,现在废话少说,开始安装 ...

  6. 洛谷P1020

    又是一道做的很麻的题,准确来说感觉这不是一道很好的dfs题,没有体现dfs的一些特点 反而感觉是在考察dp,刚开始也是按照我的思路交了3次都没过 原本以为所选的数应该都是由上一次的最大值推出来的,后面 ...

  7. Mysql实现主从复制（一主双从）

    一.环境介绍 LNMP(centos7,mysql5.6) vmware workstation pro配置了3个虚拟机,均安装了LNMP环境: master:  192.168.0.105 slav ...

  8. [PHP]用socket写一个简单的WEB服务器

    今天我就要把我的最新研究成果展示看看,而不玩ARMBIAN了,因为刷了两台S905L3的发现一点挑战都没有 从0.2写WEB服务难啊,你需要懂HTTP协议和SOCKET!不过有经验我们很快就可以搭建一 ...

  9. [oeasy]python0136_接收输入_input函数_字符串_str

    输入变量 回忆上次内容 上次研究了 一行赋值多个变量 a = b = 5 a, b = 7, 8   还研究了 标识符的惯用法 python使用的是 snake_case蛇形命名法 用下划线 分隔开小 ...

  10. fasterWhisper和MoneyPrinterPlus无缝集成

    MoneyPrinterPlus之前使用的是各种云厂商的语音识别服务来进行语音的视频和字幕的识别工作. 但是很多小伙伴说云服务用不起. 那么没办法,MoneyPrinterPlus上线最新版本,支持f ...