mirror of https://github.com/IanLunn/Hover.git
Added 2 new effects and bower.json
This commit is contained in:
parent
ecfcf504aa
commit
b8441961e3
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "Hover.css",
|
||||
"version": "1.0.6",
|
||||
"homepage": "http://ianlunn.github.io/Hover",
|
||||
"authors": [
|
||||
"Ian Lunn <hello@ianlunn.co.uk>"
|
||||
],
|
||||
"description": "A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.",
|
||||
"main": "hover.css",
|
||||
"keywords": [
|
||||
"Hover",
|
||||
"hover",
|
||||
"Hover Effects",
|
||||
"CSS Effects",
|
||||
"CSS3 Effects",
|
||||
"CSS Hover Effects",
|
||||
"CSS3 Hover Effects"
|
||||
],
|
||||
"license": "MIT",
|
||||
"private": false,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.co.uk/)
|
||||
* Version: 1.0.5
|
||||
* Version: 1.0.6
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
@ -727,9 +727,9 @@
|
|||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
/* Wobble Top Left Bottom Right */
|
||||
/* Wobble To Bottom Right */
|
||||
|
||||
@-webkit-keyframes wobble-top-left-bottom-right {
|
||||
@-webkit-keyframes wobble-to-bottom-right {
|
||||
16.65% {
|
||||
-webkit-transform: translate(8px, 8px);
|
||||
transform: translate(8px, 8px);
|
||||
|
@ -761,7 +761,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes wobble-top-left-bottom-right {
|
||||
@keyframes wobble-to-bottom-right {
|
||||
16.65% {
|
||||
-webkit-transform: translate(8px, 8px);
|
||||
-ms-transform: translate(8px, 8px);
|
||||
|
@ -799,7 +799,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wobble-top-left-bottom-right {
|
||||
.wobble-to-bottom-right {
|
||||
display: inline-block;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
|
@ -807,9 +807,9 @@
|
|||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.wobble-top-left-bottom-right:hover {
|
||||
-webkit-animation-name: wobble-top-left-bottom-right;
|
||||
animation-name: wobble-top-left-bottom-right;
|
||||
.wobble-to-bottom-right:hover {
|
||||
-webkit-animation-name: wobble-to-bottom-right;
|
||||
animation-name: wobble-to-bottom-right;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
|
@ -818,9 +818,9 @@
|
|||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
/* Wobble Bottom Left Top Right */
|
||||
/* Wobble To Top Right */
|
||||
|
||||
@-webkit-keyframes wobble-bottom-left-top-right {
|
||||
@-webkit-keyframes wobble-to-top-right {
|
||||
16.65% {
|
||||
-webkit-transform: translate(8px, -8px);
|
||||
transform: translate(8px, -8px);
|
||||
|
@ -852,7 +852,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes wobble-bottom-left-top-right {
|
||||
@keyframes wobble-to-top-right {
|
||||
16.65% {
|
||||
-webkit-transform: translate(8px, -8px);
|
||||
-ms-transform: translate(8px, -8px);
|
||||
|
@ -890,7 +890,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wobble-bottom-left-top-right {
|
||||
.wobble-to-top-right {
|
||||
display: inline-block;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
|
@ -898,9 +898,9 @@
|
|||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.wobble-bottom-left-top-right:hover {
|
||||
-webkit-animation-name: wobble-bottom-left-top-right;
|
||||
animation-name: wobble-bottom-left-top-right;
|
||||
.wobble-to-top-right:hover {
|
||||
-webkit-animation-name: wobble-to-top-right;
|
||||
animation-name: wobble-to-top-right;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
|
|
|
@ -43,8 +43,8 @@
|
|||
<a rel="skew-backward" class="button skew-backward">Skew Backward</a>
|
||||
<a rel="wobble-horizontal" class="button wobble-horizontal">Wobble Horizontal</a>
|
||||
<a rel="wobble-vertical" class="button wobble-vertical">Wobble Vertical</a>
|
||||
<a rel="wobble-top-left-bottom-right" class="button wobble-top-left-bottom-right">Wobble Top Left Bottom Right</a>
|
||||
<a rel="wobble-bottom-left-top-right" class="button wobble-bottom-left-top-right">Wobble Bottom Left Top Right</a>
|
||||
<a rel="wobble-to-bottom-right" class="button wobble-to-bottom-right">Wobble To Bottom Right</a>
|
||||
<a rel="wobble-to-top-right" class="button wobble-to-top-right">Wobble To Top Right</a>
|
||||
<a rel="wobble-top" class="button wobble-top">Wobble Top</a>
|
||||
<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>
|
||||
<a rel="wobble-skew" class="button wobble-skew">Wobble Skew</a>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
/* Wobble Top Left Bottom Right */
|
||||
@keyframes wobble-top-left-bottom-right {
|
||||
/* Wobble To Bottom Right */
|
||||
@keyframes wobble-to-bottom-right {
|
||||
16.65% {
|
||||
transform: translate(8px, 8px);
|
||||
}
|
||||
|
@ -25,13 +25,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin wobble-top-left-bottom-right {
|
||||
@mixin wobble-to-bottom-right {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover {
|
||||
animation-name: wobble-top-left-bottom-right;
|
||||
animation-name: wobble-to-bottom-right;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: 1;
|
|
@ -1,5 +1,5 @@
|
|||
/* Wobble Bottom Left Top Right */
|
||||
@keyframes wobble-bottom-left-top-right {
|
||||
/* Wobble To Top Right */
|
||||
@keyframes wobble-to-top-right {
|
||||
16.65% {
|
||||
transform: translate(8px, -8px);
|
||||
}
|
||||
|
@ -25,13 +25,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin wobble-bottom-left-top-right {
|
||||
@mixin wobble-to-top-right {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover {
|
||||
animation-name: wobble-bottom-left-top-right;
|
||||
animation-name: wobble-to-top-right;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: 1;
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.co.uk/)
|
||||
* Version: 1.0.5
|
||||
* Version: 1.0.6
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
@ -115,14 +115,14 @@
|
|||
@include wobble-horizontal();
|
||||
}
|
||||
|
||||
@import "effects/wobble-top-left-bottom-right";
|
||||
.wobble-top-left-bottom-right {
|
||||
@include wobble-top-left-bottom-right();
|
||||
@import "effects/wobble-to-bottom-right";
|
||||
.wobble-to-bottom-right {
|
||||
@include wobble-to-bottom-right();
|
||||
}
|
||||
|
||||
@import "effects/wobble-bottom-left-top-right";
|
||||
.wobble-bottom-left-top-right {
|
||||
@include wobble-bottom-left-top-right();
|
||||
@import "effects/wobble-to-top-right";
|
||||
.wobble-to-top-right {
|
||||
@include wobble-to-top-right();
|
||||
}
|
||||
|
||||
@import "effects/wobble-top";
|
||||
|
|
Loading…
Reference in New Issue