리플 애니메이션
관련 속성 CSS 애니메이션의 특성과 배경이 응용 프로그램에서.
: 그것은 가치 속담이 코드 줄은 다음과 같은 코드로 작성되었습니다입니다 필터 : 알파 (불투명도 = 0 ~ 100) 브라우저 호환성 문제로 주어진다.
IE는 개인 속성 필터를 사용하여 알파 (불투명도), 모즈 개인 속성 -moz 불투명도를 이용하여 가정, 표준 속성이 불투명도 (CSS 3, 모즈 가족 지지부 CSS3). 투명도 값 후 또는) 사실, 100보다 큰 비율이 0보다 작은 값을 사용하여 소수 비율 (알파 (불투명도))를 사용한다.
원의 왼쪽 상단 모서리가 움직이는지도, 당신은 내 블로그 주소 링크를 클릭 할 수 있습니다.
코드는 다음과 같습니다 :
<! DOCTYPE HTML >
< HTML >
< 머리 >
< 메타 문자 집합 = "UTF-8" >
< 제목 > CSS波纹动画</ 제목 >
< 스타일 >
의 몸 {
배경 : # 000 ;
}
.box {
폭 : 100 % ;
높이 : 600PX ;
배경 : 연회비 ;
}
.vr {
디스플레이 : 블록 ;
폭 : 71px ;
높이 : 71px ;
경계 반경 : 50 % ;
위치 : 절대 ;
왼쪽 : 18px ;
상단 : 22 픽셀 ;
배경 : 98FB98 URL이 (../ imges / new_img / vr.png) 노 반복 왼쪽 상단하지 # ;
배경 사이즈 : 100 % 100 % ;
Z- 색인 : 99 ;
}
.vr_wrap {
배경 : #fff ;
불투명 : 0.7 ;
필터 : 알파 (불투명도 = 70) ;
폭 : 71px ;
높이 : 71px ;
경계 반경 : 50 % ;
위치 : 절대 ;
왼쪽 : 18px ;
상단: 22 픽셀 ;
상자 그림자 : 0 픽셀 0 픽셀 50 픽셀 10px #fbfbfb ;
애니메이션 : mymove 무한 2S ;
/ * 애니메이션 방향 : 대체; * /
경계 반경 : 50 % ;
}
.vr_wrap2 {
배경 : #fff ;
불투명 : 0.9 ;
필터 : 알파 (불투명도 = 90) ;
경계 반경 : 50 % ;
폭 : 71px ;
높이 : 71px ;
경계 반경 : 50 % ;
위치 : 절대 ;
왼쪽 : 18px ;
상단 : 22 픽셀 ;
상자 그림자 : 0 픽셀 0 픽셀 50 픽셀 10px #fbfbfb ;
애니메이션 : mymove1의 무한 2S ;
/ * 애니메이션 방향 : 대체; * /
}
mymove을 @keyframes {
0 % {
상자 그림자 : 0 픽셀 0 픽셀 0 픽셀 2 픽셀 #fff ;
높이 : 71px ;
폭 : 71px ;
}
100 % {
상자 그림자 : 0 픽셀 0 픽셀 0 픽셀 20 픽셀 #fff ;
높이 : 72px ;
폭 : 72px ;
}
100 % {
불투명도 : 0 ;
필터 :알파 (불투명도 = 0) ;
}
}는
mymove1 @keyframes {
0 % {
상자 그림자 : 0 픽셀 0 픽셀 0 픽셀 #fff 2 픽셀 ;
높이 : 71px ;
폭 : 71px ;
}
50 % {
상자 그림자 : 0 픽셀 0 픽셀 0 픽셀 20 픽셀 #fff ;
높이 : 72px ;
폭 : 72px ;
불투명도 :0 ;
}
100 % {
불투명도 : 0 ;
필터 : 알파 (불투명도 = 0) ;
}
}
</ 스타일 >
</ 머리 >
< 몸 >
< DIV 클래스 = "상자" >
< 클래스 = "VR" HREF = "https://www.cnblogs.com/shihaiying/" > </ > < DIV의 클래스 = "vr_wrap" > </ DIV >
DIV의 클래스 = "vr_wrap2" > </ DIV >
</ DIV >
</ 바디 >
</ HTML >
렌더링 :
다음은 리플 애니메이션 CSS 코드 및 렌더링입니다. 구체적인 결과는 코드보기를 복사 할 수 있습니다보고 싶으십니까 물론, 당신은 아름다운 배경 색상과 자신에 대한 링크를 설정할 수 있습니다.
희망이 도움이! ! !