css3探测光圈_CSS3按钮鼠标悬浮光圈效果

1 、HTML相关知识点

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

2、CSS3相关知识点

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

学习资源：

3、直接上代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

html>

CSS3按钮光圈悬浮效果

*{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);

}

• 预约
• 购买
• 支付

4 、显示效果

总结：

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

利用 :before :after伪类实现鼠标悬浮动画效果

1.最近在逛网站的时候,想找一下喜欢的鼠标悬浮效果,避免广告的嫌疑,直接放图了: 2.在实现的时候,如果在直接使用鼠标hover ,transform,进行过渡,不能达到想要的效果,因为同时只能触发一 ...

css3 鼠标悬浮动画效果

CSS3案例

CSS3实现图片鼠标悬浮放大效果

.excerpt .focus a img{ -webkit-transition: all ease .3s; transition: all ease .3s }.excerpt .focus a ...

CSS3实现鼠标悬停扩展效果

我们在做导航标签的时候,有时会出现空间过于拥挤需要隐藏部分内容的情况,所以在这里我自己写了一个鼠标悬停显示扩展内容的效果,如下图所示. 总的来说效果还是比较好实现,但是比较头疼的是三角部分使用了伪元素 ...

Css3 常见鼠标滑过效果集合

1.演示地址: http://yaochuxia.github.io/hover/#

CSS鼠标悬浮DIV后显示DIV外的按钮

昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮. 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题 ...

浅谈CSS和JQuery实现鼠标悬浮图片放大效果

对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

CSS3按钮效果制作

CSS3按钮效果制作 首先附上效果图,按下去有一种下沉的效果, 未按效果 按下去效果 原理:第一个按钮相对比较简单,就直接是一个双重阴影效果,然后鼠标按下去让他的margin-top值为-3px,阴影 ...

10个实用的 CSS3 按钮效果制作教程

人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

随机推荐

转行IT行业的心路历程3

16年丝袜生意很差的一年,老板的态度也不好,大唐本地人太歧视外地人了.而且我干的不开心没有前途,不能体现自我价值,无论你怎么努力. IT技术行业却不是这样,只要你努力肯学习,一定会有回报的. 在16/ ...

R之data.table速查手册

R语言data.table速查手册 介绍 R中的data.table包提供了一个data.frame的高级版本,让你的程序做数据整型的运算速度大大的增加.data.table已经在金融,基因工程学等领 ...

OneNote 2013 快捷键

越来越喜欢onenote这个笔记本软件,找了下提高效率的办法,收藏学习下: 转载自:http://onenoter.com/2013/04/5792 记录笔记和设置笔记格式 键入和编辑笔记 操作 按键 ...

spring jdbcTemplate query

1. spring jdbcTemplate query需要实现mapRow方法 package com.cdv.apolloagent.jdbc.dao.impl; import java.sql. ...

《Python CookBook2》 第一章 文本 - 改变多行文本字符串的缩进 && 扩展和压缩制表符(此节内容待定)

改变多行文本字符串的缩进 任务: 有个包含多行文本的字符串,需要创建该字符串的一个拷贝.并在每行行首添加或者删除一些空格,以保证每行的缩进都是指定数目的空格数. 解决方案: # -*- coding: ...

bzoj1260

很容易脑补出来的区间dp O(n3)的 var f:array[0..51,0..51] of longint;    i,n,j,l,k:longint;    s:string; function ...

Threads and Anonymous Classes in JAVA

As we all know,a thread is a separate process on your computer.you can run multiple threads all at t ...

简单总结几种常见web攻击手段及其防御方式

web攻击手段有几种,本文简单介绍几种常见的攻击手段及其防御方式 XSS(跨站脚本攻击) CSRF(跨站请求伪造) SQL注入 DDOS XSS 概念 全称是跨站脚本攻击(Cross Site Scr ...

加深try catch Finnly的理解

上代码 public String twoGetFeeInfoByWithUnit(JSONArray jsonArray,String key1,String key2){ String Debit ...

在Linux CentOS6系统中安装开源CMS程序OpenCart的教程

OpenCart是一个开放源码的店面,旨在为您提供灵活和细粒度的在线店面管理.在开始之前,您应该已经在您的Linode上设置了一个LAMP堆栈.您还应该设置主机名. PHP设置 为了使用OpenCar ...