Skip to content

[css] 第731天 写一个输入框聚焦时,边框不停地渐变的动画效果 #3822

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第731天 写一个输入框聚焦时,边框不停地渐变的动画效果

3+1官网

我也要出题

Activity

piterzhou

piterzhou commented on Apr 19, 2021

@piterzhou

添加一个类名为changinput的输入框,然后加上以下css代码即可
.changeinput{
border:1px solid black;
outline: none;

    }
    .changeinput:focus {
        animation: keepchange 3s infinite;
    }
    @keyframes keepchange {
        0%   {border-color:lightblue;}
        25%  {border-color:lightcoral;}
        50%  {border-color:lightgoldenrodyellow;}
        75%  {border-color:lightslategray;}
        100% {border-color:lightgreen;}
    }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@piterzhou

        Issue actions

          [css] 第731天 写一个输入框聚焦时,边框不停地渐变的动画效果 · Issue #3822 · haizlin/fe-interview