CSS3를 사용하여 회전하는 색상 변경 버튼 만들기-CSS 튜토리얼-php.cn

CSS3를 사용하여 회전하는 색상 변경 버튼 만들기

不言

풀어 주다： 2018-07-02 10:17:01

원래의

1929명이 탐색했습니다.

이 글은 주로 CSS3를 사용하여 회전하는 색상 변경 버튼을 소개합니다. 이제 이를 공유합니다. 도움이 필요한 친구들이 이를 참조할 수 있습니다.

방문자들을 다른 페이지로 안내하고 싶으십니까? 하나는 매우 멋지네요. 오늘의 기사는 CSS3를 사용하여 회전, 회전 및 색상 변경 버튼을 만드는 방법을 제안합니다. 페이지에 멋진 버튼을 추가하세요. 오늘의 기사에서는 CSS3를 사용하여 회전하고 색상이 변경되는 버튼을 만드는 방법을 제안했습니다.

회전을 보여주는 CSS3 버튼입니다. HTML부터 시작하겠습니다:

<p> 
<a class="button">旋转按钮</a> 
</p>

로그인 후 복사

이제 CSS:

.button 
{ 
background:#aaa; 
color:#555; 
font-weight:bold; 
font-size:15px; 
padding:10px 15px; 
border:none; 
margin:50px; 
cursor:pointer; 
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; 
-o-transition-property:width,height,-o-transform,background,font-size,opacity,color; 
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s; 
-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color; 
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s; 
transition-property:width,height,transform,background,font-size,opacity; 
transition-duration:1s,1s,1s,1s,1s,1s; 
-webkit-border-radius:5px; 
border-radius:5px; 
box-shadow:0 0 2px rgba(0,0,0,0.5); 
text-shadow:0 0 5px rgba(255,255,255,0.5); 
display:inline-block; /*它是重要为按钮旋转*/ 
}

로그인 후 복사

여기서 핵심 코드는 너비, 높이, 배경, 색상, 투명도 등으로 정의할 수 있는 변환 속성입니다. 이 예에서는 전환 시간 속성에 따라 속성이 매초 변경됩니다.

전환: 불투명도 2초, 배경 1초, 너비 1초, 높이 1초, 글꼴 크기 1초

다음으로 이 코드를 사용하여 요소에 동그라미를 쳐 회전 효과를 실행합니다.

.button:hover 
{ 
-moz-transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-o-transform: rotate(360deg); 
transform: rotate(360deg); 
background:#99A411; 
font-size:30px; 
color:#fff; 
}

로그인 후 복사

요소를 360도 회전하도록 변환합니다. 도 버튼, 완전한 원. 나머지 코드에서는 색상과 글꼴 크기를 변경합니다.

이 게임을 재미있게 즐겨보세요. 어쩌면 재미있는 휴일 버튼을 사용하여 유용하게 만들 수도 있습니다. 어쩌면 버튼을 회전하고 이미지를 다른 것으로 변경하도록 업그레이드할 수도 있습니다. 가능성은 무궁무진합니다

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!