纯css实现图片带倒影效果的hover翻转特效

效果图：

<template><div class="glassReflection"><div class="scene"><div class="card"><div class="showCard showCardFront"><img src="../showFiles/3.png" /></div><div class="showCard showCardBack"><img src="../showFiles/2.jpg" /></div></div><div class="card"><div class="showCard showCardFront"><img src="../showFiles/4.jpg" /></div><div class="showCard showCardBack"><img src="../showFiles/5.jpg" /></div></div></div></div>
</template><script>
export default {};
</script><style scoped>
.glassReflection {width: 60%;height: 95%;margin: 1%;display: flex;justify-content: space-around;align-items: center;background: rgba(0, 0, 0, 0.8);
}
.scene {width: 90%;display: flex;justify-content: space-around;align-items: center;/* perspective: 800px; */
}
.card {position: relative;width: 15rem;height: 16rem;color: white;cursor: pointer;transition: 1s ease-in-out;transform-style: preserve-3d;
}
/* 固定宽高的父元素触发，子元素翻转，如果直接对元素hover触发，元素翻转过程中，
元素区域变小，光标很有可能就脱离元素，造成不顺畅 */.card:hover .showCardFront {transform: rotateY(0.5turn);
}
.card:hover .showCardBack {transform: rotateY(0);
}
.showCard {position: absolute;top: 0;left: 0;width: 100%;height: 100%;backface-visibility: hidden;transition: 1s ease-in-out;/* 倒影(-webkit-box-reflect)属性值有：dirrection-方向:above向上，below向下，left向左，right向右。offset距离：可以是数值，也可以是百分比 */-webkit-box-reflect: below 0linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
}
img {width: 15rem;height: 16rem;-o-object-fit: cover;object-fit: cover;
}
.showCardBack {transform: rotateY(0.5turn);
}
</style>

纯css实现图片带倒影效果的hover翻转特效相关推荐

纯CSS将图片转换成黑白
纯CSS将图片转换成黑白几行代码就可以实现!效果非常好! 1. 正常效果截图鼠标悬停前后,分别示下: 2. 非正常效果截图:代码设置的不同,显示的效果不同! 比如:下面的设置导致图片效果不好! 参 ...
纯CSS翻牌图片特效
使用图片 <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...
CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
纯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图片百叶窗首先给大家看一下完成效果主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表 ...
code block怎样实现图形界面_纯CSS实现图片百叶窗展示效果
主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表里,相互叠加,鼠标移动的同时改变列表的宽度. ...
HTML点击图片下方出现阴影,纯css实现图片点击时移动效果和阴影效果
有人喜欢用js加css实现这样的效果,而我比较喜欢用最简单的方法实现这样的效果,因为我是个简单的人,所以我要做最简单实用的事儿(hei hei)...好处就是:简单,方便操作,给服务器减少压力,对se ...

纯css实现图片带倒影效果的hover翻转特效

纯css实现图片带倒影效果的hover翻转特效相关推荐

最新文章

热门文章