人物图像拖动滚动效果
代码语言:html
所属分类:加载滚动
代码描述:人物图像拖动滚动效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.documentElement.className = "js";
var supportsCssVars = function () {
var e,
t = document.createElement("style");
return (
(t.innerHTML = "root: { --tmp-var: bold; }"),
document.head.appendChild(t),
(e = !!(
window.CSS &&
window.CSS.supports &&
window.CSS.supports("font-weight", "var(--tmp-var)")
)),
t.parentNode.removeChild(t),
e
);
};
supportsCssVars() ||
alert(
"Please view this demo in a modern browser that supports CSS Variables."
);
</script>
<style>
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
--search-box-height: 54px;
--avatar-size: 44px;
--bg-color: #d8d8d8;
--color-white: #ffffff;
--shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
body {
background: var(--bg-color);
}
.search-outer {
max-width: 500px;
height: var(--search-box-height);
margin: 100px auto 0 auto;
position: relative;
overflow-x: hidden;
background: #fff;
box-shadow: var(--shadow);
border-radius: var(--search-box-height);
}
.search-inne.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0