纯CSS翻牌图片特效

最新推荐文章于 2024-01-15 00:00:00 发布

Mr.王征

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量615

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/wangzhneg123/article/details/87366390

CSS 专栏收录该内容

32 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS翻牌图片特效</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
   padding:0;
   margin:0;
}
body {
   background:#333;
}
ul,li,ol {
   list-style-type:none;
}
a {
   text-decoration:none;
}
img {
   width:250px;
   height:400px;
   display:block;
   /*去除多余边框*/
}
#content {
   width:1200px;
   margin:50px auto 0;
}
#content ul {
   position:relative;
}
#content .bar li {
   width:250px;
   height:400px;
   float:left;
   margin-right:30px;
}
#content ul li a {
   width:250px;
   height:400px;
   display:block;
   position:relative;
   /*远近度*/
               perspective:400px;
   transition:all 1s;
}
#content ul li a>div {
   transition:all 1s;
   /*背面不可视*/
               backface-visibility:hidden;
}
#content ul li a:hover .forward {
   transform:rotateY(-180deg);
}
.tips {
   width:250px;
   height:400px;
   color:#fff;
   background:linear-gradient(#333,#666);
   transform:rotateY(180deg);
   transition:all 1s;
   position:absolute;
   top:0px;
   left:0px;
}
.tips p {
   text-indent:2em;
   line-height:1.5em;
   padding:20px;
   font-size:18px;
   font-weight:400px;
}
#content ul li a:hover .tips {
   transform:none;
   box-shadow:0 0 10px 5px pink;
   border-radius:10px;
}
</style>
</head>
<body>
<div id="content">
<ul class="bar">
<li>
<a>
<div class="forward">
<img src="https://img-blog.csdnimg.cn/20190215154342247.jpg">
</div>
<div class="tips">
<p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>
</div>
</a>
</li>
<li>
<a>
<div class="forward">
<img src="https://img-blog.csdnimg.cn/20190215154342247.jpg">
</div>
<div class="tips">
<p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>
</div>
</a>
</li>
<li>
<a>
<div class="forward">
<img src="https://img-blog.csdnimg.cn/20190215154342247.jpg">
</div>
<div class="tips">
<p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>
</div>
</a>
</li>
<li>
<a>
<div class="forward">
<img src="https://img-blog.csdnimg.cn/20190215154342247.jpg">
</div>
<div class="tips">
<p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>
</div>
</a>
</li>
</ul>
</div>

</script>

</body>
</html>