好看的鼠标hover效果
0919自我总结
常见的鼠标hover效果
展示效果:http://ianlunn.github.io/Hover/
部分动画制作
<style><!--
.container {
margin: 0 auto;
width: 800px;
}
.button {
margin: .4em;
padding: 1em;
cursor: pointer;
background: #ececec;
text-decoration: none;
color: #666;
display: inline-block;
}
/* 2D TRANSFORMS */
/* Grow */
.grow {
transition-duration: .3s;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
transform: scale(1.1);
}
/* Shrink */
.shrink {
transition-duration: .3s;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.shrink:hover {
transform: scale(.9);
}
/* Pulse */
@keyframes pulse {
25% {
transform: scale(1.1);
}
75% {
transform: scale(.9);
}
}
.pulse {
}
.pulse:hover {
animation-name: pulse;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* Pulse Grow*/
@keyframes pulse-grow {
to {
transform: scale(1.1);
}
}
.pulse-grow {
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-grow:hover {
animation-name: pulse-grow;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* Pulse shrink */
@keyframes pulse-shrink {
to {
transform: scale(.9);
}
}
.pulse-shrink {
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-shrink:hover {
animation-name: pulse-shrink;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* Push */
@keyframes push {
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
.push {
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.push:hover {
animation-name: push;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
/* Top */
@keyframes top {
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.top {
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.top:hover {
animation-name: top;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
/* Rotate */
.rotate {
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
transition-property: transform;
transition-duration: .3s;
}
.rotate:hover {
transform: rotate(5deg);
}
/* Grow Rotate */
.grow-rotate {
transition-property: transform;
transition-duration: .3s;
}
.grow-rotate:hover {
transform: rotate(5deg) scale(1.1);
}
/* Float */
.float {
transition-property: transform;
transition-duration: .3s;
}
.float:hover {
transform: translateY(-5px);
}
/* sink */
.sink {
transition-property: transform;
transition-duration: .3s;
}
.sink:hover {
transform: translateY(5px);
}
/* hover */
@keyframes hover {
50% {
transform: translateY(-3px);
}
100% {
transform: translateY(-6px);
}
}
.hover {
transition-property: transform;
transition-duration: .5s;
}
.hover:hover {
transform: translateY(-6px);
animation-name: hover;
animation-duration: 1.5s;
animation-delay: .5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* Hang */
@keyframes hang {
50% {
transform: translateY(3px);
}
100% {
transform: translateY(6px);
}
}
.hang {
transition-duration: .5s;
transition-property: transform;
}
.hang:hover {
transform: translateY(6px);
animation-name: hang;
animation-duration: 1.5s;
animation-delay: .5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* skew */
.skew {
transition-property: transform;
transition-duration: .3s;
}
.skew:hover {
transform: skew(-10deg);
}
/* skew-forward */
.skew-forward {
transition-property: transform;
transition-duration: .3s;
transform-origin: 0 100%;
}
.skew-forward:hover {
transform: skew(-10deg);
}
/* Wobble Vertical */
@keyframes wobble-vertical {
16.65% {
transform: translateY(8px);
}
33.3% {
transform: translateY(-6px);
}
49.95% {
transform: translateY(4px);
}
66.6% {
transform: translateY(-2px);
}
83.25% {
transform: translateY(1px);
}
100% {
transform: translateY(0);
}
}
.wobble-vertical {}
.wobble-vertical:hover {
animation-name: wobble-vertical;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
@keyframes wobble-horizontal {
16.65% { transform: translateX(8px); }
33.3% { transform: translateX(-6px); }
49.95% { transform: translateX(4px); }
66.6% { transform: translateX(-2px); }
83.25% { transform: translateX(1px); }
100% { transform: translateX(0); }
}
.wobble-horizontal {}
.wobble-horizontal:hover {
animation-name: wobble-horizontal;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/* wobble top */
@keyframes wobble-top {
16.65% { transform: skew(-12deg); }
33.3% { transform: skew(10deg); }
49.95% { transform: skew(-6deg); }
66.6% { transform: skew(4deg); }
83.25% { transform: skew(-2deg); }
100% { transform: skew(0); }
}
.wobble-top {
transform-origin: 0 100%;
}
.wobble-top:hover {
animation-name: wobble-top;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/* wobble bottom */
@keyframes wobble-bottom {
16.65% { transform: skew(-12deg); }
33.3% { transform: skew(10deg); }
49.95% { transform: skew(-6deg); }
66.6% { transform: skew(4deg); }
83.25% { transform: skew(-2deg); }
100% { transform: skew(0); }
}
.wobble-bottom {
transform-origin: 100% 0;
}
.wobble-bottom:hover {
animation-name: wobble-bottom;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/* SHADOW AND GLOW TRANSITIONS */
/*
time: .3s;
primaryColor: #ececec;
secondeColor: #666;
shadowColor: rgba(0, 0, 0, .6);
*/
/* border-fade */
.border-fade {
transition-property: box-shadow;
transition-duration: .3s;
box-shadow:
inset 0 0 0 4px #ececec,
0 0 1px rgba(0, 0, 0, 0);
}
.border-fade:hover {
box-shadow:
inset 0 0 0 4px #666,
0 0 1px rgba(0, 0, 0, 0);
}
/* hollow */
.hollow {
transition-property: background;
transition-duration: .3s;
transform: translateZ(0);
box-shadow:
inset 0 0 0 4px #ececec,
0 0 1px rgba(0, 0, 0, 0);
}
.hollow:hover {
background: none;
}
/* trim */
.trim {
position: relative;
}
.trim:before {
content: '';
position: absolute;
border: 4px solid white;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
opacity: 0;
transition-duration: .3s;
transition-property: opacity;
}
.trim:hover:before {
opacity: 1;
}
/* outline outward */
.outline-outward {
position: relative;
}
.outline-outward:before {
content: '';
position: absolute;
border: #ececec solid 4px;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition-property: top right bottom left;
transition-duration: .3s;
}
.outline-outward:hover:before {
top: -8px;
right: -8px;
left: -8px;
bottom: -8px;
}
/* outline inward */
.outline-inward {
position: relative;
}
.outline-inward:before {
content: '';
position: absolute;
border: #ececec solid 4px;
top: -16px;
right: -16px;
left: -16px;
bottom: -16px;
opacity: 0;
transition-property: top left right bottom;
transition-duration: .3s;
}
.outline-inward:hover:before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
opacity: 1;
}
/* round corners */
.round-corners {
transition-property: border-radius;
transition-duration: .3s;
}
.round-corners:hover {
border-radius: 25px;
}
/* SHADOW/GROW TRANSITIONS */
/* glow */
.glow {
transition-property: box-shadow;
transition-duration: .3s;
}
.glow:hover {
box-shadow: 0 0 8px rgba(0, 0, 0, .6);
}
/* box shadow outset */
.box-shadow-outset {
transition-property: box-shadow;
transition-duration: .3s;
}
.box-shadow-outset:hover {
box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
}
/* box-shadow-inset */
.box-shadow-inset {
transition-property: box-shadow;
transition-duration: .3s;
}
.box-shadow-inset:hover {
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .6);
}
/* float shadow */
.float-shadow {
position: relative;
transition-property: transform;
transition-duration: .3s;
}
.float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0%,rgba(0, 0, 0, 0) 80%);
transition-property: transform opacity;
transition-duration: .3s;
}
.float-shadow:hover {
transform: translateY(-5px);
}
.float-shadow:hover:before {
opacity: 1;
transform: translateY(5px);
}
/* hover shadow */
@keyframes hover {
50% {
transform: translateY(-3px);
}
100% {
transform: translateY(-6px);
}
}
@keyframes hover-shadow {
0% {
transform: translateY(6px);
opacity: .4;
}
50% {
transform: translateY(3px);
opacity: 1;
}
100% {
transform: translateY(6px);
opacity: .4;
}
}
.hover-shadow {
position: relative;
transition-property: transform;
transition-duration: .3s;
}
.hover-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%);
transition-duration: .3s;
transition-property: transform opacity;
}
.hover-shadow:hover {
transform: translateY(-6px);
animation-name: hover;
animation-duration: 1.5s;
animation-delay: .3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.hover-shadow:hover:before {
opacity: .4;
transform: translateY(6px);
animation-name: hover-shadow;
animation-duration: 1.5s;
animation-delay: .3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* shadow radial */
.shadow-radial {
position: relative;
}
.shadow-radial:before,
.shadow-radial:after {
pointer-events: none;
position: absolute;
content: '';
left: 0;
width: 100%;
box-sizing: border-box;
background-repeat: no-repeat;
height: 5px;
opacity: 0;
transition-property: opacity;
transition-duration: .3s;
}
.shadow-radial:before {
bottom: 100%;
background: radial-gradient(ellipse at 50% 150%, #666 0%, rgba(0,0,0,0) 80%);
}
.shadow-radial:after {
top: 100%;
background: radial-gradient(ellipse at 50% -50%, #666 0%, rgba(0,0,0,0) 80%);
}
.shadow-radial:hover:before,
.shadow-radial:hover:after {
opacity: 1;
}
/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top {
position: relative;
}
.bubble-top:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
left: calc(50% - 10px);
top: 0;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent #ececec transparent;
transition-property: top;
transition-duration: .3s;
}
.bubble-top:hover:before {
top: -10px;
}
/* Bubble Right */
.bubble-right {
position: relative;
}
.bubble-right:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
transition-duration: .3s;
transition-property: right;
top: calc(50% - 10px);
right: 0;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #ececec;
}
.bubble-right:hover:before {
right: -10px;
}
/* Bubble bottom */
.bubble-bottom {
position: relative;
}
.bubble-bottom:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #ececec transparent transparent transparent;
left: calc(50% - 10px);
bottom: 0;
transition-duration: .3s;
transition-property: bottom;
}
.bubble-bottom:hover:before {
bottom: -10px;
}
/* bubble left */
.bubble-left {
position: relative;
}
.bubble-left:before {
pointer-events: none;
position: absolute;
z-index: 1;
content: '';
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #ececec transparent transparent;
top: calc(50% - 10px);
left: 0;
transition-property: left;
transition-duration: .3s;
}
.bubble-left:hover:before {
left: -10px;
}
/* Bubble Float Top */
.bubble-flout-top {
position: relative;
transition-property: transform;
transition-duration: .3s;
}
.bubble-flout-top:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
left: calc(50% - 10px);
top: 0;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent #ececec transparent;
transition-property: top;
transition-duration: .3s;
}
.bubble-flout-top:hover {
transform: translateY(5px);
}
.bubble-flout-top:hover:before {
top: -10px;
}
/* Bubble Float Right */
.bubble-float-right {
position: relative;
transition-property: transform;
transition-duration: .3s;
}
.bubble-float-right:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
transition-duration: .3s;
transition-property: right;
top: calc(50% - 10px);
right: 0;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #ececec;
}
.bubble-float-right:hover {
transform: translateX(-5px);
}
.bubble-float-right:hover:before {
right: -10px;
}
/* Bubble Float Bottom */
.bubble-float-bottom {
position: relative;
transition-property: transform;
transition-duration: .3s;
}
.bubble-float-bottom:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #ececec transparent transparent transparent;
left: calc(50% - 10px);
bottom: 0;
transition-duration: .3s;
transition-property: bottom;
}
.bubble-float-bottom:hover {
transform: translateY(-5px);
}
.bubble-float-bottom:hover:before {
bottom: -10px;
}
/* Bubble Float Left */
.bubble-float-left {
position: relative;
transition-property: transform;
transition-duration: .3s;
}
.bubble-float-left:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #ececec transparent transparent;
top: calc(50% - 10px);
left: 0;
transition-duration: .3s;
transition-property: left;
}
.bubble-float-left:hover {
transform: translateX(5px);
}
.bubble-float-left:hover:before {
left: -10px;
}
/* Curl Top Left */
.curl-top-left {
position: relative;
}
.curl-top-left:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
left: 0;
background: linear-gradient(
135deg,
white 45%,
#aaa 50%,
#ccc 56%,
white 80%
);
z-index: 1000;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
transition-property: width height;
transition-duration: .3s;
}
.curl-top-left:hover:before {
width: 15px;
height: 15px;
}
/*
w,h = 25px;
leftArea : white;
curlLineColor : #aaa;
curlTransitionColro : #ccc;
curlLastColour : white;
*/
/* Curl Top right */
.curl-top-right {
position: relative;
}
.curl-top-right:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
right: 0;
background: linear-gradient(
225deg,
white 45%,
#aaa 50%,
#ccc 56%,
white 80%
);
z-index: 1000;
box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
transition-property: width height;
transition-duration: .3s;
}
.curl-top-right:hover:before {
width: 15px;
height: 15px;
}
/* Curl Bottom Right */
.curl-bottom-right {
position: relative;
}
.curl-bottom-right:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
bottom: 0;
right: 0;
background: linear-gradient(
315deg,
white 45%,
#aaa 50%,
#ccc 56%,
white 80%
);
z-index: 1000;
box-shadow: -1px -1px 1px rgba(0, 0, 0, .4);
transition-property: width height;
transition-duration: .3s;
}
.curl-bottom-right:hover:before {
width: 15px;
height: 15px;
}
/* Curl Bottom Left */
.curl-bottom-left {
position: relative;
}
.curl-bottom-left:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
bottom: 0;
left: 0;
background: linear-gradient(
45deg,
white 45%,
#aaa 50%,
#ccc 56%,
white 80%
);
z-index: 1000;
box-shadow: 1px -1px 1px rgba(0, 0, 0, .4);
transition-property: width height;
transition-duration: .3s;
}
.curl-bottom-left:hover:before {
width: 15px;
height: 15px;
}
--></style>
对于的效果都以备注
使用
拿pulse为例子
导入上述的方法
全是再样式中操作
@keyframes pulse {
25% {
transform: scale(1.1);
}
75% {
transform: scale(.9);
}
}
配置方法
.pulse:hover {
animation-name: pulse; #方法名称
animation-duration: 1s; #方法时间
animation-timing-function: linear; #从开头到结尾以相同的速度来播放动画
animation-iteration-count: infinite; #动画的次数
}
参考文档'https://www.w3school.com.cn/cssref/index.asp#animation'
好看的鼠标hover效果的更多相关文章
- 简单的圆形图标鼠标hover效果 | CSS3教程
演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...
- HTML5鼠标hover的时候图片放大的效果展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 如何不使用js实现鼠标hover弹出菜单效果
最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...
- Web页面中5种超酷的Hover效果
hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这 ...
- Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义提示框
[自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...
- 使IE6支持:hover效果
:hover是在CSS中用来制作效果最常用到的一个伪类,比如:标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的,对于只支持css1的浏览器 ...
- 【特效】体验很好的导航hover效果移出恢复当前位置
很常见的一种导航的hover效果,鼠标放上后除了正常的hover,在移出整个导航后,会恢复当前栏目的特殊样式,分别有横向和纵向的导航.代码也比较简单,设置一个当前栏目的class,用index()找到 ...
- 不可思议的纯 CSS 实现鼠标跟随效果
直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...
- 用ul li实现边框重合并附带鼠标经过效果
边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...
随机推荐
- JS---offset系列和scroll系列
元素的样式属性是无法直接通过:对象.style.属性来获取(样式在style属性中设置) offset系列: offsetLeft:距离左边位置的值 offsetTop:距离上面位置的值 offs ...
- JS---另一个定时器：一次性的
之前学的定时器:setInterval和清除定时器 clearInterval(定时器id); //常用的,反复的执行 window.setInterval(function () { alert(& ...
- CentOS 7上的系统管理之：Systemd和systemctl
参考资料: Chapter 10. Managing Services with systemd Red Hat Enterprise Linux 7 | Red Hat Customer Porta ...
- 使用shell脚本删除30天以前的文件
#!/bin/bashlocation=/root/rmfind $location -mtime +30 -print | xargs rm -rf //-mtime是距离上一次修改时间 -prin ...
- OLTP
On-Line Transaction Processing,联机事务处理过程(OLTP),也称为面向交易的处理过程 其基本特征是前台接收的用户数据可以立即传送到计算中心进行处理,并在很短的时间内给出 ...
- C# -- RSA加密与解密
1. RSA加密与解密 -- 使用公钥加密.私钥解密 public class RSATool { public string Encrypt(string strText, string st ...
- Python3 pickle模块用法
pickle(python3.x)和cPickle(python2.x的模块)相当于java的序列化和反序列化操作. 常采用下面的方式使用: import pickle pickle.dump(obj ...
- LRC歌词原理和实现高仿Android网易云音乐
大家好,我们是爱学啊,今天给大家带来一篇关于LRC歌词原理和在Android上如何实现歌词逐行滚动的效果,本文来自[Android开发项目实战我的云音乐]课程:逐字滚动下一篇文章讲解. 效果图 相信大 ...
- chunked
简介 chunked是一种HTTP协议的分块传输编码的机制,即一个HTTP消息可以分成多个部分进行传输,它对于HTTP请求和HTTP响应都适用.对于非持续连接,浏览器通过连接是否关闭来界定请求和响应实 ...
- Hazelcast介绍
Hazelcast介绍 什么时侯需要用例 内存中分布式计算 场景分布式消息 特性 全景 Distributed Maps 一个结点中分区 Hazelcast中的分片也称为分区,Hazelcast默认2 ...