<!DOCTYPE html>
<!-- saved from url=(0062)http://www.jsdaima.com/Uploads/js/201708/1501808353/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>炫酷3D卡片翻转显示图文信息特效动画代码</title>
<meta name="keywords" content="炫酷3D,卡片翻转,显示图文信息,特效动画,代码">
<meta name="description" content="炫酷3D卡片翻转显示图文信息特效动画代码下载，纯CSS样式控制，没有任何js代码。">
<meta name="author" content="js代码">
<meta name="copyright" content="js代码">
<link rel="stylesheet" type="text/css" href="./炫酷3D卡片翻转显示图文信息特效动画代码_files/style.css">
</head>
<body>
<div class="wrapper">
<h1>炫酷3D卡片翻转显示图文信息特效动画代码</h1>
<div class="cols">
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(./炫酷3D卡片翻转显示图文信息特效动画代码_files/img/1.jpg);">
<div class="inner">
<p>健康</p>
<span>饮食运动</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>合理的饮食，适量的运动，充足的睡眠。</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image:url(./炫酷3D卡片翻转显示图文信息特效动画代码_files/img/2.jpg);">
<div class="inner">
<p>快乐</p>
<span>笑口常开</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>释放所有压力，乐观的心态很重要，微笑吧！</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(./炫酷3D卡片翻转显示图文信息特效动画代码_files/img/3.jpg);">
<div class="inner">
<p>财富</p>
<span>向上心态</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>财富实际上是一种心态，TA取决于你怎么想问题。</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(./炫酷3D卡片翻转显示图文信息特效动画代码_files/img/4.jpg);">
<div class="inner">
<p>自由</p>
<span>心神向往</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>身心一致，做自己喜欢做的事情，才是真正的自由。</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(./炫酷3D卡片翻转显示图文信息特效动画代码_files/img/5.jpg);">
<div class="inner">
<p>幸福</p>
<span>充满希望</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>永远相信，美化的事情正发生在我身上！</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(./炫酷3D卡片翻转显示图文信息特效动画代码_files/img/6.jpg);">
<div class="inner">
<p>感恩</p>
<span>感恩生活</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>感恩我们所拥有的一切，这样或许会有跟多收获哦。</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(./炫酷3D卡片翻转显示图文信息特效动画代码_files/img/7.jpg);">
<div class="inner">
<p>真诚</p>
<span>待人以诚</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>发自内心的真诚，对待身边所有的人！</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(./炫酷3D卡片翻转显示图文信息特效动画代码_files/img/8.jpg);">
<div class="inner">
<p>拼搏</p>
<span>自强自立</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>爱拼才会赢，相信自己能做到，行动起来吧！</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
炫酷3D卡片翻转显示图文信息特效动画代码
需积分: 9 106 浏览量
2017-11-15
13:51:25
上传
评论
收藏 325KB RAR 举报
炫酷3D卡片翻转显示图文信息特效动画代码.rar （11个子文件） 
炫酷3D卡片翻转显示图文信息特效动画代码.html 5KB
炫酷3D卡片翻转显示图文信息特效动画代码_files 
protect.js 709B img 
2.jpg 63KB 8.jpg 28KB 6.jpg 28KB 1.jpg 45KB 4.jpg 42KB 5.jpg 32KB 7.jpg 49KB 3.jpg 35KB style.css 4KB资源评论
