美文网首页
利用css制作颜色过渡的样式

利用css制作颜色过渡的样式

作者: 啊杜杜杜 | 来源:发表于2019-06-18 15:00 被阅读0次

    效果图

    效果图.gif

    html

    <div class="title">vue-cropper</div>
    

    css

    .title{
            display: block;
            text-decoration: none;
            text-align: center;
            line-height: 1.5;
            margin: 20px 0;
            background-image:-webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
            color: transparent;
            -webkit-background-clip: text;
            background-size: 200% 100%;
            animation: slide 5s infinite linear;
            font-size: 40px;
        }
        @keyframes slide {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -100% 0;
            }
        }
    

    相关文章

      网友评论

          本文标题:利用css制作颜色过渡的样式

          本文链接:https://www.haomeiwen.com/subject/xyefqctx.html