接上篇：前端必看的8个HTML+CSS技巧（下）

原文：https://blog.csdn.net/TriDiamond6/article/details/105222289

.wrapper { height: 100wh;}.parallax-img { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");}p { font-size: 20px; padding: 1.5rem 3rem; min-height: 1000px; // 当你的文字内容不够，也能撑出足够的高度来看到效果，当然如果你文字足够多，就不需要了}

<div class="block"> <img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax" /> <h2>视差速度 -1</h2></div><div class="block"> <img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax" /> <h2>视差速度 1</h2></div>

html, body{ margin: 0; padding: 0; height: 100%; width: 100%; font-family: 'Amatic SC', cursive;}.block{ width: 100%; height: 100%; position: relative; overflow: hidden; font-size: 16px;}.block h2{ position: relative; display: block; text-align: center; margin: 0; top: 50%; transform: translateY(-50%); font-size: 10vw; color: white; font-weight: 400;}.img-parallax { width: 100vmax; z-index: -1; position: absolute; top: 0; left: 50%; transform: translate(-50%,0); pointer-events: none}

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script>// 循环获取每一个图片元素$(".img-parallax").each(function () { var img = $(this); var imgParent = $(this).parent(); function parallaxImg() { var speed = img.data("speed"); // 获取每张图片设置了的偏移速度 var imgY = imgParent.offset().top; // 获取图片盒子所在的Y位置 var winY = $(this).scrollTop(); // 获取当前滑动到的位置 var winH = $(this).height(); // 获取浏览器窗口高度 var parentH = imgParent.innerHeight(); // 获取图片盒子的内高度

 // 浏览器窗口底部的所在位置 var winBottom = winY + winH; 

 // 当前图片是否进入浏览器窗口 if (winBottom > imgY && winY < imgY + parentH) { // 运算图片需要开始移动的位置 var imgBottom = (winBottom - imgY) * speed; // 运算出图片需要停止移动的位置 var imgTop = winH + parentH; // 获取从开始移动到结束移动的%（根据开始与结束像素 + 移动速度） var imgPercent = (imgBottom / imgTop) * 100 + (50 - speed * 50); } img.css({ top: imgPercent + "%", transform: "translate(-50%, -" + imgPercent + "%)", }); } $(document).on({ scroll: function () { parallaxImg(); }, ready: function () { parallaxImg(); }, });});</script>

勾选裁剪图片 <input type="checkbox" /><br /><img src="https://img-blog.csdnimg.cn/2020032122230564.png" alt="Random"/>

input { transform: scale(1.5); /* 只是用来放大复选框大小 */ margin: 10px 5px; color: #fff;}img { width: 1920px; height: 1080px; transition: 0s;}/* css选择器锁定复选框被选中时的状态 */input:checked + br + img { width: 500px; height: 500px; object-fit: cover; object-position: left-top; transition: width 2s, height 4s;}

<h1>混合模式：颜色减淡</h1>

h1 { mix-blend-mode: color-dodge; font-family: yahei; font-size: 5rem; text-align: center; margin: 0;  padding: 20vh 200px; color: #D1956C; } html, body { margin: 0; background-color: white; } body { background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80); background-repeat: no-repeat; background-size: cover; min-height: 100vh; overflow: hidden; }

<div class="columns"> <figure> <img src="https://source.unsplash.com/random?city" alt="" /> </figure> <figure> <img src="https://source.unsplash.com/random?night" alt="" /> </figure> <figure> <img src="https://source.unsplash.com/random?developer" alt="" /> </figure> <figure> <img src="https://source.unsplash.com/random?building" alt="" /> </figure> <figure> <img src="https://source.unsplash.com/random?water" alt="" /> </figure> <figure> <img src="https://source.unsplash.com/random?coding" alt="" /> </figure> <figure> <img src="https://source.unsplash.com/random?stars" alt="" /> </figure> <figure> <img src="https://source.unsplash.com/random?forest" alt="" /> </figure> <figure> <img src="https://source.unsplash.com/random?girls" alt="" /> </figure> <figure> <img src="https://source.unsplash.com/random?working" alt="" /> </figure></div>

.columns { column-width: 320px; column-gap: 15px; width: 90%; max-width: 1100px; margin: 50px auto;}.columns figure { display: inline-block; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); column-break-inside: avoid; border-radius: 8px;}.columns figure img { width: 100%; height: auto; margin-bottom: 15px; border-radius: 8px;}