Мобильная версияЯ работаю над отредактированной версией этой анимации подарочной коробки: https://codepen.io/RoyLee0702/pen/RwNgVya
Однако я просто не могу понять, как убедиться, что после срабатывания эффекта :hover каждый элемент сохраняется как конечное состояние. Когда вы в данный момент перемещаете мышь, все возвращается в исходное состояние. Есть ли кто-нибудь, кто может легко увидеть, что нужно изменить, чтобы подарочная коробка оставалась открытой? Я хочу, чтобы каждый элемент сохранял конечное состояние (например, крышка, изображение, коробка, галстук-бабочка и т. д.)
На мобильных устройствах он уже работает идеально «из коробки», поскольку эффект наведения заменяется щелчком мыши. Поэтому он не возвращается в исходное состояние автоматически.
Заранее спасибо!
body { фон: черный; } .коробка { положение: относительное; } .box::before { содержание: ""; ширина: 440 пикселей; высота: 440 пикселей; цвет фона: #89cff0; позиция: абсолютная; z-индекс: -1; верх: 50%; осталось: 50%; -webkit-transform: Translate(-50%, -50%); трансформировать: транслировать(-50%, -50%); радиус границы: 50%; } .box-body { положение: относительное; высота: 200 пикселей; ширина: 200 пикселей; поле-верх: 123,3333333333 пикселей; цвет фона: #cc231e; радиус нижнего левого края: 5%; радиус нижнего правого края: 5%; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3); фон: линейный градиент (#762c2c,#ff0303); } .box-body .img{ непрозрачность: 0; ответ: транслироватьY(0%); переход: все 0,5 с; маржа: 0 авто; дисплей: блок; } .box-body:hover { курсор: указатель; -webkit-animation: корпус корпуса на 1 с вперед, легкость выхода; анимация: корпус-коробка 1 с вперед, легкость выхода; } .box-body:hover .img{ непрозрачность: 1; z-индекс: 0; преобразование: TranslateY (-157 пикселей); } .box-body:hover .box-lid { -webkit-animation: крышка коробки на 1 секунду легко выдвигается вперед; анимация: крышка коробки 1 с легко выдвигается вперед; } .box-body:hover .box-bowtie::before { -webkit-animation: box-bowtie-left 1,1 с вперед с легкостью; анимация: коробка-бабочка-влево 1,1 с вперед, легкость выхода; } .box-body:hover .box-bowtie::after { -webkit-animation: box-bowtie-right 1.1s вперед с легкостью; анимация: коробка-бабочка-вправо 1,1 с вперед, плавный выход; } .box-body::after { содержание: ""; позиция: абсолютная; верх: 0; внизу: 0; осталось: 50%; -webkit-transform: TranslateX(-50%); преобразование: TranslateX (-50%); ширина: 50 пикселей; фон: линейный градиент (#ffffff, #ffefa0) } .box-lid { позиция: абсолютная; z-индекс: 1; осталось: 50%; -webkit-transform: TranslateX(-50%); преобразование: TranslateX (-50%); низ: 90%; высота: 40 пикселей; цвет фона: #cc231e; высота: 40 пикселей; ширина: 220 пикселей; граница-радиус: 5%; box-shadow: 0 8px 4px -4px rgba(0, 0, 0, 0.3); } .box-lid::after { содержание: ""; позиция: абсолютная; верх: 0; внизу: 0; осталось: 50%; -webkit-transform: TranslateX(-50%); преобразование: TranslateX (-50%); ширина: 50 пикселей; фон: линейный градиент (#ffefa0,#fff) } .box-бабочка { z-индекс: 1; высота: 100%; } .box-bowtie::before, .box-bowtie::after { содержание: ""; ширина: 83,3333333333 пикселей; высота: 83,3333333333 пикселей; граница: 16,6666666667 пикселей, сплошная белая; граница-радиус: 50% 50% 0 50%; позиция: абсолютная; низ: 99%; z-индекс: -1; } .box-бабочка::before { осталось: 50%; -webkit-transform:translateX(-100%) skew(10deg, 10deg); преобразование: TranslateX (-100%) skew (10 градусов, 10 градусов); } .box-бабочка::after { осталось: 50%; -webkit-transform: TranslateX (0%), поворот (90 градусов), наклон (10 градусов, 10 градусов); преобразование: трансляцияX (0%), поворот (90 градусов), наклон (10 градусов, 10 градусов); } @-webkit-keyframes box-lid { 0%, 42% { -webkit-transform: Translate3d(-50%, 0%, 0) Rotate(0deg); преобразование: Translate3d (-50%, 0%, 0) Rotate (0deg); } 60% { -webkit-transform: Translate3d(-85%, -230%, 0) Rotate(-25deg); преобразование: Translate3d (-85%, -230%, 0) вращать (-25 градусов); } 90%, 100% { -webkit-transform: Translate3d(-119%, 225%, 0) Rotate(-70Deg); преобразование: Translate3d (-119%, 225%, 0) вращать (-70 градусов); } } @keyframes box-lid { 0%, 42% { -webkit-transform: Translate3d(-50%, 0%, 0) Rotate(0deg); преобразование: Translate3d (-50%, 0%, 0) Rotate (0deg); } 60% { -webkit-transform: Translate3d(-85%, -230%, 0) Rotate(-25deg); преобразование: Translate3d (-85%, -230%, 0) вращать (-25 градусов); } 90%, 100% { -webkit-transform: Translate3d(-119%, 225%, 0) Rotate(-70Deg); преобразование: Translate3d (-119%, 225%, 0) вращать (-70 градусов); } } @-webkit-keyframes box-body { 0% { -webkit-transform: Translate3d(0%, 0%, 0) Rotate(0deg); преобразование: Translate3d (0%, 0%, 0) Rotate (0deg); } 25% { -webkit-transform: Translate3d (0%, 25%, 0) вращать (20 градусов); преобразование: Translate3d (0%, 25%, 0) поворот (20 градусов); } 50% { -webkit-transform: Translate3d(0%, -15%, 0) Rotate(0deg); преобразование: Translate3d (0%, -15%, 0) Rotate (0deg); } 70% { -webkit-transform: Translate3d(0%, 0%, 0) Rotate(0deg); преобразование: Translate3d (0%, 0%, 0) Rotate (0deg); } } @keyframes box-body { 0% { -webkit-transform: Translate3d(0%, 0%, 0) Rotate(0deg); преобразование: Translate3d (0%, 0%, 0) Rotate (0deg); } 25% { -webkit-transform: Translate3d (0%, 25%, 0) вращать (20 градусов); преобразование: Translate3d (0%, 25%, 0) поворот (20 градусов); } 50% { -webkit-transform: Translate3d(0%, -15%, 0) Rotate(0deg); преобразовать: Translate3d (0%, -15%, 0) вращать (0град); } 70% { -webkit-transform: Translate3d(0%, 0%, 0) Rotate(0deg); преобразование: Translate3d (0%, 0%, 0) Rotate (0deg); } } @-webkit-keyframes box-bowtie-right { 0%, 50%, 75% { -webkit-transform: TranslateX (0%), поворот (90 градусов), наклон (10 градусов, 10 градусов); преобразование: трансляцияX (0%), поворот (90 градусов), наклон (10 градусов, 10 градусов); } 90%, 100% { -webkit-transform: трансляция (-50%, -15%) поворот (45 градусов) наклон (10 градусов, 10 градусов); преобразование: трансляция (-50%, -15%) поворот (45 градусов) наклон (10 градусов, 10 градусов); box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.3); } } @keyframes box-bowtie-right { 0%, 50%, 75% { -webkit-transform: TranslateX (0%), поворот (90 градусов), наклон (10 градусов, 10 градусов); преобразование: трансляцияX (0%), поворот (90 градусов), наклон (10 градусов, 10 градусов); } 90%, 100% { -webkit-transform: трансляция (-50%, -15%) поворот (45 градусов) наклон (10 градусов, 10 градусов); преобразование: трансляция (-50%, -15%) поворот (45 градусов) наклон (10 градусов, 10 градусов); box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.3); } } @-webkit-keyframes box-bowtie-left { 0% { -webkit-transform: TranslateX (-100%), поворот (0 градусов), наклон (10 градусов, 10 градусов); преобразование: трансляцияX (-100%) поворот (0 градусов) наклон (10 градусов, 10 градусов); } 50%, 75% { -webkit-transform: трансляция (-50%, -15%) поворот (45 градусов) наклон (10 градусов, 10 градусов); преобразование: трансляция (-50%, -15%) поворот (45 градусов) наклон (10 градусов, 10 градусов); } 90%, 100% { -webkit-transform: TranslateX (-100%), поворот (0 градусов), наклон (10 градусов, 10 градусов); преобразование: трансляцияX (-100%) поворот (0 градусов) наклон (10 градусов, 10 градусов); } } @keyframes box-bowtie-left { 0% { -webkit-transform: TranslateX (-100%), поворот (0 градусов), наклон (10 градусов, 10 градусов); преобразование: трансляцияX (-100%) поворот (0 градусов) наклон (10 градусов, 10 градусов); } 50%, 75% { -webkit-transform: трансляция (-50%, -15%) поворот (45 градусов) наклон (10 градусов, 10 градусов); преобразование: трансляция (-50%, -15%) поворот (45 градусов) наклон (10 градусов, 10 градусов); } 90%, 100% { -webkit-transform: TranslateX (-100%), поворот (0 градусов), наклон (10 градусов, 10 градусов); преобразование: трансляцияX (-100%) поворот (0 градусов) наклон (10 градусов, 10 градусов); } Наведите курсор на поле