CSS3网页常见动态效果……

太过爱你忘了你带给我的痛 2021-07-25 01:07 666阅读 0赞

# CSS3网页常见动态效果…… #

**目录**

CSS3网页常见动态效果……

一、动态背景变色，且有晃动效果

二、输入框伸缩

三、按钮旁边，动态的提示

四、文字环绕效果

--------------------

# 一、动态背景变色，且有晃动效果 #

![2021022310581013.gif][]

html代码：

CSS代码：

.shake{
        width:40px;
        height:40px;
        display:block;
        background:lightgreen;
        border-radius:50%;
        margin:5px;
        color:#fff;
        font-size:24px;
        text-align:center;
        line-height:40px;
        cursor:pointer;
        -webkit-transition:all 0.25s;
    }
    .shake:hover{
        -webkit-animation:shake 0.25s;
        background: lightblue;
    }
    @-webkit-keyframes shake{
        0%,10%,55%,90%,94%,98%,100%{
            -webkit-transform:scale(1,1);
        }
        30%{
            -webkit-transform:scale(1.14,0.86);
        }
        75%{
            -webkit-transform:scale(0.92,1.08);
        }
        92%{
            -webkit-transform:scale(1.04,0.96);
        }
        96%{
            -webkit-transform:scale(1.02,0.98);
        }
        99%{
            -webkit-transform:scale(1.01,0.99);
        }
    }

# 二、输入框伸缩 #

![20210223112717686.gif][]

html代码：

CSS代码：

.search{
        width:80px;
        height:40px;
        border-radius:40px;
        border:2px solid lightblue;
        position: absolute;
        right:200px;
        outline:none;
        text-indent:12px;
        color:#666;
        font-size:16px;
        padding:0;
        -webkit-transition:width 0.5s;
    }
    .search:focus{
        width:200px;
    }

# 三、按钮旁边，动态的提示 #

![20210223113443736.gif][]

html代码：

<div class="banner1">
        <a href="javascript:;">博</a>
        <span>这是我的个人博客</span>
    </div>

CSS代码：

.banner1{
        width:234px;
        height:34px;
        border-radius:40px;
        position:absolute;
        top:400px;
        left:600px;
    }
    .banner1 a{
        display:inline-block;
        width:30px;
        height:30px;
        line-height:30px;
        border-radius:50%;
        border:2px solid lightblue;
        position:absolute;
        left:0px;top:0px;
        background:lightgreen;
        color:#fff;
        text-align:center;
        text-decoration:none;
        cursor:pointer;
        z-index:2;
    }
    .banner1 a:hover + span{
        -webkit-transform:translateX(40px);
        opacity:1;
    }
    .banner1 span{
        display:inline-block;
        width:auto;
        padding:0 20px;
        height:30px;line-height:30px;
        background:lightblue;
        border-radius:30px;
        text-align: center;
        color:#fff;
        position:absolute;
        top:2px;
        opacity:0;
        -webkit-transition:all 1s;
        -webkit-transform:translateX(80px);
    }

# 四、文字环绕效果 #

![20210223114402599.gif][]

HTML结构：

CSS结构：

.wrapper{
        width:100px;
        height:100px;
        background:lightblue;
        border-radius:50%;
        border:2px solid lightgreen;
        position: absolute;
        top:200px;
        left:400px;
        cursor:pointer;
    }
    .wrapper:after{
        content:'你猜';
        display:inline-block;
        width:100px;
        height:100px;
        line-height:100px;
        border-radius:50%;
        text-align:center;
        color:#fff;
        font-size:24px;
    }
    .wrapper:hover .round{
        -webkit-transform:scale(1);
        opacity:1;
        -webkit-animation:rotating 6s 1.2s linear infinite alternate;
    }
    @-webkit-keyframes rotating{
        0%{
            -webkit-transform:rotate(0deg);
        }
        100%{
            -webkit-transform:rotate(180deg);
        }
    }
    .round{
        width:240px;
        height:240px;
        border:2px solid lightgreen;
        border-radius:50%;
        position: absolute;
        top:-70px;
        left:-70px;
        -webkit-transition:all 1s;
        -webkit-transform:scale(0.35);
        opacity:0;
    }
    .round span{
        width:40px;
        height:40px;
        line-height:40px;
        display:inline-block;
        border-radius:50%;
        background:lightblue;
        border:2px solid lightgreen;
        color:#fff;
        text-align:center;
        position:absolute;
    }
    .round span:nth-child(1){
        right:-22px;
        top:50%;
        margin-top:-22px;
    }
    .round span:nth-child(2){
        left:-22px;
        top:50%;
        margin-top:-22px;
    }
    .round span:nth-child(3){
        left:50%;
        bottom:-22px;
        margin-left:-22px;
    }
    .round span:nth-child(4){
        left:50%;
        top:-22px;
        margin-left:-22px;
    }

[2021022310581013.gif]: /images/20210724/eacfc38d3db3477cb5a8df21d667d8b3.png
[20210223112717686.gif]: /images/20210724/5c78af0bf9e14e64b060536f8e8589b8.png
[20210223113443736.gif]: /images/20210724/920e9961b9434b51b0e01316434e077c.png
[20210223114402599.gif]: /images/20210724/d22bac729ff54fccb74ab6cdc0234413.png