다섯 가지 일반적인 CSS3 웹 페이지 효과 공유

이 기사에서는 매우 일반적으로 사용되는 CSS3 웹 페이지 효과 5가지를 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

튜토리얼 추천: css 비디오 튜토리얼

첫 번째 효과:

gif 사진을 녹화하면 프레임이 떨어지기 때문에 매끄럽지 않고 멈춘 것처럼 보이지만 실제로는 그렇습니다. 효과는 꽤 좋고 좀 더 유연합니다.

html 코드:

<span class="shake">弹</span>

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);
    }
}

어젯밤 누군가의 개인 블로그 웹사이트에서 맨 위로 이동 버튼의 플로팅 효과를 보았는데 꽤 흥미로웠지만 효과는 다를 수 있습니다. 나보다 낫으니 한 번 시도해 보는 게 좋을 거야.

두 번째 효과:

사실 이 효과는 현재 많은 온라인 웹사이트에서 사용하고 있으며, CSS3를 사용하든 jQuery를 사용하든 효과를 얻을 수 있습니다. 그래서 여기서는 CSS3를 사용하여 이를 달성했습니다.

html code:

<input class="search" type="text" placeholder="搜索...">

CSS code:

.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;
}

보통은 옆에 버튼이 있을텐데 여기서는 하지 않겠습니다.

세 번째 효과:

이 효과는 매우 일반적으로 사용되며 개인 웹사이트에서 더 자주 사용됩니다.

html 코드:

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

css 코드:

.banner{
    width:234px;
    height:34px;
    border-radius:34px;
    position:absolute;
    top:400px;
    left:200px;
}
.banner 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;
}
.banner a:hover + span{
    -webkit-transform:rotate(360deg);
    opacity:1;
}
.banner span{
    display:inline-block;
    width:auto;
    padding:0 20px;
    height:34px;
    line-height:34px;
    background:lightblue;
    border-radius:34px;
    text-align: center;
    position:absolute;
    color:#fff;
    text-indent:25px;
    opacity:0;
    -webkit-transform-origin:8% center;
    -webkit-transition:all 1s;
}

네 번째 효과:

이 프롬프트 효과는 더 일반적으로 사용되며 많은 웹사이트에서 사용됩니다. ㅋㅋㅋ 관심이 있으시면 살펴보세요 여기 있습니다:

html 구조:

<div>
    <a>博</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);
}

결론

그래서 이번에는 몇 가지 장치를 공유하겠습니다. 시간이 나면 더 좋은 것을 공유해 보세요. 더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오

를 방문하세요! !

위 내용은 다섯 가지 일반적인 CSS3 웹 페이지 효과 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!