1. Python技术站首页
  2. css

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

• css
yizhihongxing

下面是详细的攻略：

背景知识

在实现 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日

相关文章

  • 详解织梦dedecms5.7 无限级多级栏目菜单调用方法

    “详解织梦dedecms5.7 无限级多级栏目菜单调用方法”是指在使用dedecms5.7时，如何在网站中调用无限级多级栏目菜单。下面是详细的攻略过程： 1. 准备工作 在调用无限级多级栏目菜单前，需要先创建并设置好网站的栏目结构。需要注意的是，对于多级栏目结构，每个栏目必须都要有自己的“栏目缩略词”，这将在后面的调用过程中起到重要作用。 2. 编写调用菜单…

    css 2023年6月9日
    00

  • Bootstrap CSS布局之表格

    下面就是Bootstrap CSS布局之表格的完整攻略。 Bootstrap CSS布局之表格 Bootstrap是一个流行的CSS框架, 提供了大量预设的CSS样式和JavaScript插件。其中，表格是Bootstrap提供的一种常用的布局方式。Bootstrap表格具有响应式设计，能够适应各种大小的屏幕，如手机和平板电脑。 一个简单的表格 下面是一个简…

    css 2023年6月10日
    00

  • bootstrap suggest搜索建议插件使用详解

    Bootstrap Suggest 搜索建议插件使用详解 Bootstrap Suggest 是一款基于Bootstrap架构的简单易用的搜索建议插件，可以帮助用户更快速、准确地找到他们想要的结果。本文将详细介绍 Bootstrap Suggest 的使用方法，以及如何快速集成到网站中。 1. 基本用法 1.1 引入相关文件 在使用 Bootstrap Su…

    css 2023年6月10日
    00

  • jquery实现的随机多彩tag标签随机颜色和字号大小效果

    首先，我们需要了解什么是jQuery。jQuery是一种流行的JavaScript库，它可以使在网页上运行的JavaScript代码更加容易和简单。它提供了一系列便捷的API来操作HTML、CSS和DOM等内容，同时具备跨浏览器兼容性、高效性等优点。 针对“jquery实现的随机多彩tag标签随机颜色和字号大小效果”，我们可以采取以下步骤： 1. 创建一个H…

    css 2023年6月9日
    00

  • JavaScript实现单英文金山打字通

    Javascript实现单英文金山打字通可以分为以下几个步骤： 构建HTML页面结构，包括输入框和文本框。 <!DOCTYPE html> <html> <head> <title>打字练习</title> </head> <body> <h1>打字练习</…

    css 2023年6月11日
    00

  • HTML的select控件美化

    下面是关于“HTML的select控件美化”的完整攻略： 1. 为什么需要美化select控件？ HTML的默认select控件外观非常简单，通常被认为不够美观，难以定制，很难与某些设计风格和品牌视觉效果相匹配。针对这些问题，我们可以使用各种技术对select控件进行美化，提高用户体验和界面设计的整体美感。 2. 使用CSS来美化select控件 使用CSS…

    css 2023年6月9日
    00

  • JavaScript事件委托

    JavaScript 事件委托是一种常用的编程技巧，它可以避免为每个元素添加事件监听器。事件委托背后的思想是，将事件监听器添加到其父元素上，而不是为每个子元素添加监听器。当事件触发时，事件将从子元素冒泡到其父元素，由父元素的事件监听器处理。这种技巧可以减少代码量，提高性能。 以下是一个完整的 JavaScript 事件委托攻略： 1. 理解事件冒泡和捕获 事…

    Web开发基础 2023年3月30日
    00

  • CSS中使用inline-block来进行居中的示例

    下面详细讲解一下“CSS中使用inline-block来进行居中的示例”的完整攻略。 确定html结构 首先，需要为元素确定合适的 html 结构。在示例中，我们使用一个 div 元素包裹内部要居中的内容。并给包裹元素设置一个唯一的 class 名称，为 .center。 <div class="center">这里是需要居中…

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