123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- .blog{
- #start{
- .cat-list {
- width: 100%;
- z-index: 999;
- left: -100%;
- &::after {
- display: block;
- content: " ";
- width: 0%;
- height: 1px;
- background: black;
- }
- ul {
- opacity: 0;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- margin: 10px 0;
- .btn-group{
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- .btn a{
- margin-right: 10px;
- &::after{
- position: absolute;
- content: " ";
- width: 5px;
- }
- &:hover, &.active{
- &::after{
- content: "\002022";
- }
- }
- input{
- display: none;
- }
- }
- }
- }
- }
- #items{
- .full-works{
- .card{
- width: calc( (100vw / 3 - calc( 41px / 3 ) ) );
- }
- }
- }
- }
- .down{
- .cat-list{
- &::after{
- -webkit-animation: showborder 2.5s 1.6s ease forwards;
- animation: showborder 2.5s 1.6s ease forwards;
- }
- ul{
- -webkit-animation: ultranslate 1s 2.5s ease forwards;
- animation: ultranslate 1s 2.5s ease forwards;
- }
- }
- }
- }
|