버튼 위에 마우스를 놓는 효과를 만드는 CSS3-CSS 튜토리얼-php.cn

버튼 위에 마우스를 놓는 효과를 만드는 CSS3

Y2J

풀어 주다： 2017-05-24 10:41:37

원래의

1918명이 탐색했습니다.

이번 글에서는 버튼 특수 효과를 통해 CSS3로 만든 마우스를 주로 소개합니다. 버튼 위에 마우스를 올리면 버튼이 바뀌면서 다이나믹한 효과가 납니다. 아름다운. 필요하신 분들은

을 참고하시면 됩니다. 오늘은 순수 CSS3로 구현된 마우스오버 버튼 특수효과를 가져오겠습니다. 이 버튼은 매우 간단하지만 매우 잘 작동하고 매우 아름답습니다. 렌더링을 살펴보겠습니다.

구현된 코드입니다.

　html 코드:

XML/HTML 코드복사 클립보드에 콘텐츠

<p align="center">
       <p class="contener">
           <p class="txt_button">
               WIFEO</p>
           <p class="circle">
                </p>
       </p>
   </p>

로그인 후 복사

　css3 코드:

CSS 코드콘텐츠 복사 클립보드로

.contener   
{   
  width: 300px;   
  height: 60px;   
  background-color: #00bcd4;   
  line-height: 60px;   
  color: #ffffff;   
  font-weight: 300;   
  font-family: &#39;Roboto&#39;;   
  font-size: 25px;   
  position: relative;   
  overflow: hidden;   
  cursor: pointer;   
  box-shadow:1px 1px 1px #333333;   
}   
.txt_button   
{   
  position: absolute;   
  width: 100%;   
}   
.contener:hover .circle
{   
  -webkit-animation:oblik 0.4s ease-in;   
  -webkit-transform-origin: 50% 50%;   
  -moz-animation:oblik 0.4s ease-in;   
  -moz-transform-origin: 50% 50%;   
  -ms-animation:oblik 0.4s ease-in;   
  -ms-transform-origin: 50% 50%;   
  animation:oblik 0.4s ease-in;   
  transform-origin: 50% 50%;   
  width: 100px;   
  height: 100px;   
  border-radius: 50%;    
}   
@-webkit-keyframes oblik {   
  0% {opacity:1;-webkit-transform:scale(0);}   
  100% {opacity:0;-webkit-transform:scale(5);background-color: #006064;}      
}   
@-moz-keyframes oblik {   
  0% {opacity:1;-moz-transform:scale(0);}   
  100% {opacity:0;-moz-transform:scale(5);background-color: #006064;}      
}   
@-ms-keyframes oblik {   
  0% {opacity:1;-ms-transform:scale(0);}   
  100% {opacity:0;-ms-transform:scale(5);background-color: #006064;}      
}   
@keyframes oblik {   
  0% {opacity:1;transform:scale(0);}   
  100% {opacity:0;transform:scale(5);background-color: #006064;}      
}

로그인 후 복사

[관련 추천]

1. CSS3 무료 동영상 튜토리얼

CSS3에 대한 자세한 설명 선택자 예시

3. CSS3의 콘텐츠 속성 예시에 대한 자세한 설명

CSS3의 10가지 최상위 명령에 대한 자세한 설명

5. 웹디자이너가 CSS3 기술을 어떻게 잘 활용할 수 있는지 간략하게 설명해주세요

위 내용은 버튼 위에 마우스를 놓는 효과를 만드는 CSS3의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!