css带水滴的文字样式

最新推荐文章于 2024-03-23 01:03:32 发布

Jimxx

最新推荐文章于 2024-03-23 01:03:32 发布

阅读量181

点赞数 1

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/Jimxx/article/details/128022211

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

水滴在下方下滑并且掉落

html

<div>MAGICCSS</div>

css

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    filter: blur(3px) contrast(10);
}

div {
    position: relative;
    width: 640px;
    height: 106px;
    color: #fff;
    font-size: 124px;
    text-align: center;
    margin: 100px auto;
    border-bottom: 10px solid #fff;
    transform: skewY(5deg);
    
    &::before,
    &::after {
        position: absolute;
        content: "";
        bottom : -20px;
        left: 0;
        width: 10px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        transform: translate(0, 0);
        animation: move 7.5s ease-in-out infinite;
    }
    
    &::after {
        animation: move 7.5s ease-in-out 1s infinite;
    }
}

@keyframes move {
    80% {        
        bottom : -30px;
        transform: translate(623px, 0);
    } 93% {
        transform: translate(623px, 3px);
        opacity: 1;
    }100% {
        transform: translate(623px, 150px);
        opacity: 0;
    }
}