一款3D展开收缩的卡片-网格布局的图文列表,点击任意图文上面的向下箭头,都会3D展开详细的文字说明内容和一个按钮,同时高亮显示当前的图文消息(其余均被白色遮罩),展开之后向下的箭头会自动变形为“叉号”,点击“叉号”可以恢复到原始状态。
页面的head部分,需引入页面的CSS样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,用了多个div容器的嵌套结构,代码如下:
<div class="cards">
<div class="card">
<img src="http://s4c.cymru/temp/wave1.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
<!-- 省略部分演示代码 -->
<div class="card">
<img src="http://s4c.cymru/temp/wave2.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
</div>
页面的底部,需引入jQuery库和必要的JS文件,代码如下:
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791