用css实现扑克牌,图片的翻转效果
话不多说,直接上代码!
1.实现商品图片的翻转以及信息的展示(下面代码仅是个人想要效果的HTML代码,所有的class名称可根据自身需求进行改动)
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>body {text-align: center;}.pictrue-animation {width: 1200px;height: 120px;background: pink;margin: 5px auto;}.pictrue-animation > .img-show {width: 120px;height: 120px;background: orange;margin: 0 15px;float: left;}.img-show > .pictrue-mc {display: block;width: 120px;height: 100px;margin: 0;text-decoration: none;}.pictrue-mc .xx-show {width: 90px;height: 18.5px;background: pink;line-height: 18.5px;border-bottom: 2px solid green;margin: 0 auto;}/*-------------------------扑克牌效果------------------------------------------*//*-----------------------------pukepai----------------------*/p .pictrue-show {width: 120px;height: 80px;border: none;margin: 20px 0;}.img-show .xx-showbz {width: 120px;height: 20px;line-height: 20px;}.img-show .pictrue-mc .xx-show,.img-show .xx-showbz {background: purple;text-align: center;font-size: 12px;color: white;display: none;}.img-show:hover {margin: 0 15px;}.img-show:hover .pictrue-mc #wrap .pictrue-show {margin: 0;padding: 0;}.img-show:hover .xx-show,.img-show:hover .xx-showbz {display: block;}#wrap {width: 120px;height: 80px;margin: 20px 0;padding: 0;position: relative;perspective: 800px;}#box {width: 120px;height: 80px;margin: 0;padding: 0;position: absolute;left: 0;top: 0;transform-style:preserve-3d;}#box p {width: 120px;height: 80px;position: absolute;backface-visibility: hidden;top: -36px;left: 0;}#box p:nth-of-type(1) {transition:.8s transform;}#box p:nth-of-type(2) {transform:rotateY(-180deg);transition:.8s transform;}#box:hover p:nth-of-type(1) {transform:rotateY(180deg);}#box:hover p:nth-of-type(2) {transform:rotateY(0deg);}</style></head><body><div class="pictrue-animation"><div class="img-show"><a href="" class="pictrue-mc"><span class="xx-show">长城</span><div id="wrap"><div id="box"><p><img src="img/9.jpg" alt="" class="pictrue-show" /></p><p><img src="img/7.jpg" alt="" class="pictrue-show" /></p></div></div></a><span class="xx-showbz">你值得拥有!</span></div><div class="img-show"><a href="" class="pictrue-mc"><span class="xx-show">长城</span><div id="wrap"><div id="box"><p><img src="img/9.jpg" alt="" class="pictrue-show" /></p><p><img src="img/7.jpg" alt="" class="pictrue-show" /></p></div></div></a><span class="xx-showbz">你值得拥有!</span></div><div class="img-show"><a href="" class="pictrue-mc"><span class="xx-show">长城</span><div id="wrap"><div id="box"><p><img src="img/9.jpg" alt="" class="pictrue-show" /></p><p><img src="img/7.jpg" alt="" class="pictrue-show" /></p></div></div></a><span class="xx-showbz">你值得拥有!</span></div><div class="img-show"><a href="" class="pictrue-mc"><span class="xx-show">长城</span><div id="wrap"><div id="box"><p><img src="img/9.jpg" alt="" class="pictrue-show" /></p><p><img src="img/7.jpg" alt="" class="pictrue-show" /></p></div></div></a><span class="xx-showbz">你值得拥有!</span></div><div class="img-show"><a href="" class="pictrue-mc"><span class="xx-show">长城</span><div id="wrap"><div id="box"><p><img src="img/9.jpg" alt="" class="pictrue-show" /></p><p><img src="img/7.jpg" alt="" class="pictrue-show" /></p></div></div></a><span class="xx-showbz">你值得拥有!</span></div><div class="img-show"><a href="" class="pictrue-mc"><span class="xx-show">长城</span><div id="wrap"><div id="box"><p><img src="img/9.jpg" alt="" class="pictrue-show" /></p><p><img src="img/7.jpg" alt="" class="pictrue-show" /></p></div></div></a><span class="xx-showbz">你值得拥有!</span></div><div class="img-show"><a href="" class="pictrue-mc"><span class="xx-show">长城</span><div id="wrap"><div id="box"><p><img src="img/9.jpg" alt="" class="pictrue-show" /></p><p><img src="img/7.jpg" alt="" class="pictrue-show" /></p></div></div></a><span class="xx-showbz">你值得拥有!</span></div><div class="img-show"><a href="" class="pictrue-mc"><span class="xx-show">长城</span><div id="wrap"><div id="box"><p><img src="img/9.jpg" alt="" class="pictrue-show" /></p><p><img src="img/7.jpg" alt="" class="pictrue-show" /></p></div></div></a><span class="xx-showbz">你值得拥有!</span></div></div></body></html>
2.通用实现图片翻转(说明:该代码来自其他大佬的博客代码,有所改编)
css代码
<style>#wrap {width: 320px;height: 200px;margin: 0 auto;position: relative;perspective:800px;}#box {position: absolute;left: 0px;width: 320px;height: 200px;transform-style:preserve-3d;}#box p {width: 100%;height: 100%;position: absolute;left: 0px;top: -30px;font-size: 28px;backface-visibility: hidden;color: #fff;}#box p img {width: 320px;height: 200px;}#box p:nth-of-type(1) {transition:.8s transform;}#box p:nth-of-type(2) {transform:rotateY(-180deg);transition:.8s transform;}#box:hover p:nth-of-type(1) {transform:rotateY(180deg);}#box:hover p:nth-of-type(2) {transform:rotateY(0deg);}</style>
首先,想要实现翻转效果,需要对其进行层定位,先设置一个舞台(即最外面的那个盒子),一个小盒子中放置一个图片。对最外面的盒子进行相对定位position:relative;其他盒子进行绝对定位position:absolute;
该例子中的p元素也可置换成一个div盒子
其次,就是我们需要将第一个图片放置最上面,另一张图片作为其反面,同时第二张图片最开始就要翻转180度,原因就是里面的正面显示的图片翻转过来之后,会将原来的图片呈现相反的效果,所以我们需要将里面的图片在显示时,就将其翻转(具体可以看代码展示效果)
核心代码如下:
#box p:nth-of-type(1) {
transition:.8s transform;
}
#box p:nth-of-type(2) {
transform:rotateY(-180deg);
transition:.8s transform;
}
#box:hover p:nth-of-type(1) {
transform:rotateY(180deg);
}
#box:hover p:nth-of-type(2) {
transform:rotateY(0deg);
}
也就是将最靠近图片的那个盒子进行上述操作,nth-of-type() 应该是一个伪类元素,我也不是很了解,有兴趣的可以自己去探索,在这就不多说。
实现扑克牌翻转,我们需要3D动画效果,并且是沿着y轴去翻转。
*html代码*
<!doctype html><html><head><meta charset="utf-8"><title>翻转</title></head><body><div id="wrap"><div id="box"><p><img src="../sheji/img/7.jpg" alt=""></p><p><img src="../sheji/img/9.jpg" alt=""></p></div></div></body></html>
图片自己寻找,大小一样ok,在这里的图片尺寸是320*200,
注意,当需要多个的时候,这里用class类型选择器id选择器要好,
因为id选择器是适合特例,特殊,优先级比class选择器要高
但是id选择器具有唯一性,不能使用多次,如果使用多次,DW会提示有错误。心得
总之,在困扰了我将近一周的时间,我终于找到了适合我的这些代码,希望对你们有帮助,一起学习,共同进步!
由于本人最近在练习如何写博客,有错误之处还请原谅。