Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Juno Solves 39-Year Old Mystery of Jupiter Lightning
›
Engineers Solve Excessive Heat Removal from NASA’s Webb Telescope
›
NASA Finds Ancient Organic Material, Mysterious Methane on Mars
›
NASA to Host Live Discussion on New Mars Science Results
›
20 Years of Earth Data Now at Your Fingertips
›
Astronomers Spot a Distant and Lonely Neutron Star
›
Astronauts Safely in Orbit Following Launch to International Space Station
›
As Solar Wind Blows, Our Heliosphere Balloons
›
Tiny Asteroid Discovered Saturday Disintegrates Hours Later Over Southern Africa
›
css
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400'); *, *:before, *:after{ box-sizing: border-box; } * { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; margin: 0; padding: 0; } *:focus { outline: none!important; } body{ margin: 0; padding: 0; background: #131313; color: #f5f5f5; font-family: 'Fira Sans'; text-align: left; overflow-x: hidden; overflow-y: hidden; } .container{ width:100vw; height: 100vh; display: flex; flex-flow: row; perspective: 1000px; perspective-origin: center; } .col{ height: 100%; transition: transform 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000), opacity 300ms ease; transform: translateZ(34px) scale(.98); flex: 0 0 33.3333%; position: relative; } .col:nth-of-type(1){ transform: rotateY(5deg) translateZ(34px) scale(.98); } .col:nth-of-type(3){ transform: rotateY(-5deg) translateZ(34px) scale(.98); } .col:hover, .col:focus{ transform: translateZ(34px); transition: transform 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), opacity 300ms ease; } .card-container{ position: relative; width: calc(100% - 25px); height: calc(33.3% - 25px); margin: 17px; padding: 8px; text-align: center; opacity: .89; } .card-container:hover, .card-container:focus{ opacity: 1; } .overlay{ display: block; position: absolute; cursor: pointer; width: 50%; height: 50%; z-index: 1; transform: translateZ(34px); } .overlay:nth-of-type(1){ left: 0; top: 0; } .overlay:nth-of-type(2){ right: 0; top: 0; } .overlay:nth-of-type(3){ bottom: 0; right: 0; } .overlay:nth-of-type(4){ bottom: 0; left: 0; } .overlay:nth-of-type(1):hover ~ .card, .overlay:nth-of-type(1):focus ~ .card{ transform-origin: right top; transform: rotateX(3deg) rotateY(-3deg) translateZ(0); } .overlay:nth-of-type(2):hover ~ .card, .overlay:nth-of-type(2):focus ~ .card{ transform-origin: left top; transform: rotateX(3deg) rotateY(3deg) translateZ(0); } .overlay:nth-of-type(3):hover ~ .card, .overlay:nth-of-type(3):focus ~ .card{ transform-origin: left bottom; transform: rotateX(-3deg) rotateY(3deg) translateZ(0); } .overlay:nth-of-type(4):hover ~ .card, .overlay:nth-of-type(4):focus ~ .card{ transform-origin: right bottom; transform: rotateX(-3deg) rotateY(-3deg) translateZ(0); } .card{ border-radius: 5px; height: 100%; transition: all 300ms ease-out; align-items: center; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; position: relative; z-index: 0; opacity: .89; padding: 13px 21px; } .card:before, .card:after{ content: ''; position: absolute; left:0; top: 0; display: block; width: 100%; height: 100%; opacity: .21; transition: transform 300ms ease; transform: scale(.98); } .card:before{ background-size: cover; background-position: 50% 50%; } .card-container:hover .card:before, .card-container:hover .card:after, .card-container:focus .card:before, .card-container:focus .card:after{ opacity: .34; transform: scale(1); } .col:nth-of-type(1) .card-container:nth-of-type(1) .card:before{ background-image: url('https://picsum.photos/500?image=1000'); } .col:nth-of-type(2) .card-container:nth-of-type(1) .card:before{ background-image: url('https://picsum.photos/500?image=1001'); } .col:nth-of-type(3) .card-container:nth-of-type(1) .card:before{ background-image: url('https://picsum.photos/500?image=1002'); } .col:nth-of-type(1) .card-container:nth-of-type(2) .card:before{ background-image: url('https://picsum.photos/500?image=1003'); } .col:nth-of-type(2) .card-container:nth-of-type(2) .card:before{ background-image: url('https://picsum.photos/500?image=1004'); } .col:nth-of-type(3) .card-container:nth-of-type(2) .card:before{ background-image: url('https://picsum.photos/500?image=1005'); } .col:nth-of-type(1) .card-container:nth-of-type(3) .card:before{ background-image: url('https://picsum.photos/500?image=1006'); } .col:nth-of-type(2) .card-container:nth-of-type(3) .card:before{ background-image: url('https://picsum.photos/500?image=1009'); } .col:nth-of-type(3) .card-container:nth-of-type(3) .card:before{ background-image: url('https://picsum.photos/500?image=1008'); } .card:after{ background: linear-gradient(to bottom, rgba(0,0,0,0) 50%,rgba(0,0,0,0.89) 100%); } h4{ text-align: left; font-size: 18px; font-weight:400; transform: translateY(5px); transition: transform 450ms cubic-bezier(0.390, 0.575, 0.565, 1.000); max-width: 320px; outline: 1px solid transparent; } .overlay:hover ~ .card h4, .overlay:focus ~ .card h4{ transform: translateZ(144px); } .card > span{ font-size: 34px; opacity: 0; transform: translateX(-3px); transition: all 300ms ease; } .card-container:hover > .card > h4, .card-container:focus > .card > h4{ transform: translateY(-13px); } .card-container:hover > .card > span, .card-container:focus > .card > span{ opacity: 1; transform: translateX(3px); animation: slideRight 300ms ease; } @media (max-width: 768px){ body{ overflow-y: scroll; } h4{ font-size: 17px; } } @media (max-width: 540px){ .container{ flex-flow: column; perspective: none; } .col:nth-of-type(1), .col:nth-of-type(2), .col:nth-of-type(3), .col:hover{ transform: none; } h4{ padding-bottom: 8px; font-size: 18px; } .card > span{ display: none; } } @media (max-height: 599px){ .card > span{ display: none; } } @media (max-width: 860px) and (max-height: 540px){ h4{ font-size: 14px; } } @media (max-width: 620px) and (max-height: 540px){ h4{ font-size: 13px; } }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS 3D卡-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号