目录
css实现图像填充文字
css实现手风琴效果
css实现网站变灰色
elementUi的导航栏效果
css实现滚动吸附效果
鼠标经过，元素内部放大
css实现图像填充文字
效果图：
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS图像填充文字</title><style>.text {background-image: url(./imgs/1.webp);/* 一定要让背景透明，这样后面的背景能透出来 */color: transparent;font-size: 50px;text-align: center;/* 以 盒子内 文字 作为 裁剪区域 ，向外 裁剪，文字之外 的 区域 都将 被 裁剪掉 */-webkit-background-clip: text;/* 这行代码是为了不让vscode报警告 */background-clip: text;}</style></head><body><div class="text"><h3>CSS</h3><p>CSS图像填充文字</p></div></body>
</html>css实现手风琴效果
效果图：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.kodfun-galeri {display: flex;width: 500px;height: 20rem;/* 设置网格行与列之间的间隙 */gap: 1rem;margin: 50px auto;}.kodfun-galeri>div {flex: 1;/* 圆角 */border-radius: 1rem;/* 背景位置，可以接收两个值 x 和 y。只写一个，则表示x的值，y的值就为center */background-position: center;/* 背景是否平铺 */background-repeat: no-repeat;/* 背景图尺寸，宽auto自动，高100% */background-size: auto 100%;/* background-size: cover; *//* 过渡效果，因为鼠标经过，div标签flex占的份数有变化，所以过渡要写到div的css属性里 */transition: all .8s cubic-bezier(.25, .4, .45, 1.4);cursor: pointer;}/* 核心：鼠标经过，改变div占的flex份数 */.kodfun-galeri>div:hover {flex: 5;}</style>
</head><body><div class="kodfun-galeri"><div style="background-image: url('./images/0.png');"></div><div style="background-image: url('./images/1.png');"></div><div style="background-image: url('./images/2.png');"></div><div style="background-image: url('./images/6.png');"></div><div style="background-image: url('./images/8.png');"></div></div>
</body></html>css实现网站变灰色
效果图：
代码：（给html添加 filter: grayscale(1) 即可）
<!DOCTYPE html>
<html lang="en" style="filter: grayscale(1)">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.box {width: 100%;height: 100%;background-color: skyblue;}</style>
</head>
<body><div class="box">一行代码实现网站变灰色</div>
</body>
</html>elementUi的导航栏效果
效果图：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}header {position: fixed;top: 0;width: 100%;height: 60px;/* background-color: pink; *//* 径向渐变 */background-image: radial-gradient(transparent 1px,#fff 1px);/* 背景缩放 */background-size: 4px 4px;/* 元素后面区域添加 饱和度 和 模糊效果 */backdrop-filter: saturate(50%) blur(4px);}main {height: 200vh;margin-top: 60px;background-color: skyblue;text-align: center;}</style>
</head><body><header>头部</header><main>内容部分</main>
</body></html>css实现滚动吸附效果
效果图：
超过一半，会自动吸附过去
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}li {list-style: none;}.box ul {/* 防止换行 */white-space: nowrap;/* 设置水平媳妇效果 两个参数，第一个参数设置x轴或者y轴，第二个参数设置吸附方式 */scroll-snap-type: x mandatory;/* scroll-behavior: smooth; *//* 启用水平滚动条 */overflow-x: scroll;}.box ul li {/* 设置为行内块元素，让li一行显示 */display: inline-block;width: 100vw;line-height: 300px;text-align: center;background-color: pink;font-size: 50px;/* 设置吸附位置，去只有 start center end */scroll-snap-align: start;/* scroll-snap-stop: always; */}.box ul li:nth-child(2) {background-color: skyblue;}.box ul li:nth-child(3) {background-color: hotpink;}</style>
</head><body><div class="box"><ul><li>A</li><li>B</li><li>C</li></ul></div>
</body></html>鼠标经过，元素内部放大
效果图：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.box {position: relative;overflow: hidden;width: 200px;height: 200px;margin: 50px auto;cursor: pointer;border: 1px solid #ccc;border-radius: 5px;}.box>img {width: 100%;height: 100%;/* 因为是图片放大，所以过渡需要给图片添加 */transition: all .3s;}.box>span {position: absolute;bottom: 5px;left: 50%;transform: translateX(-50%);color: #fff;font-size: 13px;}.box:hover>img{transform: scale(1.4);}</style>
</head><body><div class="box"><img src="./imgs/1.jpg" alt=""><span>详情...</span></div>
</body></html>附图：
