今天应UED的要求对项目的滚动条进行美化，原生的滚动条虽然很实用，但确实不美观。用了一些css美化后::-webkit-scrollbar{height: 9px;width: 9px;}::-webkit-scrollbar-thumb {border-radius: 10px;background-color: rgba(157, 165, 183, 0 …
最新内容
需求：当页面很长，有滚动条时，需要固定页面上的部分元素，便于下方元素和上方固定元素的对照。.box1{width: 100%;height: 50px;background: skyblue;}.box2{width: 100%;height: 50px;background: darkorange;position: sticky;top: 0;}.box …
css3中的transition和transform配合可以做出许多好玩的东西来，下面我们来说说这哥俩配合做出来的一个应用及其广泛而实用的干货。请拿走，不谢！这个应用在展示网站模板或者图册显示应用很广泛！一、先看效果：二、效果说明：当鼠标移动到div或者是a链接的时候，图片向上滚动，直到显示完全，当鼠标移开的时候，图片回到最开始的位置。三、效果分析：向上滚动 …
JS方法：$("body").attr('style','overflow-y:hidden') 这个是解决竖状滚动条横向 需要把overflow-y改成overflow-x即可CSS办法：一、防止图片撑破DIV方法一 原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为500px（像素），那你上传的图片 …
这 66 个特效，是我历时4个多月在油管一个一个跟着敲出来的，为了加强记忆，每个练习，我都录制了视频，在这里分享出来给大家。大家可能又会调侃了，你是工作不饱和吧，有时间做这些。其实，我目前工作还是挺饱和的，都是挤出来的。我们是9点上班，我基本7点半就到公司自学了，这样我就有一个半小时的时间来做这些了。对于 CSS 评价，无论是在论坛还是身边的人，我听到最多的 …
<!DOCTYPE html><html><head><meta charset="utf-8"><title>滚动字体的设置<title><head><body><canvas id="canvas1" width=" …
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验我们可以把网页解刨成：背景层、内容层、悬浮层使用css形式实现视觉差滚动效果的方式有：background-attachmenttransform:translate3Dbackground-attachment作用是设置背景图像是否固定或 …
1. clamp()函数：流体布局神器应用场景：苹果官网响应式字号、淘宝商品卡片宽度自适应。代码案例 ：<style>.clamp-text {font-size: clamp(1rem, 2vw, 2rem);line-height: 1.2;padding: 15px;background-color: green;}<style> …
前言在网页设计和前端开发中，CSS属性是非常重要的一部分。掌握常用的CSS属性不仅可以使你的网页看起来更美观，还能提升用户体验。，今天小编为大家介绍8个常见的CSS小技巧：1.修改滚动条样式下图是常见的滚动条，现在需要改变滚动条的宽度和颜色了，并把它画的圆一点。可以用::-webkit-scrollbar来实现：* 设置滚动条的宽度*::-webkit-sc …
纯 CSS 和 JS 的原生平滑滚动你想要一个平滑的滚动吗？ 忘记 JQuery，我们已经过去了。 让我向您介绍我们的原生平滑滚动工具。CSS 滚动行为CSS scroll-behavior 属性接受三个值之一 - 实际上是两个值，因为其中一个已被弃用。scroll-behavior: auto 是我们已经习惯的默认即时滚动行为。scroll-behavio …