Uwaga: aby zobaczyć zmiany po opublikowaniu, może zajść potrzeba wyczyszczenia pamięci podręcznej przeglądarki.
- Firefox / Safari: Przytrzymaj Shift podczas klikania Odśwież bieżącą stronę, lub naciśnij klawisze Ctrl+F5, lub Ctrl+R (⌘-R na komputerze Mac)
- Google Chrome: Naciśnij Ctrl-Shift-R (⌘-Shift-R na komputerze Mac)
- Internet Explorer / Edge: Przytrzymaj Ctrl, jednocześnie klikając Odśwież, lub naciśnij klawisze Ctrl+F5
- Opera: Naciśnij klawisze Ctrl+F5.
/**
* Keyframes
*/
@-webkit-keyframes rotate-like{
0%{-webkit-transform: rotate(-2deg);}
15%{-webkit-transform: rotate(0deg);}
35%{-webkit-transform: rotate(-2deg);}
100%{-webkit-transform: rotate(-2deg);}
}
@-moz-keyframes rotate-like{
0%{-moz-transform: rotate(-2deg);}
15%{-moz-transform: rotate(0deg);}
35%{-moz-transform: rotate(-2deg);}
100%{-moz-transform: rotate(-2deg);}
}
@-webkit-keyframes rotate-plus{
0%{-webkit-transform: rotate(-1deg); top: 0;}
15%{-webkit-transform: rotate(-1deg); top: -7px;}
30%{-webkit-transform: rotate(-1deg); top: 0;}
50%{-webkit-transform: rotate(2deg); top: 0;}
70%{-webkit-transform: rotate(2deg); top: 0;}
100%{-webkit-transform: rotate(-1deg); top: 0;}
}
@-moz-keyframes rotate-plus{
0%{-moz-transform: rotate(-1deg); top: 0;}
15%{-moz-transform: rotate(-1deg); top: -7px;}
30%{-moz-transform: rotate(-1deg); top: 0;}
50%{-moz-transform: rotate(2deg); top: 0;}
70%{-moz-transform: rotate(2deg); top: 0;}
100%{-moz-transform: rotate(-1deg); top: 0;}
}
@-webkit-keyframes like-arm-left{
0%{-webkit-transform: rotate(10deg); margin-top: 81px;}
15%{-webkit-transform: rotate(0deg); margin-top: 81px;}
35%{-webkit-transform: rotate(10deg); margin-top: 81px;}
45%{margin-top: 65px;}
60%{margin-top: 81px;}
100%{-webkit-transform: rotate(10deg); margin-top: 81px;}
}
@-moz-keyframes like-arm-left{
0%{-moz-transform: rotate(10deg); margin-top: 81px;}
15%{-moz-transform: rotate(0deg); margin-top: 81px;}
35%{-moz-transform: rotate(10deg); margin-top: 81px;}
45%{margin-top: 65px;}
60%{margin-top: 81px;}
100%{-moz-transform: rotate(10deg); margin-top: 81px;}
}
@-webkit-keyframes like-arm-right{
0%{-webkit-transform: rotate(-10deg); margin-top: 65px;}
15%{-webkit-transform: rotate(0deg); margin-top: 65px;}
35%{-webkit-transform: rotate(-10deg); margin-top: 65px;}
45%{margin-top: 50px;}
60%{margin-top: 65px;}
100%{-webkit-transform: rotate(-10deg); margin-top: 65px;}
}
@-moz-keyframes like-arm-right{
0%{-moz-transform: rotate(-10deg); margin-top: 65px;}
15%{-moz-transform: rotate(0deg); margin-top: 65px;}
35%{-moz-transform: rotate(-10deg); margin-top: 65px;}
45%{margin-top: 50px;}
60%{margin-top: 65px;}
100%{-moz-transform: rotate(-10deg); margin-top: 65px;}
}
@-webkit-keyframes plus-arm-left{
0%{-webkit-transform: rotate(0deg);}
10%{-webkit-transform: rotate(10deg); margin-top: 55px;}
30%{-webkit-transform: rotate(0deg); margin-top: 65px;}
}
@-moz-keyframes plus-arm-left{
0%{-moz-transform: rotate(0deg);}
10%{-moz-transform: rotate(10deg); margin-top: 55px;}
30%{-moz-transform: rotate(0deg); margin-top: 65px;}
}
@-webkit-keyframes plus-arm-right{
0%{margin-top: 64px;}
10%{margin-top: 70px;}
30%{margin-top: 64px;}
100%{margin-top: 64px;}
}
@-moz-keyframes plus-arm-right{
0%{margin-top: 64px;}
10%{margin-top: 70px;}
30%{margin-top: 64px;}
100%{margin-top: 64px;}
}
.like, .plus{
width: 50%;
position: relative;
width: 412px; height: 162px;
}
/* Common elements */
.body{
width: 410px; height: 160px;
}
.left-leg{
position: absolute;
z-index: 90;
bottom: 35px; left: 144px;
}
.right-leg{
position: absolute;
z-index: 90;
bottom: 35px; right: 144px;
}
.leg{
width: 10px; height: 70px;
background-color: #000;
position: absolute;
}
.foot{
width: 35px; height: 12px;
border-radius: 5px;
background-color: #000;
position: absolute;
top: 70px;
}
.left-leg > .foot{
left: -21px;
}
.right-leg > .foot{
left: -4px;
}
.left-eye-border{
width: 88px; height: 88px;
padding: 3px 2px 2px 6px;
background-image: -webkit-linear-gradient(240deg, transparent 27%, #fff 27%);
background-image: -moz-linear-gradient(240deg, transparent 27%, #fff 27%);
position: absolute;
bottom: 14px; left: 20px;
border-radius: 50%;
}
.left-eye{
width: 85px; height: 85px;
border-radius: 50%;
background-image: -webkit-linear-gradient(240deg, transparent 30%, #000 30%);
background-image: -moz-linear-gradient(240deg, transparent 30%, #000 30%);
position: absolute;
bottom: 18px; left: 26px;
}
.right-eye-border{
width: 88px; height: 88px;
padding: 3px 3px 3px 4px;
background-image: -webkit-linear-gradient(-60deg, transparent 27%, #fff 27%);
background-image: -moz-linear-gradient(-60deg, transparent 27%, #fff 27%);
position: absolute;
bottom: 14px; right: 20px;
border-radius: 50%;
}
.right-eye{
width: 85px; height: 85px;
border-radius: 50%;
background-image: -webkit-linear-gradient(-60deg, transparent 30%, #000 30%);
background-image: -moz-linear-gradient(-60deg, transparent 30%, #000 30%);
position: absolute;
bottom: 18px; right: 26px;
}
.small-circle, .big-circle{
border-radius: 50%;
position: absolute;
background-color: #fff;
}
.small-circle{width: 5px; height: 5px;}
.big-circle{width: 20px; height: 20px;}
.left-arm, .right-arm{
position: absolute;
}
.left-arm{
margin-left: -34px;
margin-top: 65px;
}
.right-arm{
margin-left: 400px;
margin-top: 81px;
}
.left-arm .arm{
width: 30px;
height: 30px;
border-bottom-left-radius: 100%;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
.right-arm .arm{
width: 30px;
height: 30px;
border-bottom-right-radius: 100%;
border-right: 10px solid black;
border-bottom: 10px solid black;
}
.glove{
width: 35px; height: 35px;
border-radius: 50%;
position: absolute;
}
.glove{
top: -32px; left: -16px;
}
.glove:before{
content: "";
width: 15px; height: 15px;
border-radius: 50%;
position: absolute;
bottom: -5px;
left: 12px;
}
.glove:after{
content: "";
width: 20px; height: 20px;
border-radius: 50%;
position: absolute;
top: 4px;
left: 11px;
background: rgba(255, 255, 255, .3);
}
.plus > .body{
background-image: -webkit-linear-gradient(top, #f1f1f1, #c9c9c9);
background-image: -moz-linear-gradient(top, #f1f1f1, #c9c9c9);
border-radius: 5px;
z-index: 100;
position: absolute;
text-align: center;
-webkit-animation: rotate-plus 2s infinite;
-moz-animation: rotate-plus 2s infinite;
}
.plus > .body span{
color: #2f79ed;
font: bold 82px Arial;
line-height: 115px;
}
.plus > .body > .header{
width: 410px; height: 47px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-image: -webkit-linear-gradient(left, #e32c3b 25%, #148ee3 25%, #148ee3 50%, #36c520 50%, #36c520 75%, #ffd041 75%);
background-image: -moz-linear-gradient(left, #e32c3b 25%, #148ee3 25%, #148ee3 50%, #36c520 50%, #36c520 75%, #ffd041 75%);
position: relative;
}
.plus > .body > .header:before{
content: "";
width: 7px; height: 50px;
background-color: #e32c3b;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position: absolute;
top: 23px; left: 15px;
}
.plus > .body > .header:after{
content: "";
width: 7px; height: 30px;
background-color: #e32c3b;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position: absolute;
top: 31px; left: 27px;
}
.plus .left-eye{left: 35px;}
.plus .right-eye{right: 35px;}
.plus .small-circle{ bottom: 20px; left: 35px;}
.plus .big-circle{bottom: 25px; left: 15px;}
.plus .glove{background: #e32c3b;}
.plus .glove:before{background: #e32c3b;}
.plus .left-arm{
-webkit-animation: plus-arm-left 2s infinite;
-moz-animation: plus-arm-left 2s infinite;
}
.plus .right-arm {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-animation: plus-arm-right 2s infinite;
-moz-animation: plus-arm-right 2s infinite;
}
.plus .right-arm .glove{
top: 20px;
left: -37px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
.plus .glove:after{
left: 4px;
}
.plus .indentation{
width: 47px; height: 15px;
overflow: hidden;
position: absolute;
bottom: 11px; right: 52px;
}
.plus .indentation > .indentation-content{
width: 80px; height: 80px;
background-color: #cecece;
border-radius: 50%;
margin-left: -11px;
}
.plus .indentation > .indentation-content >.duble-border{
width:70px; height: 70px;
border: 3px solid #dbdbdb;
background-color: #cccccc;
border-radius: 50%;
position: relative;
top: 5px; left: 2px;
}
.plus .smile{
border-style: solid;
border-width: 7px 36px;
border-color: transparent #fff transparent transparent;
position: absolute;
bottom: 10px; right: 125px;
}
.plus .smile:after{
content: "";
border-style: solid;
border-width: 9px;
border-color: transparent #cecece transparent transparent;
position: absolute;
top: -9px; right: -38px;
}
.plus .smile:before{
content: "-";
color: #cecece;
position: absolute;
top: -11px; right: -31px;
}