效果预览

代码

<!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. WatchDog：一款.NET开源的实时应用监控系统

    项目介绍 WatchDog是一个开源(MIT License).免费.针对ASP.Net Core Web应用程序和API的实时应用监控系统.开发者可以实时记录和查看他们的应用程序中的消息.事件.HT ...

  2. centos7中的nohup和&的用法和区别

    1.&和nohup的区别 &的意思是在后台运行, 意思是说, 当你在执行 ./start.sh & 的时候, 即使你用ctrl C, 那么start.sh照样运行(因为对SIG ...

  3. 1. 介绍一下 CSS 的盒子模型？

    1. 盒模型: 内容(content).填充(padding).边界(margin). 边框(border) 2. 类型: IE 盒子模型.标准 W3C 盒子模型: 3. 两种盒模型的主要区别是:标准 ...

  4. Oracle 锁表查询和解锁方法

    system登录 查询被锁表信息 select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, ...

  5. 历代iPad及Android平板的主要参数对比

    「程序员的备忘录系列」这笔记可是持续更新的哦     逻辑分辨率Point,也就是CSS像素,是进行网页适配的关键,以下是平时整理的一些备忘录数据,可以收藏. 以现在平板的销量,还没有手机的十分之一, ...

  6. OffscreenCanvas-离屏canvas使用说明

    OffscreenCanvas 是一个实验中的新特性,主要用于提升 Canvas 2D/3D 绘图的渲染性能和使用体验.OffscreenCanvas 的 API 很简单,但是要真正掌握好如何使用. ...

  7. Netcode for Entities如何添加自定义序列化，让GhostField支持任意类型？以int3为例（1.2.3版本）

    一句话省流:很麻烦也很抽象,能用内置支持的类型就尽量用. 首先看文档.官方文档里一开头就列出了所有内置的支持的类型:Ghost Type Templates 其中Entity类型需要特别注意一下:在同 ...

  8. AT_agc019_b 题解

    洛谷链接&Atcoder 链接. 题目简述 给定一个字符串 \(A\),可以选择区间 \([i,j]\) 翻转一次,求能得到多少本质不同的字符串.(\(A\) 的长度不超过 \(2 \time ...

  9. 构建基于Java Spring Boot和Uniapp的心理小程序：从零到一的完整指南

    构建基于Java Spring Boot和Uniapp的心理小程序:从零到一的完整指南 前言 大家好,今天我们来聊聊如何使用Java Spring Boot和Uniapp构建一个心理小程序.这个项目不 ...

  10. C# 自定义泛型二维数组

    public class Array2D<T>{ public int Width { get; } public int Height { get; } public T[] Data ...