bilibili景深对焦banner效果

最新推荐文章于 2025-05-28 16:50:43 发布

原创

最新推荐文章于 2025-05-28 16:50:43 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html

bilibili景深对焦banner效果

效果分析

benner共分为6个图层，6个图层在鼠标hover状态下改变translatex和blur
鼠标在左边，1,2两图较为清晰
鼠标在中间，3,4两图较为清晰
鼠标在右边，5,6两图较为清晰

6个图片，按照顺序排列，图片垂直水平居中，填充整个父元素；

object-fit、object-position

用于对图片进行剪切、缩放、拉伸等，同时可以保留原始比例；一般适用于img和video标签；

object-fit：指定元素的内容，如何适应容器的高度与宽度；
- fill：默认值，不保证保持原始的比例，把内容拉伸填充整个容器；
- contain：保持原有比例，内容被缩放；
- cover：保持原有比例，部分内容可能被剪切；
- none：保留原有的宽度和高度，不做修正；
- scale-down：保持原有比例，内容尺寸按照contain和cover中的一个进行调整，哪个更小用哪个
object-position：根据容器大小重置图片大小，设置元素的位置
- 第一个值为X坐标值，第二个为Y坐标值
- object-position：50% 50%；
- object-position：right top；
- object-position：250px 250px;

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>景深对焦效果</title>
    <link rel="stylesheet" href="day_12.css">
</head>
<body<