User blog comment:Raznocty2016/Перевод/@comment-45330230-20200705103830

.screen.card-manager-list .card-list-box { display: block; width: auto; height: 420px; position: absolute; left: 50px; top: 115px; right: 50px; bottom: auto; font-size: 0; } .screen.card-manager-list .card-list-box .g-box { display: inline-block; width: 96px; height: 125px; position: relative; margin: 4px 7px; vertical-align: top; cursor: pointer; -webkit-transform: scaleX(1) scaleY(1); -moz-transform: scaleX(1) scaleY(1); -ms-transform: scaleX(1) scaleY(1); -o-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); -webkit-transition: transform 0.11s; -moz-transition: transform 0.11s; -ms-transition: transform 0.11s; -o-transition: transform 0.11s; transition: transform 0.11s; } .screen.card-manager-list .card-list-box .g-box:hover { -webkit-transform: scaleX(1.1) scaleY(1.1); -moz-transform: scaleX(1.1) scaleY(1.1); -ms-transform: scaleX(1.1) scaleY(1.1); -o-transform: scaleX(1.1) scaleY(1.1); transform: scaleX(1.1) scaleY(1.1); } .screen.card-manager-list .card-list-box .g-box:hover .card .p-color { box-shadow: 0 1px 15px #00ff51, 0 1px 30px #a444f0; } .screen.card-manager-list .card-list-box .g-box .ready:before, .screen.card-manager-list .card-list-box .g-box .ready:after { content: ""; display: block; width: 96px; height: 125px; position: absolute; left: 0; top: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; background-image: url(../img/dots2.png); background-size: 100% 200%; background-position: 0 0; opacity: 0.55; pointer-events: none; } .screen.card-manager-list .card-list-box .g-box .ready:after { background-image: url(../img/dots-a3.png); background-size: 100% 600%; background-position: 0 0; -webkit-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -moz-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -ms-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -o-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; pointer-events: none; } .screen.card-manager-list .card-list-box .g-box .ready:before { box-shadow: 0 0 10px #ffa0, inset 0 0 25px #ffa0, inset 0 0 55px #ffa0; -webkit-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -moz-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -ms-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -o-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; }