这篇教程是关于如何使用纯CSS3制作漂亮动画按钮的指南。下面我们来逐步讲解制作五款简单而优美的动画按钮。
实例1:花式按钮
首先,我们需要在一个div容器中创建一个按钮,并使用CSS样式将其设置为圆形,如下所示:
.button {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #fc466b;
color: #fff;
font-size: 1.5rem;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.5s;
}
然后,我们需要使用:hover伪类将按钮的背景色设置为另一个颜色,如下所示:
.button:hover {
background-color: #3fcb67;
}
接下来,在这个div容器中我们需要创建一个span元素,用于放置图标。我们使用CSS样式来创建一个关键帧,然后将这个关键帧应用到span元素,即可实现图标动画效果:
.button span {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
text-transform: uppercase;
animation: icon 1s infinite alternate;
margin-right: 0.5rem;
}
@keyframes icon {
from {
transform: translateY(0);
}
to {
transform: translateY(-10px);
}
}
这样,我们就完成了一个简单的花式按钮。你可以通过调整span元素的动画效果,来增强按钮的吸引力。
实例2:微软Windows图标按钮
这个按钮创意灵感来源于微软Windows的图标。为了实现这个按钮的动画效果,我们需要使用CSS样式在一个div容器中创建两个矩形元素,并在这个div容器上应用hover伪类,如下所示:
.button {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
border-radius: 10px;
background-color: #00c5cd;
color: #fff;
font-size: 1.5rem;
text-transform: uppercase;
cursor: pointer;
&::before,
&::after {
content: "";
position: absolute;
background-color: #fff;
border-radius: 3px;
transition: all 0.5s ease-in-out;
}
&::before {
width: 60%;
height: 5px;
transform-origin: right center;
transform: translateX(-50%) rotateZ(45deg);
}
&::after {
width: 80%;
height: 5px;
transform-origin: left center;
transform: translateX(-50%) rotateZ(-45deg);
}
&:hover::before {
transform: translateX(-50%) rotateZ(-45deg);
width: 80%;
}
&:hover::after {
transform: translateX(-50%) rotateZ(45deg);
width: 60%;
}
}
这样,我们就完成了一个微软Windows图标按钮。你可以通过调整每个矩形元素的大小和角度,来达到不同的动画效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:五款漂亮的纯CSS3动画按钮的实例教程 - Python技术站