按钮上的悬停 3-D 效果是按钮在悬停时看起来朝向用户的效果。这些按钮是使用 HTML 和 CSS 创建的。
方法:为 HTML 对象设置动画的最佳方法是使用 CSS @keyframes并在不同阶段设置过渡。
HTML代码:
- 创建一个 HTML 文件 (index.html)。
- 将提供所有动画效果的 HTML 中的 CSS 文件链接到我们的 HTML。这也放在 标签之间
- 添加两个锚 标记以创建按钮并为它们分配特定的类。
- 再次使用两个锚 标签来创建按钮。我们为它们分配特定的类。
CSS 代码:以下是上述 HTML 代码中使用的“style.css”文件的内容。 CSS 用于为我们的 HTML 页面提供不同类型的动画和效果,使其看起来对所有用户都具有交互性。
- 恢复所有浏览器效果。
- 使用类和 id 为 HTML 元素赋予效果。
- 使用 @keyframes{} 为 HTML 元素提供动画。
/* Restoring browser effects */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body content is same for all
elements so we specify this in
body section */
body {
background-color: #000;
text-align: center;
padding: 20vh;
}
h2 {
text-align: center;
color: aquamarine;
position: absolute;
top: 10vh;
left: 43vw;
}
/* CSS for visited state of the link */
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
position: relative;
transition: all .2s;
margin: 5vh;
}
/* CSS for hover over the link */
.btn:hover {
transform: translateY(-10px);
box-shadow: 0 10px 100px;
}
.btn:active {
transform: translateX(0);
box-shadow: 0 20px 50px;
}
.head_button {
background-color: #fff;
padding: 10px 40px;
border-radius: 70px;
display: inline-block;
animation-name: todown;
animation-duration: 5s;
}
.head_button_2 {
background-color: rgba(214, 200, 3, 0.705);
padding: 10px 40px;
border-radius: 70px;
display: inline-block;
animation-name: todown;
animation-duration: 5s;
color: rgba(13, 105, 13, 0.829);
}
.head_button_3 {
background-color: rgba(172, 16, 16, 0.705);
padding: 10px 40px;
border-radius: 70px;
display: inline-block;
animation-name: todown;
animation-duration: 5s;
color: #000;
}
.head_button_4 {
background-color: rgba(16, 172, 37, 0.705);
padding: 10px 40px;
border-radius: 70px;
display: inline-block;
animation-name: todown;
animation-duration: 5s;
color: aqua;
}
/* This psuedo class defines the
after effects of the link */
.btn::after {
content: '';
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
.head_button::after {
background-color: #fff;
}
.head_button_2::after {
background-color: rgba(131, 15, 15, 0.801);
}
.head_button_3::after {
background-color: rgba(15, 131, 31, 0.801);
}
.head_button_4::after {
background-color: rgba(131, 15, 116, 0.801);
}
.btn:hover::after {
transform: scale(1.5);
opacity: 0;
}
/* Animation that moves the button towards
down when we reload our web page */
@keyframes todown {
0% {
opacity: 0;
transform: translateY(-150px);
}
60% {
opacity: 0.6;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
输出: