两张图片实现双面卡牌旋转动画

最新推荐文章于 2024-05-26 09:46:39 发布

原创最新推荐文章于 2024-05-26 09:46:39 发布 · 334 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #动画

animation 同时被 2 个专栏收录

1 篇文章

订阅专栏

动画

1 篇文章

订阅专栏

文章介绍了如何使用CSS的@keyframes和transform属性来创建静态图片的翻转动画效果，以及当图片为动态时，如何通过JavaScript动态插入样式规则来实现翻转动画，涉及到的关键步骤包括0-90度旋转、图片切换及90-0度的回转动画。

两张图片实现双面卡牌旋转动画

实现方式：

1、静态图片css方式实现

.anim {
	animation: rotation 1s ease-in-out;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
    background-image: url('img1');
  }
  50% {
    transform: rotateY(90deg);
    background-image: url('img1');
  }
  51% {
    background-image: url('img2');
  }
  100% {
    transform: rotateY(0deg);
    background-image: url('img2');
  }
}

2、如果图片为动态的话，则需要js实现：

const el = document.getElementById('card');
if (!el) return;
const img = this.cardList[this.currentIndex].imgUrl;
const backImg = require('../../assets/img/card/big-card-back.png');
const style = document.styleSheets[0];
style.insertRule('@keyframes rotation {' +
    '  0% {' +
    '    transform: rotateY(0deg);' +
    '    background-image: url(' + backImg + ');' +
    '  }' +
    '  50% {' +
    '    transform: rotateY(90deg);' +
    '    background-image: url(' + backImg + ');' +
    '  }' +
    '  51% {' +
    '    background-image: url(' + img + ');' +
    '  }' +
    '  100% {' +
    '    transform: rotateY(0deg);' +
    '    background-image: url(' + img + ');' +
    '  }' +
    '}');