1. Python技术站首页
  2. css

巧用HTML5给按钮背景设计不同的动画简单实例

• css

下面是详细的攻略：

背景知识

在实现 HTML5 按钮背景动画之前，有些基础知识需要了解：

CSS3 伪类

CSS3 中的伪类可以让我们在某些元素状态改变的时候（如：鼠标 hover、点击等），加入一些特殊的样式。常见的伪类有以下几种：

  • :hover - 鼠标悬停在该元素上时
  • :active - 点击该元素时（鼠标还没松开时）
  • :focus - 该元素被选中（例如：表单控件）

CSS3 过渡

过渡可以在 CSS 属性发生变化时，通过动画实现平滑的过渡效果。常见的属性包括：background、height、width、top、left 等。

CSS3 动画

动画是一种更加复杂的 CSS3 特性。与过渡相比，动画更加动态、多样，可以定义更多的关键帧。

步骤说明

第一步：创建 HTML 按钮

首先需要在 HTML 文件中编写一个按钮，作为后续样式与动画示范的素材。

<button class="btn">我是一个按钮</button>

第二步：设置按钮样式

对按钮进行样式设置（如：背景、字体、圆角等），设置的样式需要支持伪类与动画过渡。

.btn {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background-color: #c57fc5;
  padding: 8px 20px;
  border: none;
  border-radius: 5px;
  outline: none;
  transition: all 0.3s;
}

第三步：添加鼠标悬浮样式

通过在按钮上应用伪类，设置鼠标悬停（:hover）时的样式。

.btn:hover {
  background-color: #e8a2e8;
}

第四步：添加鼠标点击样式

通过在按钮上应用伪类，设置鼠标点击（:active）时的样式。这里我们让按钮在被点击时，背景色变为不透明的深紫色；同时将文本内容略作上移，模拟按钮被压下的效果。

.btn:active {
  background-color: #6a2d6a;
  color: #fff;
  transform: translateY(1px);
  box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.2);
}

第五步：添加波浪动画

为按钮添加一些动画效果。这里我们选择使用 SVG 实现波浪效果，需要在 HTML 文件中添加相应的 SVG 代码。

<div class="waveWrapper">
  <svg
    class="waves"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 24 150 28"
    preserveAspectRatio="none"
    shape-rendering="auto"
  >
    <defs>
      <path
        id="wavePath"
        d="M-160 44c30 0 
        58-18 88-18s
        58 18 88 18 
        58-18 88-18 
        58 18 88 18 
        v44h-352z"
      />
    </defs>
    <g class="parallax">
      <use
        xlink:href="#wavePath"
        x="48"
        y="0"
        fill="rgba(255,255,255,0.7"
      />
      <use
        xlink:href="#wavePath"
        x="48"
        y="3"
        fill="rgba(255,255,255,0.5)"
      />
      <use
        xlink:href="#wavePath"
        x="48"
        y="5"
        fill="rgba(255,255,255,0.3)"
      />
      <use xlink:href="#wavePath" x="48" y="7" fill="#fff" />
    </g>
  </svg>
</div>

SVG 代码的解释：

  • wavePath： SVG 路径，表示波浪的形态；
  • parallax： 是一个 SVG 组（<g>），用于将波浪中的三个图层分组。

然后在 CSS 文件中添加代码，设置按钮的背景为白色（或其他颜色），调整按钮与波浪的间距，使波浪的位置居于按钮背景的下方。

.btn {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background-color: #ffffff;   /* 背景为白色，与波浪配合使用 */
  padding: 8px 20px;
  border: none;
  border-radius: 5px;
  outline: none;
  transition: all 0.3s;
  position: relative;         /* 设为 relative，为后续波浪设置绝对定位做准备 */
}

.waveWrapper {
  overflow: hidden;           /* 禁止波浪超出按钮区域 */
  width: calc(100% + 2px);    /* 加上2px的边框宽度 */
  position: absolute;         /* 设为绝对定位，覆盖在按钮上面 */
  left: -1px;                 /* button 设置左边框为1px宽，为左边的波浪留出空间 */
  bottom: -1px;               /* button 设置下边框为1px宽，为下边的波浪留出空间 */
  z-index: -1;                /* 将图层置于下方 */
}

.waves {
  position: absolute;          /* 设为绝对定位，同样为后续波浪设置绝对定位做准备 */
  width: 150%;                /* 给波浪足够的宽度，能让波浪在按钮范围内滚动 */
  height: auto;               /* 图层高度自适应 */
  bottom: -5px;               /* 为了让波浪在按钮范围内滚动，需要它越界一些 */
  left: -25%;                 /* 同理，需要先移出边框的一部分 */
  opacity: 0.5;               /* 设置图层不透明度，越往上就越透明 */
  animation: wave 20s linear infinite;  /* 添加波浪动画（后面会详细讲解） */
}

@keyframes wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }

  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.55);
  }

  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}

至此，HTML5 按钮背景设计不同的动画的简单实例就已经完成了，按钮呈现出了一种波浪效果，同时根据不同的交互状态（悬浮、点击）也呈现出不同样式。

添加扩散动画：

接下来让我们来研究一个更加炫酷的交互效果——扩散动画。

  1. 首先引入 JS 文件（可以直接通过 CDN 引入）：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-tooltip@2.0.1/dist/v-tooltip.min.js"></script>

先通过引入 JaveScript 库（Vue.js 与 tooltip）使得我们可通过 JS 动态地修改 CSS3 属性。

  1. 通过调整按钮 CSS 使得动画效果更加明显：
.btn {
  position: relative;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  padding: 12px 60px;
  background-color: #c57fc5;
  border: none;
  border-radius: 30px;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  /* 线性渐变背景 */
  background-image: linear-gradient(45deg, #c57fc5 0%, #ff6ca2 100%);
  /* 添加过渡动画 */
  transition: background-position 250ms ease-in-out, transform 150ms ease;
  /* 禁止选中 */
  user-select: none;
}

/* 悬浮在按钮上的样式 */
.btn:hover {
  /* 渐变移动点 */
  background-position: 98%;
}

/* 点击过后的样式 */
.btn:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4); /* 点击时添加外阴影 */
}

/* 添加让图标随动画而缩放效果的CSS */
.icon i {
  font-size: 15px;
  transition: transform 150ms ease;
}

.btn:active .icon i { /* 使图标与背景同时缩小 */
  transform: scale(0.8);
}

如果要让扩散动画效果更好，需要为按钮添加三个元素，并设置三个不同的状态：

<!-- 响应扩散动画的三个元素 -->
<div class="ripple-background">
  <div class="circle xxlarge shade1"></div>
  <div class="circle xlarge shade2"></div>
  <div class="circle large shade3"></div>
</div>
  1. 通过 Vue.js 与 tooltip 库给按钮添加 Google 风格的 tooltip：
<!-- 给按钮添加 tooltip -->
<button class="btn tooltip" v-tooltip="'Add'">
  <i class="material-icons icon">add</i>
  Add Friend
</button>
  1. 最终的 CSS 样式文件：
/* 引入 CSS3 特性库 */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://cdn.jsdelivr.net/npm/v-tooltip@2.0.1/dist/v-tooltip.min.css");

html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #1c222b;
}

/* 添加动态的线条 */
.ripple-background {
  display: none;
  opacity: 0;
  position: absolute; /* 设为绝对定位 */
  z-index: -1; /* 将图层置于下方 */
  border-radius: 50%; /* 因为圆心在右下方，所以需要使用一半的圆角 */
  -webkit-transform: scale(0); /* 给按钮添加一个原始的 CSS3 动画效果 */
          transform: scale(0);
}

@media (prefers-reduced-motion: reduce) {
  .ripple-background,
  .friend {
    transform: none !important; /* 如果用户使用了减少动画 motion 的功能，则不使用动画 */
  }
}

.shade1 {
  background-color: rgba(255, 255, 255, 0.25);
}

.shade2 {
  background-color: rgba(255, 255, 255, 0.15);
}

.shade3 {
  background-color: rgba(255, 255, 255, 0.05);
}

/* 添加动态的阴影(动画效果会比之前的更流畅) */
.btn:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.friend {
  padding: 14px;
  margin-top: -60px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  background-color: #fcfcfc;
  color: #555;
  animation: pop 300ms ease forwards;
}

.material-icons {
  margin-right: 5px;
}

@keyframes pop {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }

  80% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

/* 添加波浪效果 */
.btn {
  position: relative;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  padding: 12px 60px;
  background-color: #c57fc5;
  border: none;
  border-radius: 30px;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  background-image: linear-gradient(45deg, #c57fc5 0%, #ff6ca2 100%);
  transition: background-position 250ms ease-in-out, transform 150ms ease;
  user-select: none;
}

.btn:hover {
  background-position: 98%;
}

.btn:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.icon i {
  font-size: 15px;
  transition: transform 150ms ease;
}

.btn:active .icon i {
  transform: scale(0.8);
}

.tooltip {
  position: relative;
  margin-top: -10px;
  z-index: 2;
}

.tooltip:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px); /* 在按钮正下方 的五像素处 */
  display: block;
  width: 0px;
  height: 0px;
  margin-left: -6px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #fff;
  border-width: 6px;
}

.tooltip:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px); /* 在按钮正下方 的10像素处 */
  transform: translateX(-50%);
  display: block;
  padding: 5px 8px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  background-color: rgba(51, 51, 51, 0.8);
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
}

.tooltip:hover:after {
  opacity: 1;
}

至此，使用 HTML5 巧妙设计的两个按钮动画就介绍完毕了，如果你想详细了解更多的 HTML5 动画技巧，建议多多学习相关教程。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：巧用HTML5给按钮背景设计不同的动画简单实例 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • 一列固定宽度布局和背景图片绝对定位

    一列固定宽度布局和背景图片绝对定位的完整攻略如下。 设置容器宽度 首先，我们需要设置容器的宽度。这可以使用CSS中的width属性进行设置。例如，我们可以将容器的宽度设置为960像素： .container { width: 960px; } 添加背景图片 接下来，我们需要添加背景图片。这可以使用CSS中的background-image属性进行设置。例如，…

    css 2023年6月9日
    00

  • css浮动中避免包含元素高度为0的4种解决方法

    当使用CSS浮动时，有时会遇到元素包含的内容高度为0的情况，这在页面布局中是非常不可避免的。为了解决这个问题，下面介绍四种解决方法。 1. 使用clear属性清除浮动 我们可以使用clear属性清除浮动，强制使元素脱离浮动元素的影响。这个属性有两个取值：left和right，用于清除左侧或右侧的浮动。在需要清除的元素上添加此属性即可。 示例代码 <di…

    css 2023年6月10日
    00

  • CheckBoxList两列并排编译为表格显示具体实现

    下面是详细讲解“CheckBoxList两列并排编译为表格显示”的攻略： 1. 理解需求 在实现“CheckBoxList两列并排编译为表格显示”的功能之前，首先我们需要明确需求。在本次需求中，我们需要将CheckBoxList控件中的选项（字符串）按照两列并排的方式编译为表格进行显示。具体来说，我们需要完成以下步骤： 从数据库或其他数据源中获取选项的列表数…

    css 2023年6月10日
    00

  • jQuery iScroll.js 移动端滚动条美化插件第1/5页

    jQuery iScroll.js 移动端滚动条美化插件攻略 什么是iScroll.js插件 iScroll.js是一款轻量级的移动端滚动条美化插件，它基于jQuery库，可以快速地创建一个美观而且功能强大的滚动容器。相较于原生的滚动条，它具有更好的定制性和易用性，能够提高用户体验。 安装iScroll.js插件 你可以在下载iScroll.js插件压缩文件…

    css 2023年6月10日
    00

  • JavaScript中获取高度和宽度函数总结

    下面是详细讲解“JavaScript中获取高度和宽度函数总结”的完整攻略： 获取元素的高度和宽度 获取元素的高度和宽度有多种方式，下面将介绍常用的四种方法。 1. offsetWidth 和 offsetHeight 属性 元素的 offsetWidth 和 offsetHeight 属性可以分别获取元素的宽度和高度，包括内边距、边框和滚动条（如果有）。 l…

    css 2023年6月10日
    00

  • jquery实现漂浮在网页右侧的qq在线客服插件示例

    下面是详细讲解“jquery实现漂浮在网页右侧的qq在线客服插件示例”的完整攻略。 一、插件的实现过程 准备工作 创建一个HTML文件，引入jquery文件和插件的css和js文件。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &…

    css 2023年6月10日
    00

  • 只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)

    下面我就来详细讲解这篇文章中的“只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)”的完整攻略。 1. 确定需求和目标 在开始制作前，我们首先需要明确我们要实现的功能和效果。在这篇文章中，我们的目标是制作一个便签贴特效，这个特效需要包含以下几个要素： 一个可拖拽的便签贴 点击便签贴时，弹出一个模态框，用于编辑便签内容 点击模态框中的保存按钮后，保…

    css 2023年6月9日
    00

  • 详解html5 canvas 微信海报分享（个人爬坑）

    首先我们需要了解HTML5 Canvas以及微信海报分享的相关知识，然后根据文章中的攻略，进行实操和调试，最终完成自己的微信海报分享。 HTML5 Canvas简介 HTML5的canvas元素是用于在网页上绘制图像的标签，通过使用Javascript API，我们可以在Canvas上绘制不同类型的图像，包括但不限于圆形、线条、文本、图片等。 微信海报分享的…

    css 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部