이 글은 주로 CSS3를 사용하여 회전하는 색상 변경 버튼을 소개합니다. 이제 이를 공유합니다. 도움이 필요한 친구들이 이를 참조할 수 있습니다.
방문자들을 다른 페이지로 안내하고 싶으십니까? 하나는 매우 멋지네요. 오늘의 기사는 CSS3를 사용하여 회전, 회전 및 색상 변경 버튼을 만드는 방법을 제안합니다. 페이지에 멋진 버튼을 추가하세요. 오늘의 기사에서는 CSS3를 사용하여 회전하고 색상이 변경되는 버튼을 만드는 방법을 제안했습니다.
회전을 보여주는 CSS3 버튼입니다. HTML부터 시작하겠습니다:<p> <a class="button">旋转按钮</a> </p>
.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; /*它是重要为按钮旋转*/ }
다음으로 이 코드를 사용하여 요소에 동그라미를 쳐 회전 효과를 실행합니다.
.button:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); background:#99A411; font-size:30px; color:#fff; }
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!
관련 권장 사항:
CSS를 사용하여 사진 주위를 텍스트로 감싸는 효과 얻기CSS3을 사용하여 원형 진행률 표시줄을 구현하는 방법CSS3을 사용하여 회색조 필터를 작성하여 검은색 및 흰색 사진 효과위 내용은 CSS3를 사용하여 회전하는 색상 변경 버튼 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!