CSS3 원 확대 및 축소 루프 애니메이션의 효과 코드 공유-CSS 튜토리얼-php.cn

CSS3 원 확대 및 축소 루프 애니메이션의 효과 코드 공유

零下一度

풀어 주다： 2017-05-12 13:59:52

원래의

6411명이 탐색했습니다.

CSS3 서클애니메이션확대 및 축소루프 애니메이션 효과, 특수 효과는 간단하고 아름답습니다. 소리도 좋고, 관심 있는 친구들은 살펴볼 수 있습니다

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3圆圈动画放大缩小循环动画效果</title>
<style>

.dot {
margin:150px auto;
width:200px;
height:200px;
background-color:#E3E3E3;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
-webkit-animation-name:&#39;ripple&#39;;/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
@keyframes ripple {
0% {

opacity:0.35;
width:190px;
height:190px;
}
100% {
opacity: 0.2;
width:250px;
height:250px;
}
}
</style>
</head>

<body>
	<p class="dot"></p>
</body>
</html>

로그인 후 복사

[관련 추천]

1. 무료 CSS 온라인 동영상 튜토리얼

2. CSS 온라인 매뉴얼

3. php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼

위 내용은 CSS3 원 확대 및 축소 루프 애니메이션의 효과 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!