纯CSS翻牌图片特效

<!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>

纯CSS翻牌图片特效相关推荐

CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
超详细的纯CSS的照片墙特效
超详细的纯CSS的照片墙特效你好,欢迎来到Amy的第一篇博客呀~ 此博客纯属个人原创哦~ 前些天在公开课上讲过一个类似于拍立得的照片特效,然后在一个页面上放了多张就形成了一个照片墙,效果如下: 鼠标 ...
纯CSS将图片转换成黑白
纯CSS将图片转换成黑白几行代码就可以实现!效果非常好! 1. 正常效果截图鼠标悬停前后,分别示下: 2. 非正常效果截图:代码设置的不同,显示的效果不同! 比如:下面的设置导致图片效果不好! 参 ...
纯CSS实现图片动画
纯CSS实现图片动画 1.先网上下载一张sprites动画图片,直接百度搜sprites图片就可. 2.用css设置一个关键帧,确定好起始位置和终止位置, 通过background-position调 ...
如何用纯CSS将图片填满div，自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
纯css实现图片自动闪光划过效果
纯css实现图片自动闪光划过效果 <!DOCTYPE html> <html> <head> <meta name="viewport" ...
纯CSS实现图片百叶窗展示效果
纯CSS图片百叶窗首先给大家看一下完成效果主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表 ...
图片轮播html实现原理,纯CSS实现图片轮播
原文:http://www.aichengxu.com/view/4182590 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好总共花费的 ani ...
纯css实现图片带倒影效果的hover翻转特效
效果图: <template><div class="glassReflection"><div class="scene"> ...

纯CSS翻牌图片特效

纯CSS翻牌图片特效相关推荐

最新文章

热门文章