>  기사  >  웹 프론트엔드  >  CSS3 애니메이션 @keyframes 그림이 커지고 작아지고 색상이 변경됩니다.

CSS3 애니메이션 @keyframes 그림이 커지고 작아지고 색상이 변경됩니다.

青灯夜游
青灯夜游앞으로
2018-10-10 16:45:143380검색

회사 공식 홈페이지에서 작업할 때 게임의 정적 페이지 작성을 돕기도 했습니다. 오늘의 제품에서는 버튼을 강조하려면 색상이 바뀌고 점점 작아져야 합니다. 인터넷에 검색해 보니 호흡등과 기타 케이스에 대한 작은 다모가 적혀 있었는데, 좀 신기해 보이네요.

html:

<body>
    <p class="color"></p>
    <img class="change" src="img/dongtai.png"/>
</body>

원칙은 다음과 같습니다. 몸체는 상대적으로 위치하며, .change는 절대적으로 .color 위에 위치하며, 크기는 .color와 동일하며, 첫 번째 새로 고침 후 색상이 먼저 표시되고 .change의 투명도가 동시에 변경됩니다. 동시에 너비: 308px, 높이 202px -> 너비로 변경됩니다. 358px, 높이 174px.

요약: 위 내용은 이 글의 전체 내용이며, 모든 분들의 공부에 도움이 되길 바랍니다. 더 많은 관련 튜토리얼을 보려면

CSS3 비디오 튜토리얼

을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 동영상 튜토리얼

CSS 온라인 매뉴얼#🎜 🎜 #

CSS3 온라인 설명서

div/css 그래픽 튜토리얼

css3 특수 효과 코드 모음

위 내용은 CSS3 애니메이션 @keyframes 그림이 커지고 작아지고 색상이 변경됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제