【免费】CSS实现动画效果-角色立绘_css动画效果资源-CSDN文库

共13个文件

avif：6个

jpg：5个

png：1个

需积分: 0 188 浏览量 2023-08-22 01:17:50 上传评论收藏 4.72MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS实现动画效果-角色立绘.zip （13个子文件）

CSS实现动画效果-角色立绘

原神立绘

夜兰1.avif 168KB

神里绫华0.jpg 80KB

神里绫华1.png 4.34MB

魈1.avif 119KB

刻晴1.avif 85KB

钟离0.jpg 64KB

魈0.jpg 77KB

钟离.avif 117KB

夜兰0.jpg 81KB

刻晴0.avif 68KB

万叶0.jpg 83KB

万叶1.avif 65KB

角色立绘.html 5KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原神角色立绘</title> <style> * { margin: 0; padding: 0; } body { height: 100vh; background-image: linear-gradient(120deg, #e0c3fc 10%, #8ec5fc 100%); display: flex; justify-content: center; align-items: center; overflow: hidden; } .shell { width: 1700px; margin: 0 auto; height: 680px; display: flex; } .card { margin: 0 10px; flex-basis: 15%; position: relative; overflow: hidden; } .card:not(:nth-child(1)) { margin-left: 20px; } .card:hover { overflow: initial; } .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all .1s cubic-bezier(0.165, 0.84, 0.44, 1); overflow: hidden; border-radius: 10px; background-image: linear-gradient(180deg, #9b86ce, #f79fde5c, #141414ce); } .box>img { object-fit: contain; left: 10%; width: 100%; height: 100%; transform: translate(-50%, 10%) scale(3); position: relative; z-index: -1; } .card:hover>.box img { opacity: 0; } .card:hover>.box { opacity:1; /*不透明度为0此段被覆盖↓*/ transform: scaleX(0.9); transform: scaleY(1.2); background-image: initial; background-color: #e0c6ef; z-index: 2; cursor: pointer; } .card>h4 { position: absolute; display: block; width: 120px; text-align: center; color: rgba(255, 255, 255, 0.2); bottom: 0; left: 50%; transform: translate(-50%, -35%); font-size: 28px; transition: 0.2s; } .card:hover>h4 { color: #fff; transform: translate(-50%, 250%); } .card:hover .character>img { opacity: 1; } .card>.character { position: absolute; top: -100px; left: -300px; width: 100%; height: 100%; z-index: 3; pointer-events: none; } .character>img { width: 820px; height: 820px; object-fit: contain; opacity: 0; transition: all 0.3s; position: relative; z-index: -10; } </style> </head> <body> <div class="shell"> <div class="card"> <div class="box"> <img src="./原神立绘/神里绫华0.jpg"> </div> <div class="character"> <img src="./原神立绘/神里绫华1.png"> </div> <h4></h4> </div> <div class="card"> <div class="box"> <img src="./原神立绘/万叶0.jpg"> </div> <div class="character"> <img style="width: 900px;height: 900px;" src="./原神立绘/万叶1.avif">> </div> <h4></h4> </div> <div class="card"> <div class="box"> <img src="./原神立绘/夜兰0.jpg"> </div> <div class="character"> <img src="./原神立绘/夜兰1.avif"> </div> <h4></h4> </div> <div class="card"> <div class="box"> <img src="./原神立绘/钟离0.jpg"> </div> <div class="character"> <img src="./原神立绘/钟离.avif"> </div> <h4></h4> </div> <div class="card"> <div class="box"> <img src="./原神立绘/刻晴0.avif"> </div> <div class="character"> <img src="./原神立绘/刻晴1.avif"> </div> <h4></h4> </div> <div class="card"> <div class="box"> <img src="./原神立绘/魈0.jpg"> </div> <div class="character"> <img src="./原神立绘/魈1.avif"> </div> <h4></h4> </div> </div> </body> </html>

评论收藏

内容反馈