Open yanlele opened 1 month ago
关键词:css 动效应用
主要是考察几个属性的使用
transform: rotateY
transition
还有一个要点:
效果如下:
实现比较简单, 直接贴代码:
<!DOCTYPE html> <html lang="en"> <head> <style> .card { display: flex; } .flip-card { float: left; position: relative; height: 36vmin; width: calc(40vmin / 1.4); background-color: white; padding: 20px; border-radius: calc(40vmin / 20); box-shadow: 0 calc(40vmin / 40) calc(40vmin / 10) 0 rgba(0, 0, 0, 0.6); overflow: hidden; transition: transform 200ms linear, box-shadow 200ms linear, background-color 200ms linear; transform: rotateY(0deg); } .label:hover .flip-card { transform: rotateY(180deg); background-color: black; transition: transform 200ms linear, box-shadow 200ms linear, background-color 200ms linear; } .label:hover .flip-front { opacity: 0; display: none; transition: transform 200ms linear, box-shadow 200ms linear, background-color 200ms linear; } .label:hover .flip-end { opacity: 1; display: block; transform: rotateY(180deg); color: white; font-size: 20px; transition: transform 200ms linear, box-shadow 200ms linear, background-color 200ms linear; } .flip-front { width: 100%; height: 100%; opacity: 1; cursor: pointer; } .flip-end { width: 100%; height: 100%; opacity: 0; display: none; cursor: pointer; } .label { background-color: white; border-radius: calc(40vmin / 20); } </style> </head> <body> <div class="card"> <div class="label"> <div class="flip-card"> <div class="flip-front">我是正面</div> <div class="flip-end"> 在上述代码中,我们创建了一个带有 card 类的容器,内部有一个 card-inner 元素,它包含了 card-front(正面)和 card-back(背面)两个元素。 当鼠标悬停在 card 元素上时,通过 :hover 选择器将 card-inner 元素绕 Y 轴旋转 180 度,实现翻牌效果。 </div> </div> </div> </div> </body> </html>
关键词:css 动效应用
主要是考察几个属性的使用
transform: rotateY
用于 Y 轴旋转transition
用于过度动画还有一个要点:
效果如下:![01.gif](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/404f57ed66964d9a8410bed9d3859c77~tplv-73owjymdk6-watermark.image?policy=eyJ2bSI6MywidWlkIjoiNDEyNTAyMzM1Nzg5OTM2NyJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1720875123&x-orig-sign=VMh9nhfE8JreFH6TyeVg7aOUre4%3D)
实现比较简单, 直接贴代码: