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日

相关文章

  • html页面高度不固定在不同浏览器下的兼容性设置

    为了确保 HTML 页面在不同浏览器中显示效果一致，需要设置 HTML 页面的高度和宽度。HTML 表示网页的结构，CSS 用于表现网页的样式和布局，在设置页面高度的时候需要关注以下几点： 设置HTML和body标签的高度都为100% html, body { height: 100%; } 设置包含页面的容器的高度 如果网页的内容放在一个固定大小的容器中，…

    css 2023年6月10日
    00

  • 纯css3使用vw和vh实现自适应的方法

    下面我将详细讲解“纯CSS3使用vw和vh实现自适应的方法”的完整攻略。 1. 什么是vw和vh vw和vh是CSS3新增的单位，它们分别表示相对于视窗（Viewport）宽度的1/100和高度的1/100。 其中，Viewport指网页中能够显示内容的区域，包括浏览器窗口和可滚动的区域。 通过使用vw和vh，我们可以直接利用浏览器窗口的宽度和高度计算元素的…

    css 2023年6月10日
    00

  • javascript中window.event事件用法详解

    JavaScript中window.event事件用法详解 什么是window.event事件？ window.event（也称为事件对象）是JavaScript中的一个全局对象，它代表当前用户与浏览器之间的事件。当某个事件（例如，鼠标点击或键盘敲击）发生时，event对象将记录这个事件的各种信息。 如何使用window.event对象？ 访问event对象…

    css 2023年6月9日
    00

  • CSS border三角、圆角图形生成技术详解

    下面是“CSS border三角、圆角图形生成技术详解”的完整攻略。 关于CSS border技术 CSS border技术可以用来制作各种形状的图案，例如三角形、圆角等。在这篇攻略中，我们将重点介绍如何使用CSS border技术来创建三角和圆角图形。 三角形图形的生成 方向性三角形 我们可以使用CSS的border属性来创建方向性三角形，首先创建一个正方…

    css 2023年6月10日
    00

  • IOS React Native FlexBox详解及实例

    欢迎来到IOS React Native FlexBox详解及实例攻略教程。本文将详细讲解React Native中FlexBox布局的使用方法，通过细致的实例说明，帮助读者更好地理解FlexBox布局并灵活应用于实际开发中。 什么是FlexBox FlexBox是一种新的样式布局方式，主要用于在不同尺寸的屏幕上实现自适应效果。在React Native中，…

    css 2023年6月10日
    00

  • 怎么使用dreamweaver制作网页教程 dw建站设计网页

    大家好，本篇教程将详细讲解如何使用Dreamweaver制作网页以及建站设计网页的完整攻略。 准备工作 首先，我们需要准备好以下工具和材料： Dreamweaver软件 浏览器（推荐使用Google Chrome、Firefox、Safari） 文本编辑器（如Notepad++、Sublime Text等） 步骤一：创建新网页 打开Dreamweaver软件…

    css 2023年6月10日
    00

  • 利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）

    下面是利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）的完整攻略。 准备工作 首先，我们需要创建一个HTML文件，并链接上CSS和JS文件。其中，CSS文件用于样式的设置，JS文件用于实现页面的动态效果和交互逻辑。 <!DOCTYPE html> <html> <head> <meta char…

    css 2023年6月9日
    00

  • css 背景半透明最佳实践

    下面是关于“CSS 背景半透明最佳实践”的攻略： 1. 为什么要使用半透明背景？ 在实际的网页设计中，使用半透明背景可以给页面带来细致、柔和、优美的视觉体验，增强用户对页面的美感和舒适感，增强用户对信息的吸引和记忆。同时，在舒适的视觉环境中，用户的体验和使用效果也会有所提升。 2. 如何实现 CSS 背景半透明？ 实现半透明背景需要使用 CSS 的 opac…

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