CSS3实现类似翻书效果的过渡动画的示例代码

 /*首先是DOM结构，不能像js一样分左右两边，正面翻为反面还要改变z-index，按照同样的布局也尝试过，没有用CSS动画写出来，逻辑太复杂。 这是一个类似翻书一样的动画效果，想着结构分为一页一页，一页旋转180°，完成时再改变“这一页”的z-index。每个page类的before伪类为正面，after伪类为反面；分解5页的在每一秒的动画，写出各自的animation。 */ 
 
 .card{ width: 50px; height: 50px; opacity: 0; position: relative; animation: .5s all; } .card .page{ width: 50%; height: 100%; position: absolute; left: 50%; top: 0; transform-style: preserve-3d; transform-origin: left; } .card .page::before, .card .page::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0px 50px 50px 0px; } .card .page::after{ border-radius: 50px 0px 0px 50px; } .card .page:nth-child(1){ animation: animation1 2s linear infinite; } .card .page:nth-child(2){ animation: animation2 2s linear infinite; } .card .page:nth-child(3){ animation: animation3 2s linear infinite; } .card .page:nth-child(4){ animation: animation4 2s linear infinite; } .card .page:nth-child(5){ animation: animation5 2s linear infinite; } .card .page:nth-child(1)::before{ background: aqua url("./images/star-right.png-600") center left/50% 50% no-repeat; } .card .page:nth-child(1)::after{ background: hotpink url("./images/compass-left.png-600") center right/50% 50% no-repeat; transform: rotateY(180deg); } .card .page:nth-child(2)::before{ background: hotpink url("./images/compass-right.png-600") center left/50% 50% no-repeat; } .card .page:nth-child(2)::after{ background: coral url("./images/crown-left.png-600") center right/50% 50% no-repeat; transform: rotateY(180deg); } .card .page:nth-child(3)::before{ background: coral url("./images/crown-right.png-600") center left/50% 50% no-repeat; } .card .page:nth-child(3)::after{ background: cyan url("./images/gift-left.png-600") center right/50% 50% no-repeat; transform: rotateY(180deg); } .card .page:nth-child(4)::before{ background: cyan url("./images/gift-right.png-600") center left/50% 50% no-repeat; } .card .page:nth-child(4)::after{ background: yellowgreen url("./images/heart-left.png-600") center right/50% 50% no-repeat; transform: rotateY(180deg); } .card .page:nth-child(5)::before{ background: yellowgreen url("./images/heart-right.png-600") center left/50% 50% no-repeat; } .card .page:nth-child(5)::after{ background: aqua url("./images/star-left.png-600") center right/50% 50% no-repeat; transform: rotateY(180deg); } @keyframes animation1 { 0%{ z-index: 1; transform: rotateY(180deg); } 20%{ z-index: 1; transform: rotateY(180deg); } 40%{ z-index: 3; transform: rotateY(360deg); } 60%{ z-index: 4; transform: rotateY(360deg); } 60.0001%{ z-index: 4; transform: rotateY(0deg); } 80%{ z-index: 5; transform: rotateY(0deg); } 100%{ z-index: 4; transform: rotateY(180deg); } } @keyframes animation2 { 0%{ z-index: 5; transform: rotateY(0deg); } 20%{ z-index: 4; transform: rotateY(180deg); } 40%{ z-index: 1; transform: rotateY(180deg); } 60%{ z-index: 3; transform: rotateY(360deg); } 80%{ z-index: 4; transform: rotateY(360deg); } 100%{ z-index: 5; transform: rotateY(360deg); } } @keyframes animation3 { 0%{ z-index: 4; transform: rotateY(0deg); } 20%{ z-index: 5; transform: rotateY(0deg); } 40%{ z-index: 4; transform: rotateY(180deg); } 60%{ z-index: 1; transform: rotateY(180deg); } 80%{ z-index: 3; transform: rotateY(360deg); } 100%{ z-index: 4; transform: rotateY(360deg); } } @keyframes animation4 { 0%{ z-index: 3; transform: rotateY(0deg); } 20%{ z-index: 4; transform: rotateY(0deg); } 40%{ z-index: 5; transform: rotateY(0deg); } 60%{ z-index: 4; transform: rotateY(180deg); } 80%{ z-index: 1; transform: rotateY(180deg); } 100%{ z-index: 3; transform: rotateY(360deg); } } @keyframes animation5 { 0%{ z-index: 2; transform: rotateY(0deg); } 20%{ z-index: 3; transform: rotateY(0deg); } 40%{ z-index: 4; transform: rotateY(0deg); } 60%{ z-index: 5; transform: rotateY(0deg); } 80%{ z-index: 4; transform: rotateY(180deg); } 100%{ z-index: 1; transform: rotateY(180deg); } }

 
 
 
 data() { return { front: 0, back: 1, } }, methods: { // flapCardList是存储着图片信息的对象数组，通过v-for循环和semiCircleStyle方法设置5组图片的背景。 semiCircleStyle(item, dir) { return { backgroundColor: `rgb(${item.r}, ${item.g}, ${item.b})`, backgroundSize: item.backgroundSize, backgroundImage: dir === 'left' ? item.imgLeft : item.imgRight } }, rotate(index, type) { //卡牌翻转，"front"选择右边卡片，否则选择左边卡片；然后改变dom元素的样式 const item = this.flapCardList[index] let dom if (type === 'front') { dom = this.$refs.right[index] } else { dom = this.$refs.left[index] } dom.style.transform = `rotateY(${item.rotateDegree}deg)` dom.style.backgroundColor = `rgb(${item.r}, ${item._g}, ${item.b})` }, flapCardRotate() { //首先是翻转函数，每次翻转分正反两面。当动画至90°时，改变背面的z-index值，每一帧动画完毕执行rotate函数以改变样式。 const frontFlapCard = this.flapCardList[this.front] const backFlapCard = this.flapCardList[this.back] frontFlapCard.rotateDegree += 10 frontFlapCard._g -= 5 backFlapCard.rotateDegree -= 10 if (backFlapCard.rotateDegree <90) { backFlapCard._g += 5 } if (frontFlapCard.rotateDegree === 90 && backFlapCard.rotateDegree === 90) { backFlapCard.zIndex += 2 } this.rotate(this.front, 'front') this.rotate(this.back, 'back') if (frontFlapCard.rotateDegree === 180 && backFlapCard.rotateDegree === 0) { this.next() } }, prepare() { const backFlapCard = this.flapCardList[this.back] backFlapCard.rotateDegree = 180 backFlapCard._g = backFlapCard.g - 5 * 9 this.rotate(this.back, 'back') }, next() { const frontFlapCard = this.flapCardList[this.front] const backFlapCard = this.flapCardList[this.back] frontFlapCard.rotateDegree = 0 backFlapCard.rotateDegree = 0 frontFlapCard._g = frontFlapCard.g backFlapCard._g = backFlapCard.g this.rotate(this.front, 'front') this.rotate(this.back, 'back') this.front++ this.back++ const len = this.flapCardList.length if (this.front >= len) { this.front = 0 } if (this.back >= len) { this.back = 0 } // 动态设置zIndex // 100 -> 96 // 99 -> 100 // 98 -> 99 // 97 -> 98 // 96 -> 97 // (0 - 1 + 5) % 5 = 4 // (1 - 1 + 5) % 5 = 0 this.flapCardList.forEach((item, index) => { item.zIndex = 100 - ((index - this.front + len) % len) }) this.prepare() }, startFlapCardAnimation() { this.prepare() this.task = setInterval(() => { this.flapCardRotate() }, this.intervalTime) }, stopAnimation() { //动画停止时，清除所有setTimeout；否则再次进入动画出现错误。 if (this.task) { clearInterval(this.task) } if (this.timeout) { clearTimeout(this.timeout) } if (this.timeout2) { clearTimeout(this.timeout2) } this.reset() }, runAnimation() { //点击推荐，则动画开始（vuex中定义了flapCardVisible，watch监听其变化，为TRUE则动画开始） this.runFlapCardAnimation = true this.timeout = setTimeout(() => { this.startFlapCardAnimation() this.startPointAnimation() }, 300) this.timeout2 = setTimeout(() => { this.stopAnimation() //2500ms过渡动画结束，推荐图书显示 this.runBookCardAnimation = true }, 2500) }, watch: { flapCardVisible(v) { if (v) { this.runAnimation() } } }, }