css3特效动态图

CSS3是一种用于网页美化的语言，它可以帮助网页开发人员实现各种酷炫的特效效果。其中特效动态图更是一种非常流行的效果类型，下面我们来看一些常见的CSS3特效动态图。

// 1. 充电动画.loading {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
}
.loading:before,.loading:after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #16a085;
}
.loading:before {
    animation: spin 2s linear infinite;
}
.loading:after {
    animation: spin 1s linear reverse infinite;
}
@keyframes spin {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
// 2. 缩放按钮.btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #16a085;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
}
.btn:hover {
    transform: scale(1.2);
}
// 3. 转场动画.fadeIn {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}
.fadeOut {
    animation: fadeOut 0.5s ease-in-out forwards;
}
@keyframes fadeIn {
0% {
    opacity: 0;
    transform: scale(0.8);
}
100% {
    opacity: 1;
    transform: scale(1);
}
}
@keyframes fadeOut {
0% {
    opacity: 1;
    transform: scale(1);
}
100% {
    opacity: 0;
    transform: scale(0.8);
}
}
    

以上就是几个常见的CSS3特效动态图，它们能让网页更加酷炫和有趣，增加用户的互动体验，这也是CSS3在网页美化方面不可或缺的重要作用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！