好看的鼠标hover效果
2019-09-23 08:43:39来源：博客园 阅读 ()
好看的鼠标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'
原文链接:https://www.cnblogs.com/pythonywy/p/11548543.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
相关文章
- 网页搜索框里显示字段鼠标点击后就隐藏的方法 2020-05-29
- 11种常用css样式之鼠标、列表和尺寸样式学习 2020-02-22
- CSS 如何实现当鼠标放在上面时整行变色呢？ 2020-02-05
- 推荐一款好看的Hexo主题Ayer 2019-12-06
- 做一个好看的可翻转登录注册界面 2019-11-18
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签