Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Top 10 in Jhey's Pens Today
Impossible Checkbox
Newton's Light Bulbs
Pure CSS Tic Tac Toe
Turbo Kitty
Pure CSS Drawers
CSS 3D Studio Room
Code Name: RamBear
Care Bear Needs Love
HSL Dimmer Switch
Tuggable Light Bulb
css
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap"); *, *:before, *:after { box-sizing: border-box; font-family: 'Roboto', sans-serif; } :root { --bg: #141414; --size: 50vmin; --height: var(--size); --width: calc(0.6875 * var(--size)); --font-size: calc(0.74 * var(--size)); --gap: calc(0.22 * var(--size)); } body { background: var(--bg); min-height: 100vh; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: start; justify-content: start; font-family: 'Roboto', sans-serif; } .top-picks { max-width: 100%; padding: 0 2rem; } .top-picks__track { height: var(--height); margin: 0; padding: 0; display: -webkit-box; display: flex; list-style-type: none; padding: 0 var(--gap); max-width: 100%; overflow-x: auto; overflow-y: visible; counter-reset: index; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .top-picks__title { color: #fff; font-size: clamp(1.2rem, 5vmin, 3rem); font-weight: 700; } .top-picks__item { overflow: hidden; width: calc(var(--width) + var(--gap)); -webkit-box-flex: 0; flex: 0 0 calc(var(--width) + var(--gap)); position: relative; list-style: none; counter-increment: index; padding-left: var(--gap); scroll-snap-align: center; } .top-picks__item.item:hover img { -webkit-filter: saturate(100%); filter: saturate(100%); } .top-picks__item .item__card { width: var(--width); position: absolute; right: 0; top: 0; bottom: 0; border-radius: 2vmin; background: #242424; overflow-x: hidden; } .top-picks__item .item__card:after { position: absolute; content: ''; bottom: 1rem; right: 1rem; height: 1.5rem; width: 1.5rem; background-size: cover; background-repeat: no-repeat; } .top-picks__item .item__card img { position: absolute; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-filter 0.2s; transition: -webkit-filter 0.2s; transition: filter 0.2s; transition: filter 0.2s, -webkit-filter 0.2s; -webkit-filter: saturate(50%); filter: saturate(50%); } .top-picks__item .item__card span { text-decoration: none; position: absolute; top: 2rem; right: 2rem; max-width: 50%; text-align: right; color: #fff; font-weight: bold; font-size: clamp(1rem, 2vmin, 2rem); text-shadow: 0.5vmin 0 2vmin var(--bg); } .top-picks__item:after { content: counter(index); position: absolute; color: var(--bg); font-size: var(--font-size); line-height: 0.7; bottom: 0; font-weight: bold; letter-spacing: -5vmin; left: 0; -webkit-text-stroke: 0.5vmin #fff; text-shadow: 1vmin 0 4vmin var(--bg); -webkit-transform: translate(-14%, 0); transform: translate(-14%, 0); }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css横向排行榜布局-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号