笔记 01 CSS 8种让人眼前一亮的hover效果 发送效果
参考原文
MDN CSS3
MDN align-items
MDN justify-content
MDN length
vw
vh
MDN flex
MDN border-radius
MDN text-transform
MDN font-weight
MDN vertical-align
MDN display-legacy
MDN animation
MDN @keyframes
MDN animation-timing-function
MDN timing-function
MDN transform
MDN translateX
发送效果
css hover 触发 animation + transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>发送效果</title>
</head>
<style>
#send-btn{
/* flex 属性是flex-grow, flex-shrink 和 flex-basis 属性的简写。 */
/* 可以作为弹性长度被引用在CSS Grid（栅格）布局中。 */
/*
随着inline-flex的使用，它将使它适用的元素成为一个flex container（伸缩容器），
而这个元素的每个子元素将成为 flex item（伸缩项目）。
伸缩项目将参与到flex布局中，
所有由CSS Flexible Box Layout Module（CSS伸缩盒布局模型）
定义的属性都能被它们使用。
*/
display: flex;
/* CSS align-items属性
将所有直接子节点上的align-self值设置为一个组。
align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。
*/
align-items: center;
/* CSS justify-content 属性
定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴)
的元素之间及其周围的空间。
*/
justify-content: center;
/* 定义了相对视口长度单位：vw，vh，vmax 和 vmin */
/* vw : 相对于视口的宽度。视口被均分为100单位的vw */
/* vh : 相对于视口的高度。视口被均分为100单位的vh */
/* vmin : 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin */
/* vmax : 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax */
height: 100vh;
}
button {
background: #5f55af;
border: 0;
/* 设置元素的外边框圆角 */
border-radius: 5px;
padding: 10px 30px 10px 20px;
color: white;
/*
text-transform CSS属性指定如何将元素的文本大写。
它可以用于使文本显示为全大写或全小写，
也可单独对每一个单词进行操作。
*/
text-transform: uppercase;
/*
font-weight CSS 属性指定了字体的粗细程度。
一些字体只提供 normal 和 bold 两种值。
*/
font-weight: bold;
}
button svg {
/*
元素会产生一个块元素盒子，
并且像内联盒子一样（表现得更像一个被替换的元素），
可以融入到周围内容中。
*/
display: inline-block;
/*
CSS 的属性 vertical-align 用来指定行内元素（inline）
或表格单元格（table-cell）元素的垂直对齐方式。
*/
vertical-align: middle;
padding-right: 5px;
}
button:hover svg {
/*
CSS animation 属性是
animation-name，animation-duration, animation-timing-function，
animation-delay，animation-iteration-count，animation-direction，
animation-fill-mode 和 animation-play-state
属性的一个简写属性形式。
*/
/*
CSS 支持两种定时函数：
1 立方贝塞尔曲线的子集 cubic-bezier()
2 阶梯函数
这些函数中最有用的是一个关键字，可以很容易地引用它们。
cubic-bezier() 定义了一条
立方贝塞尔曲线（cubic Bézier curve）。
这些曲线是连续的，一般用于动画的平滑变换，
也被称为缓动函数（easing functions）。
*/
/*
ease 此关键字表示定时函数 cubic-bezier(0.25, 0.1, 0.25, 1.0)。
这个函数类似于 ease-in-out，
尽管它在开始时加速地更快，
但在接近中间中，加速已经开始变慢了。
*/
animation: fly 2s ease 1;
}
/*
关键帧 @keyframes
at-rule 规则通过在动画序列中定义关键帧
（或waypoints）的样式来控制CSS动画序列中的中间步骤。
和 转换 transition 相比，
关键帧 keyframes 可以控制动画序列的中间步骤。
*/
/*
CSStransform属性允许你
旋转，缩放，倾斜或平移给定元素。
这是通过修改CSS视觉格式化模型的坐标空间来实现的。
translateX()函数表示在二维平面上水平方向移动元素。
其结果的数据类型是<transform-function>。
*/
@keyframes fly {
0% {
transform: translateX(0%);
}
50% {
transform: translateX(300%);
}
100% {
transform: translateX(0);
}
}
</style>
<body>
<div id="send-btn">
<button>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1599231419440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4155" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
<defs>
<style type="text/css"></style>
</defs>
<path d="M899.6 117c9.9 7.1 13.8 16.7 12 28.5L797.3 831.2c-1.5 8.6-6.3 15.3-14.3 20.1-4.1 2.3-8.8 3.6-13.8 3.6-3.3 0-6.9-0.8-10.7-2.3L556.3 770 448.2 901.8c-5.4 6.9-12.7 10.2-21.9 10.2-3.8 0-7.1-0.6-9.9-1.8-5.6-2.1-10.2-5.5-13.6-10.5-3.4-4.9-5.2-10.3-5.2-16.3V727.7l385.7-472.8-477.2 413-176.3-72.3c-11-4.1-17-12.3-17.8-24.6-0.6-11.9 4.1-20.7 14.3-26.4L869.1 116c4.5-2.7 9.2-4 14.3-4 6 0 11.4 1.7 16.2 5z" fill="#d4237a" p-id="4156"></path>
</svg>
Send
</button>
</div>
</body>
</html>