CSS3按钮鼠标悬浮光圈效果

1 、HTML相关知识点

　 HTML(超文本标记语言)是网页的核心、首先你要学会，不要害怕，HTML很容易学习的，刚开始多记多练，但是到最后还是要自己深入专研，简单的入门是很快，但学好HTML是成为Web开发人员的基本条件。

　　学习资源：
　　HTML Dog (http://htmldog.com/)
　　HTML入门指南 (http://www.w3.org/MarkUp/Guide/)
　　W3C HTML学习教程 (http://www.w3schools.com/html/)

2、CSS3相关知识点

通过使用 CSS 来提升工作效率！在我们的 CSS 教程中，学到如何使用 CSS 同时控制多重网页的样式和布局，如何把一个网页打扮成漂亮的风格就需要用到样式，这个是前端开发必须掌握的一个东西。

学习资源：

W3C CSS3 学习 (http://www.w3school.com.cn/css3/ )

3、直接上代码

<!doctype html>

<html lang="en">

<head>

<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="#" class="button">预约<span class="pus"></span></a></li>

<li><a href="#" class="button">购买<span class="pus"></span></a></li>

<li><a href="#" class="button">支付<span class="pus"></span></a></li>

</ul>

</body>

</html>

4 、显示效果

总结：

人有时候就要不断的折腾去研究发现，才能够体会到下一秒的愉悦。我是一名程序猿，如果你也喜欢互联网，喜欢技术。可以一起学习我微信公众号：资讯酷（zixuncool）