常用css动画和图形

最新推荐文章于 2024-03-02 11:18:58 发布

LPLIFE

最新推荐文章于 2024-03-02 11:18:58 发布

阅读量322

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/LPLIFE/article/details/106088454

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

若隐若现

@keyframes fadeIn {
    0% {
        opacity: 0; 
    }
    50% {
        opacity: 0.5; 
    }
    100% {
        opacity: 1; 
    }
}

无限循环

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

按钮放大缩小

@keyframes ani_btn {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

顶部滚动

        <div class="tip">
            <div class="text">
                温馨提示温馨提示温馨提示 温馨提示
            </div>
        </div>

.tip {
    widows: 100%;
    overflow: hidden;
}
.text {
    animation: tipani 12s linear infinite;
}
@keyframes tipani {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(90%);
    }
}

以上都是需要循环滚动的,使用infinite：

    animation: name 1s linear infinite;

infinite：指定动画应该播放无限次（永远）
linear：动画从头到尾的速度是相同的。
三角形

.triangle {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent blueviolet transparent;
}