HTML+CSS：飞翔按钮

效果演示

实现了一个按钮的动画效果，当鼠标悬停在按钮上时，按钮的背景颜色和图标会发生变化，并且图标会旋转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 */}
}

这段代码定义了一个名为fly-1的动画，包括起始状态和结束状态。在起始状态时，图标向下移动0.1em，在结束状态时，图标向上移动0.1em。这个动画会在鼠标悬停时无限循环执行，交替向下和向上移动图标。