HTML+CSS+JS实现动态模态超级英雄卡片效果资源-CSDN文库

共6个文件

jpg：3个

html：1个

js：1个

html

javascript

139 浏览量 2024-10-09 17:41:02 上传评论收藏 2.88MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

css动态模态卡片.zip （6个子文件）

css动态模态卡片

spider-man.jpg 1.44MB

captain-america.jpg 208KB

index.html 2KB

iron-man.jpg 1.25MB

styles.css 1KB

script.js 288B

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超级英雄卡片</title> <link href="https://fonts.googleapis.com/css2?family=Helvetica:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="card"> <div class="card-image" id="spider-man"> <img src="spider-man.jpg" alt="Spider-Man"> <div class="modal"> <h2>蜘蛛侠</h2> <p><strong>年份：</strong>2002</p> <p><strong>评分：</strong>7.3</p> <p><strong>介绍：</strong>彼得·帕克是一名普通的高中生，意外获得了超能力，成为了城市的保护者。</p> <p><strong>演员：</strong>托比·马奎尔</p> </div> </div> </div> <div class="card"> <div class="card-image" id="iron-man"> <img src="Iron-Man.jpg" alt="Iron Man"> <div class="modal"> <h2>钢铁侠</h2> <p><strong>年份：</strong>2008</p> <p><strong>评分：</strong>7.9</p> <p><strong>介绍：</strong>亿万富翁托尼·斯塔克被绑架后，创造了钢铁战甲，成为超级英雄。</p> <p><strong>演员：</strong>小罗伯特·唐尼</p> </div> </div> </div> <div class="card"> <div class="card-image" id="captain-america"> <img src="captain-america.jpg" alt="Captain America"> <div class="modal"> <h2>美国队长</h2> <p><strong>年份：</strong>2011</p> <p><strong>评分：</strong>6.9</p> <p><strong>介绍：</strong>史蒂夫·罗杰斯通过实验成为超级士兵，领导盟军对抗纳粹。</p> <p><strong>演员：</strong>克里斯·埃文斯</p> </div> </div> </div> </div> <script src="script.js"></script> </body> </html>

评论收藏

内容反馈