1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-12-23 21:03:14 +00:00

add hover effect

This commit is contained in:
devfake 2015-07-03 19:23:10 +02:00
parent 30e284a973
commit 4e1d801647
5 changed files with 261 additions and 3 deletions

View File

@ -17,6 +17,11 @@
src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr6d1JQt-lS5nD-1TJX2NNl0.woff2) format('woff2'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wprx3QmhlKDgQgT1VN2Ed1WFo.woff) format('woff');
}
select {
outline: 0;
border-radius: 0;
}
* {
margin: 0;
padding: 0;
@ -74,4 +79,8 @@ body {
transform: translate(-50%, 0px);
left: 50%;
width: 500px;
}
.card {
cursor: pointer;
}

243
client/scss/_effects.scss Normal file
View File

@ -0,0 +1,243 @@
.small-cards-modal {
.hand-wrap {
background: rgba(0,0,0,.8);
width: 100%;
height: 130px;
position: absolute;
bottom: 0;
left: 0;
}
.card {
border: none !important;
margin: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
height: 93px !important;
}
.hand-cards {
max-width: calc(100% - 350px);
margin: 0 auto;
width: 100%;
float: left;
}
.card-wrap {
float: left;
cursor: pointer;
z-index: 10;
height: auto !important;
width: auto !important;
margin: 3px;
}
.card-wrap .shadow,
.grave .shadow {
height: calc(100% - 40px);
left: 14px;
top: 20px;
width: calc(100% - 26px);
}
.card-wrap:hover {
z-index: 20;
}
.card {
float: left;
height: 93px;
width: 69px;
position: relative;
transition: margin .05s ease-in-out 0s;
}
.card i {
display: block;
position: absolute;
top: 3px;
left: 3px;
height: 87px;
z-index: 10;
}
/** SHAME **/
.card-wrap:hover .bla,
.grave:hover .bla,
.leader-card:hover .bla {
box-shadow: 0 0 2px 0 orange;
opacity: 1;
}
.bla {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
border-radius: 0;
}
.shadow {
border-radius: 35%;
box-shadow: 0 0 15px 14px #ffa500;
content: "";
height: calc(100% - 50px);
left: 15px;
position: absolute;
width: calc(100% - 22px);
z-index: 1;
top: 30px;
transition: all 0.3s ease-in-out 0s;
opacity: 0;
}
.card-wrap:hover .shadow,
.grave:hover .shadow,
.leader-card:hover .shadow {
-webkit-animation: Shadow 4s ease-in-out infinite;
-moz-animation: Shadow 4s ease-in-out infinite;
animation: Shadow 4s ease-in-out infinite;
}
.ani {
background: linear-gradient(2deg, #000, #000, #000, #000);;
transition: all .05s ease-in-out 0s;
}
.card-wrap:hover .ani,
.grave:hover .ani,
.leader-card:hover .ani {
background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500);
background-size: 800% 800%;
-webkit-animation: AnimationName 3s ease infinite;
-moz-animation: AnimationName 3s ease infinite;
animation: AnimationName 3s ease infinite;
}
@-webkit-keyframes Shadow {
0% {
opacity: 0;
}
25% {
opacity: .5;
}
50%{
opacity: 1;
}
75% {
opacity: .5;
}
100%{ opacity: 0;
}
}
@-webkit-keyframes Shadow {
0% {
opacity: 0;
}
25% {
opacity: .5;
}
50%{
opacity: 1;
}
75% {
opacity: .5;
}
100%{ opacity: 0;
}
}
@keyframes Shadow {
0% {
opacity: 0;
}
25% {
opacity: .5;
}
50%{
opacity: 1;
}
75% {
opacity: .5;
}
100%{ opacity: 0;
}
}
.overlay-card {
background: linear-gradient(2deg, rgba(255,255,255,.03), rgba(255,255,255,.2), rgba(255,255,255,.05));
background-size: 800% 800%;
position: absolute;
z-index: 20;
top: 3px;
left: 3px;
width: calc(100% - 4px);
height: calc(100% - 4px);
opacity: 0;
cursor: pointer;
}
.card-wrap:hover .overlay-card,
.grave:hover .overlay-card,
.leader-card:hover .overlay-card {
opacity: 1;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
}
@keyframes AnimationName {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
}
/** SUB HAND **/
.sub-hand {
float: left;
width: 150px;
margin: 18px 0 0 0;
}
.grave {
position: relative;
width: 69px;
height: 93px;
float: left;
}
.grave-img {
background: url(../grave.png) no-repeat;
position: absolute;
width: 63px;
height: 87px;
top: 3px;
left: 3px;
z-index: 10;
}
.deck-back {
background: url(../back.png) no-repeat;
float: left;
width: 63px;
height: 87px;
margin: 3px 0 0 10px;
}
}

View File

@ -2,6 +2,7 @@
@import "backbone.modal";
@import "backbone.modal.theme";
@import "effects";
@import "base";

View File

@ -1,3 +1,8 @@
<div class="card{{#if _disabled}} disabled{{/if}}" data-key="{{_key}}" data-id="{{_id}}">
<i class="card-sm-{{_data.faction}} card-sm-{{_data.faction}}-{{_data.img}}"></i>
<div class="card-wrap">
<div class="card{{#if _disabled}} disabled{{/if}}" data-key="{{_key}}" data-id="{{_id}}">
<div class="bla ani"></div>
<i class="card-sm-{{_data.faction}} card-sm-{{_data.faction}}-{{_data.img}}"></i>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
</div>

View File

@ -2,7 +2,7 @@
<h3 class="bbm-modal__title">Choose up to 2 cards you wish to redraw!</h3>
<span class="btn-sub bbm-close">READY</span>
</div>
<div class="bbm-modal__section preview-b">
<div class="bbm-modal__section preview-b small-cards-modal">
{{#each handCards as |val key|}}
{{>card val}}
{{/each}}