元神手风琴角色卡html+css

最新推荐文章于 2024-05-21 18:20:21 发布
最新推荐文章于 2024-05-21 18:20:21 发布
阅读量177 收藏
点赞数 3
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/promises_me/article/details/134745674
版权

html部分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="test.css">

</head>

<body>

    <div class="shell">

        <div class="card">

            <div class="box">

                <img src="imgs/imgs1.png">

            </div>

            <div class="character">

                <img src="imgs/imgs1.png">

            </div>

            <h4>雷电将军</h4>

        </div>

        <div class="card">

            <div class="box">

                <img src="imgs/imgs1.png">

            </div>

            <div class="character">

                <img src="imgs/imgs1.png">

            </div>

            <h4>雷电将军</h4>

        </div>

        <div class="card">

            <div class="box">

                <img src="imgs/imgs3.png">

            </div>

            <div class="character">

                <img src="imgs/imgs3.png">

            </div>

            <h4>八重神子</h4>

        </div>

        <div class="card">

            <div class="box">

                <img src="imgs/imgs1.png">

            </div>

            <div class="character">

                <img src="imgs/imgs1.png">

            </div>

            <h4>雷电将军</h4>

        </div>

        <div class="card">

            <div class="box">

                <img src="imgs/imgs1.png">

            </div>

            <div class="character">

                <img src="imgs/imgs1.png">

            </div>

            <h4>雷电将军</h4>

        </div>

        <div class="card">

            <div class="box">

                <img src="imgs/imgs1.png">

            </div>

            <div class="character">

                <img src="imgs/imgs1.png">

            </div>

            <h4>雷电将军</h4>

        </div>

        <div class="card">

            <div class="box">

                <img src="imgs/imgs1.png">

            </div>

            <div class="character">

                <img src="imgs/imgs1.png">

            </div>

            <h4>雷电将军</h4>

        </div>

        <div class="card">

            <div class="box">

                <img src="imgs/imgs1.png">

            </div>

            <div class="character">

                <img src="imgs/imgs1.png">

            </div>

            <h4>雷电将军</h4>

        </div>

    </div>

</body>

</html>

css部分

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    background-image: linear-gradient(

        100deg,#e0c3fc 0%,#8ec5fc 100%

    );

}

.shell{

    width: 900px;

    margin: 0 auto;

    height: 450px;

    display: flex;

}

.card{

    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,#a18cd1,#fcaae55c,#141414ce

    );

}

.box>img{

    object-fit: contain;

    width: 100%;

    height: 100%;

    transform: translate(-50%,10%)scale(3);

    position: relative;

    z-index: -1;

}

.card:hover>.box img{

    opacity: 0;

}

.card:hover>.box{

    transform:scaleY(1.5);

    background-image: initial;

    background-color: #e0cbef;

    z-index: 2;

    cursor: pointer;

}

.card>h4{

    position: absolute;

    display: block;

    width: 120px;

    text-align: center;

    color: rgba(255, 255, 255, 0.2);

    margin-bottom: 20px;

    bottom: 0;

    left: 50%;

    transform: translate(-50%,-35%);

    font-size: 20px;

    z-index: 100;

    transition: .2s;

}

.card:hover h4{

    color: #fff;

    transform: translate(-50%,250%);

}

.card:hover .character>img{

    opacity: 1;

}

.card>.character{

    position: absolute;

    top: -50px;

    left: -200px;

    width: 100%;

    height: 100%;

    z-index: 3;

    pointer-events: none;

}

.character>img{

    width: 500px;

    height: 500px;

    object-fit: contain;

    opacity: 0;

    transition: all .3s;

    position: relative;

    z-index: -10;

}


如发生盒子发生偏大或偏小，需要自行调整

promises_me
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JQuery实现手风琴。还有纯html+css写的手风琴。
m0_53881313的博客
05-25 1101
手风琴效果 编写网页，设置CSS完成手风琴的结构和样式设置。 为所有图片添加鼠标移入与移出事件。 鼠标移入时，将当前元素的width设为图片的原宽，其他图片的width= (<div>的宽度 - 图片的原宽) / 剩余图片元素个数。 鼠标移出时，所有图片的width=<div>的宽度 / 所有图片的个数。
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
weixin_36339710的博客
06-04 1933
纯js+html和纯css+html制作手风琴效果，css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果，供大家参考，具体内容如下一、纯css+html的手风琴效果这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。代码如下：body{background: url('bg.gif') repeat;}ul,li,p{margin: ...
【html + css】手风琴
weixin_45562037的博客
07-13 242
【html + css】手风琴全部代码
手风琴效果 HTML+CSS
微风的博客
08-15 365
利用css选择器 加 :hover 直接复制即可。大家有更好的 实现方法 可以留言。
web前端页面开发（HTML+CSS+javascript）案例2：HTML+CSS+js实现手风琴效果
123加油的博客
05-09 2146
HTML代码： <!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"> <titl
HTML+CSS+JS 实现 ❤️全屏图片手风琴效果❤️
java李阳勇的博客
09-03 807
代码目录： 主要代码实现： css样式： * { padding: 0; margin: 0; } ul { list-style: none; } .list { width: 1000px; height: 500px; margin: 150px auto 0; } .list li { /* float:left; 可以使块级元素宽度可以被内容撑开*/ float: left; /* ...
HTML、CSS实现手风琴效果
GTC的博客
10-23 735
HTML、CSS实现手风琴效果
html+css+js，flex布局实现手风琴效果
I_ENJOY_LIFE的博客
07-21 478
html+css+JS使用flex简单实现手风琴效果，仅用于记录学习过程
HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记
ProgramNovice的博客
07-31 1255
HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记 这是我参与「第四届青训营」笔记创作活动的的第7天，利用HTML+CSS实现按钮手风琴效果。
HTML+css+js制作的手风琴效果网页
06-15
使用手风琴效果网页设计来美化自己网页内容； 整个网页是将CSS内联在了html的代码中；js中用到了for循环遍历，获取所有的li标签，添加点击事件，修改body的背景图片等一系列的操作。 希望本资源能给大家提供所需的...
html+css手风琴
01-29
【html+css】手风琴，实现手风琴效果展示图片
html+css应用手风琴.zip
04-27
html+css应用手风琴
js+css3手风琴展开收缩下拉菜单代码
06-05
这是一款扁平化风格js+css3手风琴展开收缩下拉菜单代码，带小图标，支持多级子菜单。
jQuery+CSS3炫酷手风琴特效
04-06
jQuery+CSS3炫酷手风琴特效是一款蓝色大气风格，鼠标点击带有梦幻气泡效果，滑动切换手风琴代码。
破解ReadOnly: 如何在HTML中灵活处理不可编辑字段
m0_57021623的博客
05-16 659
对于服务器端处理关键字段，如价格或折扣率，最佳实践是在服务器端重新计算这些值或从可信源（例如数据库）验证这些值，以确保数据的完整性和正确性。是HTML中用于表单输入字段的一个属性，它的目的是阻止用户修改输入字段的值，但允许用户提交表单时包含这些值。方法来修改页面元素的属性，提供了更多的灵活性和控制能力，特别是在处理那些通过HTML属性强制施加的限制时。，通常有其背后的理由，比如保护数据的完整性。对于一些关键字段，如价格、折扣率等，服务器端可以在每次处理前都重新计算或验证这些数据，而不是依赖前端提交的值。
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 328
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 136
HTML,CSS,JavaScript,DOM的理解
python+pytest+pytest-html+allure集成测试案例
最新发布
codelearning的专栏
05-21 235
为pytest-html的参数，运行测试后，会在当前路径下生成report.html的报告，同时html集成了CSS样式内容。下面是python+pytest+pytest-html+allure四个组件同时集成使用的简单案例。src/main.py文件内容如下，实现一个接口，通过requests的get方法请求测试站点的资源。为allure-pytest的参数，指定allure结果文件的路径。由于测试站点在国外，测试时偶尔会出现网络问题，可以多运行几次测试。文件，指示当前文件夹为一个包。
制作原神手风琴html
05-25
制作原神手风琴可以使用HTML和CSS实现。下面是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原神手风琴</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: center; } .card { width: 200px; height: 200px; margin: 10px; position: relative; cursor: pointer; transform: perspective(1000px) rotateY(0deg); transition: transform 0.5s; } .card:hover { transform: perspective(1000px) rotateY(180deg); } .front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .front { background-image: url("https://img.genshin.mihoyo.com/source/latest/meta/hero_icon/101.png"); background-size: cover; background-position: center; } .back { background-image: url("https://img.genshin.mihoyo.com/source/latest/meta/hero_card/101.png"); background-size: cover; background-position: center; transform: perspective(1000px) rotateY(180deg); } .card-title { position: absolute; bottom: 10px; left: 10px; color: white; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } </style> </head> <body> <div class="container"> <div class="card"> <div class="front"></div> <div class="back"></div> <div class="card-title">旅行者（男）</div> </div> <div class="card"> <div class="front"></div> <div class="back"></div> <div class="card-title">旅行者（女）</div> </div> <div class="card"> <div class="front"></div> <div class="back"></div> <div class="card-title">丽莎</div> </div> <div class="card"> <div class="front"></div> <div class="back"></div> <div class="card-title">琴</div> </div> <div class="card"> <div class="front"></div> <div class="back"></div> <div class="card-title">温迪</div> </div> <div class="card"> <div class="front"></div> <div class="back"></div> <div class="card-title">钟离</div> </div> </div> </body> </html> ``` 在这个示例中，我们使用了一个包含多个卡片的容器。每个卡片都有一个前面和后面。通过CSS的transform属性，我们可以实现卡片翻转的效果。我们还为每个卡片添加了一个标题。 你可以在示例中修改图片和标题，添加更多的卡片，以便制作自己的原神手风琴。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值