add anime+boucleproj

This commit is contained in:
2019-05-03 12:05:54 +02:00
parent 1a177c21bb
commit 3d878b3cb6
444 changed files with 35400 additions and 10029 deletions
+97 -44
View File
@@ -1,30 +1,72 @@
body{
padding: 0 2%;
html, body{
overflow: hidden;
}
.blog{
height: 100%;
&.down{
height: 5rem;
}
}
header{
.contact{
z-index: 9999;
width: 90px;
height: auto;
z-index: 999;
position: fixed;
top: 20px;
right: 2%;
transform: scale(1);
top: 0px;
right: 0px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
cursor: pointer;
&:hover{
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transform: scale(0.9);
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
svg{
cursor: pointer;
-webkit-animation: rotation 6s infinite linear;
animation: rotation 6s infinite linear;
}
h3{
color: white;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
position: absolute;
top: 35px;
left: 19px;
}
.txt{
position: fixed;
right: -200px;
display: none;
}
&.open{
transform: scale(15);
-webkit-transform: scale(15);
transform: scale(15);
height: auto;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
h3{
color: transparent;
left: 500px;
-webkit-transition: visibility 0.5 ease left 1s ease;
transition: visibility 0.5 ease left 1s ease;
}
img{
animation: rotation 12s infinite linear;
svg{
-webkit-animation: rotation 12s infinite linear;
animation: rotation 12s infinite linear;
}
& + .txt{
position: fixed;
@@ -32,66 +74,77 @@ header{
text-align: center;
line-height: 1.5rem;
z-index: 9999;
animation: translateright 1s ease forwards;
-webkit-animation: translateright 1s ease forwards;
animation: translateright 1s ease forwards;
}
}
&.close{
transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.5s 0.1s ease;
transition: -webkit-transform 0.5s 0.1s ease;
transition: transform 0.5s 0.1s ease;
transition: transform 0.5s 0.1s ease, -webkit-transform 0.5s 0.1s ease;
& + .txt{
position: fixed;
top: 190px;
text-align: center;
line-height: 1.5rem;
z-index: 9999;
animation: translateleft 1s ease forwards;
-webkit-animation: translateleft 1s ease forwards;
animation: translateleft 1s ease forwards;
}
h3{
color: white;
left: 20px;
-webkit-transition: color 0.5s 0.5s ease, left 0.5s ease;
transition: color 0.5s 0.5s ease, left 0.5s ease;
}
&:hover{
-webkit-transition: -webkit-transform 0.5s ease!important;
transition: -webkit-transform 0.5s ease!important;
transition: transform 0.5s ease!important;
transform: scale(0.9)!important;
transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
-webkit-transform: scale(0.9)!important;
transform: scale(0.9)!important;
}
}
img{
animation: rotation 6s infinite linear;
}
h3{
transform: rotate(35deg);
position: absolute;
top: 33px;
left: 20px;
}
& + .txt{
position: fixed;
right: -200px;
p{
}
}
}
h2{
margin-left: 10px;
}
}
.card{
width: calc(100% / 3);
padding: 0 10px;
line-height: 0.8!important;
width: calc((100% / 3));
line-height: 0.8rem!important;
.card-header{
margin-top: 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
& > div{
margin-right: 5px;
& > a{
vertical-align: baseline;
}
& > time{
vertical-align: baseline;
}
}
}
}
@media screen and (max-width: 960px) {
.works-mea{
& > div:last-child{
display: none;
}
}
.card{
width: calc((100% / 2) - 5px );
}
}
@media screen and (max-width: 600px) {
.works-mea{
& > div:nth-child(2){
display: none;
}
}
.card{
width: 100%;
}
}