Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Pokemon Card, Holo Effect
+
+ color-dodge
+
+ color-dodge
=
css
.card { width: 320px; height: 452px; background-color: #211799; background-image: url(https://www.jq22.com/tp/6375032873787060318138346.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center; border-radius: 8px; box-shadow: -3px -3px 3px 0 rgba(38, 230, 247, 0.6), 3px 3px 3px 0 rgba(247, 89, 228, 0.6), 0 0 6px 2px rgba(255, 231, 89, 0.6), 0 35px 25px -15px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; display: inline-block; vertical-align: middle; margin: 20px 10px; -webkit-animation: holoCard 15s ease infinite; animation: holoCard 15s ease infinite; } .card > span { position: relative; top: 45%; } .card:before, .card:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-image: linear-gradient(115deg, transparent 0%, #00e7ff 30%, #ff00e7 70%, transparent 100%); background-position: 0% 0%; background-repeat: no-repeat; background-size: 300% 300%; mix-blend-mode: color-dodge; opacity: 0.2; z-index: 1; -webkit-animation: holoGradient 15s ease infinite; animation: holoGradient 15s ease infinite; } .card:after { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif"); background-position: center; background-size: 180%; mix-blend-mode: color-dodge; opacity: 1; z-index: 2; -webkit-animation: holoSparkle 15s ease infinite; animation: holoSparkle 15s ease infinite; } .card.active:before { opacity: 1; -webkit-animation: none; animation: none; transition: none; background-image: linear-gradient(115deg, transparent 0%, transparent 25%, rgba(0, 231, 255, 0.7) 45%, rgba(255, 0, 231, 0.7) 55%, transparent 70%, transparent 100%); } .card.active:before, .card.active:after { -webkit-animation: none; animation: none; } .card:nth-of-type(1), .card:nth-of-type(2), .card:nth-of-type(3) { width: 160px; height: 226px; box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.4), 0 25px 15px -10px rgba(0, 0, 0, 0.5); } .card:nth-of-type(1):before, .card:nth-of-type(1):after, .card:nth-of-type(2):before, .card:nth-of-type(2):after, .card:nth-of-type(3):before, .card:nth-of-type(3):after { -webkit-animation: none; animation: none; opacity: 1; } .card:nth-of-type(1):before, .card:nth-of-type(1):after { display: none; } .card:nth-of-type(2) { background: none; } .card:nth-of-type(2):before { display: none; } .card:nth-of-type(3) { background: none; } .card:nth-of-type(3):before { background-position: center; } .card:nth-of-type(3):after { display: none; } .operator { display: inline-block; vertical-align: middle; font-size: 45px; } @-webkit-keyframes holoSparkle { 0%, 5% { opacity: 0.1; } 20% { opacity: 1; } 100% { opacity: 0.1; } } @keyframes holoSparkle { 0%, 5% { opacity: 0.1; } 20% { opacity: 1; } 100% { opacity: 0.1; } } @-webkit-keyframes holoGradient { 0%, 100% { opacity: 0; background-position: 0% 0%; } 8% { opacity: 0; } 10% { background-position: 0% 0%; } 19% { background-position: 100% 100%; opacity: 0.5; } 35% { background-position: 100% 100%; } 55% { background-position: 0% 0%; opacity: 0.3; } 75% { opacity: 0; } } @keyframes holoGradient { 0%, 100% { opacity: 0; background-position: 0% 0%; } 8% { opacity: 0; } 10% { background-position: 0% 0%; } 19% { background-position: 100% 100%; opacity: 0.5; } 35% { background-position: 100% 100%; } 55% { background-position: 0% 0%; opacity: 0.3; } 75% { opacity: 0; } } @-webkit-keyframes holoCard { 0%, 10% { transform: rotate3d(0, 0, 0, -20deg); } 20% { transform: rotate3d(1, 1, 0.2, 30deg); } 100% { transform: rotate3d(0, 0, 0, -20deg); } } @keyframes holoCard { 0%, 10% { transform: rotate3d(0, 0, 0, -20deg); } 20% { transform: rotate3d(1, 1, 0.2, 30deg); } 100% { transform: rotate3d(0, 0, 0, -20deg); } } body { color: white; background: #333844; font-family: "Heebo", sans-serif; display: flex; justify-content: center; vertical-align: middle; height: 100%; text-align: center; } html { height: 100%; } h1 { display: block; margin-top: 30px; margin-bottom: 5px; } p { margin-top: 5px; font-weight: 200; }
JavaScript
/* using - an animated gif of sparkles. - an animated gradient as a holo effect. - color-dodge blend mode this could be enhanced with some 3d effects which change the background positions */ var $cards = $(".card"); var $style = $(".hover"); $cards.on("mousemove", function(e) { var $card = $(this); var l = e.offsetX; var t = e.offsetY; var h = $card.height(); var w = $card.width(); var lp = Math.abs(Math.floor(100 / w * l)-100); var tp = Math.abs(Math.floor(100 / h * t)-100); var bg = `background-position: ${lp}% ${tp}%;` var style = `.card.active:before { ${bg} }` $cards.removeClass("active"); $card.addClass("active"); $style.html(style); }).on("mouseout", function() { $cards.removeClass("active"); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>卡片全息效果-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号