HTML+CSS：飞翔按钮

效果演示

17-飞翔按钮.gif

实现了一个按钮的动画效果，当鼠标悬停在按钮上时，按钮的背景颜色和图标会发生变化，并且图标会旋转45度并向右移动1.2em，同时按钮中的文字也会向右移动5em。当鼠标点击按钮时，按钮会变小并向下移动0.1em。整个效果看起来像是按钮在飞翔或跳跃。

Code

<button>
    <div class="svg-wrapper-1">
        <div class="svg-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="none" d="M0 0h24v24H0z"></path>
                <path fill="currentColor"
                    d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z">
                </path>
            </svg>
        </div>
    </div>
    <span>Send</span>
</button>

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #212121;
}

button {
    font-family: inherit;
    font-size: 20px;
    background: royalblue;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

button span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
}

button svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
    transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

button:hover span {
    transform: translateX(5em);
}

button:active {
    transform: scale(0.95);
}

@keyframes fly-1 {
    from {
        transform: translateY(0.1em);
    }

    to {
        transform: translateY(-0.1em);
    }
}

实现思路拆分

body {
  height: 100vh; /* 设置body高度为视口高度 */
  display: flex; /* 设置body元素为flex布局 */
  justify-content: center; /* 设置flex容器中内容的水平对齐方式为居中 */
  align-items: center; /* 设置flex容器中内容的垂直对齐方式为居中 */
  background-color: #212121; /* 设置body元素的背景颜色为深灰色 */
}

这段代码设置了页面的基本样式，包括高度、居中对齐方式和背景颜色。

button {
  font-family: inherit; /* 设置字体为继承父元素的字体 */
  font-size: 20px; /* 设置字体大小为20像素 */
  background: royalblue; /* 设置背景颜色为蓝色 */
  color: white; /* 设置字体颜色为白色 */
  padding: 0.7em 1em; /* 设置内边距为上下各0.7em，左右各1em */
  padding-left: 0.9em; /* 设置左内边距为0.9em */
  display: flex; /* 设置元素为flex布局 */
  align-items: center; /* 设置flex容器中内容的垂直对齐方式为居中 */
  border: none; /* 设置边框为无边框 */
  border-radius: 16px; /* 设置边框圆角为16像素 */
  overflow: hidden; /* 设置内容溢出隐藏 */
  transition: all 0.2s; /* 设置过渡效果持续时间为0.2秒 */
  cursor: pointer; /* 设置鼠标指针为手型 */
}

这段代码设置了按钮的基本样式，包括字体、字体大小、背景颜色、字体颜色、内边距、边框、边框圆角、溢出隐藏、过渡效果和鼠标指针。

button span {
  display: block; /* 设置元素为块级元素 */
  margin-left: 0.3em; /* 设置左侧外边距为0.3em */
  transition: all 0.3s ease-in-out; /* 设置过渡效果持续时间为0.3秒，缓动函数为ease-in-out */
}

这段代码设置了按钮中的文字样式，包括块级元素、左侧外边距和过渡效果。

button svg {
  display: block; /* 设置元素为块级元素 */
  transform-origin: center center; /* 设置变换原点为中心点 */
  transition: transform 0.3s ease-in-out; /* 设置过渡效果持续时间为0.3秒，缓动函数为ease-in-out */
}

这段代码设置了按钮中的图标样式，包括块级元素、变换原点和过渡效果。

button:hover.svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate; /* 设置鼠标悬停时，动画名称为fly-1，持续时间为0.6秒，缓动函数为ease-in-out，无限循环，交替执行 */
}

这段代码设置了鼠标悬停时，按钮中的图标的动画效果，包括动画名称、持续时间、缓动函数、无限循环和交替执行。

button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1); /* 设置鼠标悬停时，图标向右移动1.2em，旋转45度，放大1.1倍 */
}

这段代码设置了鼠标悬停时，按钮中的图标的变换效果，包括向右移动1.2em，旋转45度，放大1.1倍。

button:hover span {
  transform: translateX(5em); /* 设置鼠标悬停时，文字向右移动5em */
}

这段代码设置了鼠标悬停时，按钮中的文字的变换效果，包括向右移动5em。

button:active {
  transform: scale(0.95); /* 设置鼠标点击时，按钮放大0.95倍 */
}

这段代码设置了鼠标点击时，按钮的变换效果，包括放大0.95倍。

@keyframes fly-1 {
  from {
    transform: translateY(0.1em); /* 设置动画的起始状态，将图标向下移动0.1em */
  }

  to {
    transform: translateY(-0.1em); /* 设置动画的结束状态，将图标向上移动0.1em */
  }
}