【编程案例练习】HTML+CSS3 按钮悬停网页特效

HTML+CSS3 实现按钮悬停网页特效

第一步

    <div class="container">
        <a href="#">
            <span>Button</span>
            <span>Button</span>
        </a>
        <a href="#">
            <span>Button</span>
            <span>Button</span>
        </a>
    </div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* IE盒模型 */
    font-family: '微软雅黑', sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center; /* 在主轴上的对齐方式: 位于容器的中心 */
    min-height: 100vh; /* 设置元素的最小高度 */
    background: #000;
}

PS：justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

---

第二步

添加CSS

.container {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.container a {
    position: relative;
    width: 150px;
    height: 55px;
    text-align: center;
    line-height: 55px;
    margin:10px;
    text-transform: uppercase; /* 改变元素中的字母大小写:这里定义仅有大写字母 */
    background: #191919;
    color: #fff;
    text-decoration: none; /* 没有文本装饰,这里去掉下划线 */
    letter-spacing: 2px;
    /* overflow: hidden; */ 
}

---

第三步

添加CSS样式

.container a span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transition: 0s ease-in; /* 元素样式从初始状态过渡到终止状态，速度越来越快，呈一种加速状态。这是渐显特效 */
}

.container a:hover span {
    transition: 0.4s ease-in;
    transform: translateY(-100%);
}

鼠标移动到第一个BUTTON时：

鼠标移动到第二个BUTTON时：

---

第四步

添加CSS样式：

.container a::before {
    width: 250px;
    height: 250px;
    background: paleturquoise;
    content: ''; /* 用于定义元素之前或之后放置的生成内容，即250px 250px paleturquoise */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -250px;
    border-radius: 50%;
    transition: 0.4s ease-in;
}

.container a:hover::before {
    bottom: -150px;
}

.container a:nth-child(2)::before {
    bottom: 60px;
}

.container a:nth-child(2):hover::before {
    bottom: -40px;
}

最终实现效果：

鼠标移动到第一个BUTTON时：

鼠标移动到第二个BUTTON时：

---

PS: transform 属性 （部分介绍）
Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

参考下面视频：
https://www.ixigua.com/6818851166034592267/