如何使用纯 CSS 创建翻牌动画
生活随笔
收集整理的這篇文章主要介紹了
如何使用纯 CSS 创建翻牌动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
下面的示例向您展示了如何使用純 CSS 創建翻牌動畫。
作者：堅果
公眾號：“大前端之旅”
華為云享專家，InfoQ簽約作者，阿里云專家博主，51CTO博客首席體驗官，開源項目GVA成員之一，專注于大前端技術的分享，包括Flutter,小程序,安卓，VUE，JavaScript。
HTML
<body><h1>大前端之旅</h1><h3>Flipping Card: An Example</h3><div class="card"><div class="card__content"><div class="card__front"><h1>?</h1></div><div class="card__back"><h1>This is a big secret</h1></div></div></div> </body>CSS
.card {margin: auto;width: 300px;height: 400px;perspective: 1000px;background-color: transparent;}.card__content {position: relative;width: 100%;height: 100%;text-align: center;transition: all 1s;transform-style: preserve-3d;box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);}.card:hover .card__content {transform: rotateY(180deg);}.card__front,.card__back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;display: flex;justify-content: center;align-items: center;color: white;}.card__front {background-color: red;font-size: 150px;}.card__back {background-color: indigo;transform: rotateY(180deg);font-size: 36px;}完整代碼
<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1" /><style>.card {margin: auto;width: 300px;height: 400px;perspective: 1000px;background-color: transparent;}.card__content {position: relative;width: 100%;height: 100%;text-align: center;transition: all 1s;transform-style: preserve-3d;box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);}.card:hover .card__content {transform: rotateY(180deg);}.card__front,.card__back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;display: flex;justify-content: center;align-items: center;color: white;}.card__front {background-color: red;font-size: 150px;}.card__back {background-color: indigo;transform: rotateY(180deg);font-size: 36px;}</style><title>大前端之旅</title> </head><body><h1>大前端之旅</h1><h3>Flipping Card: An Example</h3><div class="card"><div class="card__content"><div class="card__front"><h1>?</h1></div><div class="card__back"><h1>This is a big secret</h1></div></div></div> </body></html>最后的話
我們已經研究了一個使用純 CSS 實現翻轉卡片效果的端到端示例
總結
以上是生活随笔為你收集整理的如何使用纯 CSS 创建翻牌动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何在Dart中读取控制台输入/ std
- 下一篇： webpack使用加载器来加载CSS样式