순수 CSS3를 사용하여 중심에서 주변으로 퍼지는 원의 애니메이션 효과 코드 구현-CSS 튜토리얼-php.cn

순수 CSS3를 사용하여 중심에서 주변으로 퍼지는 원의 애니메이션 효과 코드 구현

高洛峰

풀어 주다： 2017-03-16 10:13:46

원래의

2786명이 탐색했습니다.

먼저 간단한 예를 들어보겠습니다. 예:

@keyframes hovertreemove
{
from {top:30px;}
to {top:130px;}
}

효과:
http://hovertree.com/texiao/css3/37/ 1 .htm

은 @keyframes 규칙을 통해 애니메이션을 만들 수 있습니다.

애니메이션은 CSS 스타일 세트를 점진적으로 변경하여 만들어집니다.
애니메이션 중에 이 CSS 스타일 세트를 여러 번 변경할 수 있습니다.
변경이 발생하는 시간을 백분율로 지정하거나 0%와 100%에 해당하는 'from' 및 'to' 키워드를 통해 지정합니다.
0%는 애니메이션 시작 시간이고, 100%는 애니메이션 종료 시간입니다.
최상의 브라우저 지원을 위해서는 항상 0% 및 100% 선택자를 정의해야 합니다.

상하 이동 코드는 다음과 같습니다.

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3使用animation和@keyframes制作动画_何问起</title>
    <meta charset="utf-8" />
    <style>@keyframes hovertreemove{from {top:30px;}to {top:130px;}}
#hovertreekf{
    width:80px;height:80px;
    border:1px solid red;
    position:absolute;
    background:url(http://hovertree.com/themes/hvtimages/smile.png) no-repeat center;
    animation:hovertreemove /*动画样式名称*/
        1s /*动画时间*/
    linear /*线性运动*/
        infinite /*无限播放*/
        alternate/*往返动画*/;}
  a{color:blue;text-decoration:none;}  </style></head><body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">说明</a>
    <p id="hovertreekf"></p></body></html>

로그인 후 복사

원형 확산 이동 코드는 다음과 같습니다.

르레에

위 내용은 순수 CSS3를 사용하여 중심에서 주변으로 퍼지는 원의 애니메이션 효과 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!