순수 CSS3를 사용하여 중심에서 주변으로 퍼지는 원의 애니메이션 효과 코드 구현
- 高洛峰원래의
- 2017-03-16 10:13:462832검색
먼저 간단한 예를 들어보겠습니다. 예:
@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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3에서 전환과 애니메이션의 차이점 소개다음 기사：CSS3에서 전환과 애니메이션의 차이점 소개