조리개 효과를 얻기 위한 CSS3 버튼 마우스 호버
- 高洛峰원래의
- 2017-03-02 15:40:182426검색
이 기사에서는 CSS3를 사용하여 버튼 및 마우스 서스펜션 조리개 효과를 얻는 방법을 소개하는 예제 코드를 사용합니다.
1. HTML 관련 지식 포인트
HTML(Hypertext Markup Language)은 웹 페이지의 핵심입니다. 먼저 HTML을 두려워하지 마세요. 처음에는 많이 연습해야 하지만 결국에는 스스로 깊이 공부해야 합니다. 간단하게 시작하는 것은 빠르지만 HTML을 잘 배우는 것은 웹 개발자가 되기 위한 기본 조건입니다. .
2. CSS3 관련 지식 포인트
CSS를 활용해 업무 효율을 UP! CSS 튜토리얼에서 우리는 CSS를 사용하여 여러 웹 페이지의 스타일과 레이아웃을 동시에 제어하는 방법을 배웠습니다. 웹 페이지를 아름다운 스타일로 꾸미려면 스타일을 사용해야 합니다. 마스터해야 합니다.
3. 코드를 직접 입력하세요
코드는 다음과 같습니다.
<!doctype html>
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
<!--当前页面的三要素-->
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="吉米">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>CSS3按钮光圈悬浮效果</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";background-color:#000}
ul {
margin: 0 auto;
text-align: center;
margin-top: 80px;
}
li {
display: inline-block;
list-style: none;
margin-right: 50px;
text-align: center;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.button {
position: relative;
font-family: futura, helvetica, sans;
letter-spacing: 1px;
text-transform: uppercase;
background-color: #ffeded;
display: inline-block;
line-height: 60px;
width: 55px;
height: 55px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 60%;
text-decoration: none;
color: #c40000;
-moz-transition: all 275ms cubic-bezier(0.53, -0.67, 0.73, 0.74);
-o-transition: all 275ms cubic-bezier(0.53, -0.67, 0.73, 0.74);
-webkit-transition: all 275ms cubic-bezier(0.53, -0.67, 0.73, 0.74);
transition: all 275ms cubic-bezier(0.53, -0.67, 0.73, 0.74);
}
.button:hover {
background-color: #fff;
-moz-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
-o-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
-webkit-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
}
.button:hover .pus {
opacity: 1;
border: 1px solid #A8CFCB;
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
-webkit-transform: scale(1.15);
transform: scale(1.15);
-moz-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
-o-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
-webkit-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
}
.pus {
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
opacity: 0;
background: none;
border: 1px solid #C56089;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-transition: all 0.3s cubic-bezier(0.53, -0.67, 0.79, 0.74);
-o-transition: all 0.3s cubic-bezier(0.53, -0.67, 0.79, 0.74);
-webkit-transition: all 0.3s cubic-bezier(0.53, -0.67, 0.79, 0.74);
transition: all 0.3s cubic-bezier(0.53, -0.67, 0.79, 0.74);
}
</style>
</head>
<body>
<ul>
<li><a href="#">预约<span></span></a></li>
<li><a href="#">购买<span></span></a></li>
<li><a href="#">支付<span></span></a></li>
</ul>
</body>
</html>요약:
때때로 사람들은 다음 순간의 즐거움을 경험하기 전에 연구하고 발견하기 위해 계속 노력해야 합니다. 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부나 업무에 도움이 되었으면 좋겠습니다.
조리개 효과를 얻기 위한 CSS3 버튼 마우스오버에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.