CSS3按钮鼠标悬浮实现光圈效果源码


Posted in HTML / CSS onSeptember 11, 2016

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

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

3、直接上代码

复制代码
代码如下:

<!doctype html>
<html lang="en">
<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="#" 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 、显示效果

CSS3按钮鼠标悬浮实现光圈效果源码

5、总结:
人有时候就要不断的折腾去研究发现,才能够体会到下一秒的愉悦。以上就是这篇文章的全部内容,希望对大家的学习或者工作带来一定的帮助。

HTML / CSS 相关文章推荐
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 #HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 #HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 #HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 #HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 #HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 #HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 #HTML / CSS
You might like
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP模板解析类实例
2015/07/09 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
python使用matplotlib绘制热图
2018/11/07 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Django用户身份验证完成示例代码
2020/04/03 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
政府门卫岗位职责
2014/04/29 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书