首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

手写原生代码专题 | 图片拖拽效果(一)

但是前端发展实在太快,各种框架和组件五花八门,由于项目业务时间问题,我们都习惯了使用各种框架和组件去实现,以至于离开这些东西,我们有可能连个最基础动效都不清楚怎么实现,这就是我想写这个系列文章原因...二、 图片拖拽效果介绍 本篇文章,如下视频所示,界面有5个方格拖放区域,我们可以在这些区域里拖拽图片,当鼠标拖动图片时,图片周围有灰色粗边框效果提示用户当前元素可拖动,可放置图片目标方格会出现白色虚线边框并且背景色更改为黑色...拖动至目标位置元素时,为了让用户更直观感受到哪些位置是可以放置目标元素,我们需要给其定义 hovered 样式,进入目标位置元素时,样式发生改变,背景为黑灰色,并有白色边框虚线。...接下来我们分别来定义相关事件函数, dragstart :当图片目标刚被拖动时,我们为元素添加灰色粗边框属性 .hold,并将当前此元素容器背景div隐藏,这里使用样式 invisible。...鼠标放下时,拖拽动作结束,触发dragend事件,我们定义 dragEnd() 函数,图片元素容器样式改为fill。

2.2K30

关于无障碍设计七件事

换句话来说,当文本大小是24px或18px加粗或者更大时,白色文本背景使用最浅灰色是#959595。 ?...上图为#959595文本白色背景 对于较小文本,白色背景,可以使用最浅灰色是#767676。如果使用灰色背景,那么文本颜色就要更深。 ?...IE浏览器自带灰色虚线边框或是Chrome自带蓝色光晕就不是很讨人喜欢。 ? 但是,问题是大多数网站都没有建立自己焦点样式。...这些焦点样式是“键盘用户”(只能使用键盘和网站交互的人)顺利使用网站基础。 想体验一下不能全方位提供视觉焦点网站?你可以直接访问Apple公司官网—反复按“tab”键页面中浏览。...菜单是一个为用户提供选择列表组件。 一旦变成菜单每行提供多个选项,如上图左边例子所示,这就不是菜单了。 键盘交互模型从使用箭头键更改为使用Tab键。

3K30
您找到你想要的搜索结果了吗?
是的
没有找到

CSS selectors level 4

你用来做一些操作比如说选择某种类型所有元素,就像下面这样: div { /* 一些应用在所有 div 元素样式 */ } 或者你可以选择一个父元素下最后一个子元素: ul li:last-child...{ /* 一些只应用在列表最后一个子元素样式 */ } 当然,你也可以去做一些复杂事情,比如说选择选择列表中除了最后一个子元素之外所有子元素。...事实,这样做方法不止一种,一些方法甚至复杂。...它选择那些被标记为中文元素(或者选择其他语言标记元素,只需要把zh改为其他语言代码就可以了)或者用繁体字书写元素(或者在其他字符系统中,-hant替换为其它字符代码)。... Codepen 试试 :focus-visible 浏览器支持 它选择一个处于焦点状态元素(与:focus伪类匹配),浏览器通常会为了让获得焦点元素清晰可见,给它添加一个焦点环。

65520

Vercel推出前端AI工具v0,会改变前端么?

下面截取了他返回代码一部分,注意其中红框中组件背景色是白色: 现在,我继续提问:「背景使用渐变蓝色」,chatGPT重新输出了组件代码,并把背景改为渐变蓝色: 可以看到,每次提出修改意见,chatGPT...当我们向chatGPT提到「标题」时,他能理解指的是邮箱收集页标题。 但当应用变得复杂,存在很多「标题组件」,让chatGPT理解你需求就得费一番功夫了。 使用v0就没有这方面困扰。...我们可以对v0生成页面中每个组件、每个元素单独提问。比如,对于上述「邮箱收集页标题改为渐变色」需求,首先用v0生成邮箱收集页。...现在我们希望标题改为渐变色,只需要选择标题部分并提出「增加一个渐变色」: 就能得到如下结果: 即使再复杂页面,提问时,v0会将组件对应上下文一并发送给大模型,模型能清楚知道要修改哪个组件。...我们可以v0当作一款应用场景更广低代码工具,用于快速生成原型代码。从这个角度看,他对前端影响还局限提效工具(而不是替代前端)。

82910

点击按钮背景灰色,松开恢复原来色

demo有的页面有100多个列表项,需要点击列表项时候背景灰色,松开后背景恢复原来色,这个样式加上才让人清楚地看到是点击哪一个按钮,视觉友好。...最初时候我是想用js逻辑去修改样式,如果点击了,那么就改为灰色,松开后,再改为白色。结果demo有100多个列表项,我也不可能加上100多个监听,我突然想起以前学事件代理,然后就实践了一把。.../li> 这是li22222 这是li33333 这是li44444 只要是li标签,移动端点击时候就是改为灰色...如果ul上面有其他样式导致click-style无效的话,ul外包裹一层divdiv绑定click-styleid选择器即可。...我微信x5、safari、chrome测试都可以,android和ios这么写都是没问题。(不知道是不是视觉原因,我觉得ios比android反应更灵敏)

45110

高级CSS技巧:7个选择器,无限设计可能性

这些选择器帮助您简化代码,提高可维护性,并使您网站在视觉更具吸引力。1. :nth-child() 选择器:选择器:nth-child()允许您根据特定元素父元素中位置来定位特定元素。...您可以对每个第 n 个元素应用不同样式,这对于创建交替背景、编号列表甚至复杂网格布局非常有用。...这是一个简单例子:ul li:nth-child(even) { background-color: #f2f2f2;}此代码片段选择ul具有浅灰色背景元素中偶数列表项并设置其样式。2....这对于隐藏或设置空元素样式非常方便,例如空 div 或段落:div:empty { display: none;}在此示例中,空元素将从视图中隐藏。6....:焦点可见选择器:选择:focus-visible器是一个CSS伪类,当元素处于焦点并且用户使用键盘或其他非鼠标输入方法与页面交互时,它以元素为目标。

52940

【CSS】骨架屏 Skeleton 效果

加入 body 选择器,设定背景颜色是浅灰色,字体是 Helvetica,文字大小是 15px,然后用 Flexbox 方式内容上下左右居中。...去到 CSS 部份, body 里面的 justify-content 设定值,更改为 space-evenly,这样两张卡就可平均分配空白位置。...我们有三个位置需要加入灰色骨架,分别是图片、标题和内文。所以这三个选择器背景颜色都设定为浅灰色。...不过这还不够,我们需要左右预留一些缓冲,才可以光由外面扫入,所以先把它改为 120%。...可以看到扫光效果已出现了,我想它扫入时候快一点,间隔时间稍多一点,可以直接原来 background-position-x 更改为更大值,例如 180%,这样背景就因为需要移动更长距离,从而达到效果

2.3K41

如何轻松自定义WordPress登录页面

关于WordPress好处是后端每个部分都可以通过使用php 函数进行自定义。 今天教程中,我向您展示如何以您希望方式自定义WordPress登录屏幕。...首先,我们更改徽标,然后更改配色方案和其他一些元素。让我们开始吧。 默认WordPress登录屏幕 ? 我们要建立什么 ? 更改徽标 WordPress使用CSS来显示背景图像。...首先,我们需要在二十四个WordPress默认主题CSS文件夹中创建样式表(对于本教程,我样式表命名为custom-login-styles.css),然后functions.php文件中添加以下钩子...我们首先使用以下代码自定义登录屏幕背景颜色和字体。...body.login { background-color: #3d3d3d; font-family: Helvetica; } 现在我们已经更改了登录屏幕背景颜色和字体,让我们登录表单持有者放置一个漂亮灰色背景

2.6K20

每个前端开发需要了解10个强大CSS属性

/* 设置滚动条宽度 / ::-webkit-scrollbar{ width: 10px; } / 轨道改为蓝色并设置圆角边框 / ::-webkit-scrollbar-track{ background-color...: blue; border-radius: 10px; } / 滑块(显示滚动量)改为灰色并设置圆角 / ::-webkit-scrollbar-thumb{ background: gray...鼠标指针样式 鼠标悬停在元素时,改变鼠标指针样式。...Box Reflect Box Reflect 能够组件下方创建其反射效果。对于这个演示,我使用了一个SVG波浪图像,我是通过这个网站获取。...如果支持,执行第一个规则块中样式规则;如果不支持,则执行第二个规则块中备用样式规则。 这种方式可以用来检查任何CSS属性支持情况,以便根据支持情况应用不同样式规则。

24120

《前端5分钟》之使用纯css实现网站换肤和焦点图切换动画

收获 •网站换肤设计方案介绍•:target伪类介绍和用法以及如何使用css实现网站换肤•transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 ? 2.焦点图动画 ?...实现思路 1.网站换肤 通常我们实现网站换肤都基于如下方式实现: •方案一: 使用OOCSS模式,通过js动态切换公共类名来达到换肤效果•方案二: 点击不同按钮切换不同样式表,如下:•theme-green.css...以上几个方案都可以实现一定程度上换肤效果,但是如果是一些基础性换肤,比如网站背景样式,某个按钮样式,某块内容区域样式等等这种局部换肤,我们能不能直接用css来实现呢?...以上介绍方案都很成熟,我们可以直接拿来使用,但是为了追求简洁和代码量最低,我们有办法用纯css实现一个简单焦点图切换动画吗?...)•《css大法》之使用伪元素实现超实用图标库(附源码) 实现思路如下: 1.建立焦点图和控制点对应关系2.初始化页面时只让第一个焦点图有宽度,其他宽度都设置为零,当控制点激活时,然控制点对应目标对象宽度设置为正常值

4.1K20

前端基础-JQuery操作样式

第6章 JQuery操作样式 6.1 CSS操作 功能:设置或者修改样式,操作是style属性。...操作单个样式 // name:需要设置样式名称 // value:对应样式值 // $obj.css(name, value); // 使用案例 $('#one').css('background...','gray');// 背景色修改为灰色 设置多个样式 // 参数是一个对象,对象中包含了需要设置样式名和样式值 // $obj.css(obj); // 使用案例 $('#one').css({...(name); // 案例 $('div').css('background-color'); 注意:获取样式操作只会返回第一个元素对应样式值。...6.2 jQuery尺寸和位置操作 6.2.1 width方法与height方法 设置或者获取高度,不包括内边距、边框和外边距 // 参数表示设置高度 $('img').height(200); //

1.2K10

《前端技巧复盘》使用纯css实现网站换肤和焦点图切换动画

收获 •网站换肤设计方案介绍 •:target伪类介绍和用法以及如何使用css实现网站换肤 •transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 2.焦点图动画 实现思路...1.网站换肤 通常我们实现网站换肤都基于如下方式实现: •方案一: 使用OOCSS模式,通过js动态切换公共类名来达到换肤效果 •方案二: 点击不同按钮切换不同样式表,如下: •theme-green.css...样式表 以上几个方案都可以实现一定程度上换肤效果,但是如果是一些基础性换肤,比如网站背景样式,某个按钮样式,某块内容区域样式等等这种局部换肤,我们能不能直接用css来实现呢?...以上介绍方案都很成熟,我们可以直接拿来使用,但是为了追求简洁和代码量最低,我们有办法用纯css实现一个简单焦点图切换动画吗?...) •《css大法》之使用伪元素实现超实用图标库(附源码) 实现思路如下: 1.建立焦点图和控制点对应关系2.初始化页面时只让第一个焦点图有宽度,其他宽度都设置为零,当控制点激活时,然控制点对应目标对象宽度设置为正常值

3.8K30

大胆尝试这些新CSS属性,释放CSS力量吧(一)

当用户页面上某个元素聚焦(例如,输入框或按钮),并且该元素是其祖先元素(例如,一个表单或一个包含该输入框 div)内子元素时,祖先元素匹配 :focus-within。...通常用于样式化或增强当前拥有焦点元素,例如,更改输入框边框颜色或文本区域背景颜色。 不会选择包含有焦点元素父元素。...: lightgray; } 在上面的示例中,当用户点击输入框时,输入框自身会具有蓝色边框(使用 :focus 选择器),同时包含有焦点输入框容器 .container 也会变为灰色背景使用 :focus-within...总之,:focus-within 选择器用于选择包含有焦点元素祖先元素,而 :focus 选择器用于样式化具有焦点元素本身。这两个选择器可以一起使用,以创建丰富交互体验。...Windows,一些用户需要“高对比度”主题,其中操作系统强制使用减少调色板来代替我们定义颜色。调色板填充系统颜色值,替换背景、文本、按钮和链接颜色等内容,而像盒子阴影这样样式则被删除。

19520

【总结】1873- 一个前端非侵入式骨架屏自动生成方案

,并且 base64 图片可以非常灵活作为页面背景图,不对页面中其他 DOM 节点造成干扰,具有注入量更小、使用更灵活特点,因此本方案骨架屏注入阶段默认注入 base64 图片作为页面背景图。...目前 base64 图片一般用作页面背景图,HTML源码用于骨架屏出现不符合预期色块时问题定位。 骨架屏注入默认使用 base64 图片作为页面背景图方式。...避免页面未完全加载完时就进行相关操作,最终操作结果和预期不一致。 文本块处理 文本块处理相对比较复杂,一段文本(单行或多行),要将文本替换为和文本长度相同灰色背景。...下面我们队这样一个多行文本做处理: 能够想到一个比较直接方法是给文本容器增加灰色背景色,但是添加后效果往往是这个样子。...div> css: 效果如图: 图片块处理 图片处理逻辑较为简单,所有 img 标签 src 设为 1x1px 灰色 base64 图片 ,背景色也设为相同色值灰色

34412

JQuery第二节

操作单个样式 //name:需要设置样式名称 //value:对应样式值 css(name, value); //使用案例 $("#one").css("background","gray");//...背景色修改为灰色 设置多个样式 //参数是一个对象,对象中包含了需要设置样式名和样式值 css(obj); //使用案例 $("#one").css({ "background":"gray...$(“div”).addClass(“one”); 移除样式类 //name:需要移除样式类名 removeClass(“name”); //例子,移除div中one样式类名 $(“div”).removeClass...:执行效果,默认为swing(缓动) 可以是linear(匀速) // callback:动画执行完后立即执行回调函数(可选) 动画队列与停止动画 同一个元素执行多个动画,那么对于这个动画来说,...,自身保留(清理门户) $(“div”).empty();//清空div所有内容(推荐使用,会清除子元素绑定内容,源码) $(“div”).html(“”);//使用html方法来清空元素,不推荐使用

1.1K20

BootStrap应用开发学习入门

背景基本结构 CSS样式: BS中已经定义好了一套CSS样式表 布局组件: 用于创建图像、下拉菜单、导航、警告框、弹出框等等 JS插件: BootStrap定义了一套JS插件,这些插件已经默认实现了很多种效果...偏移列 描述:偏移是一个用于专业布局有用功能, 可用来给列腾出更多空间; 为了大屏幕显示器使用偏移,请使用 .col-md-offset-*类,其中 * 范围是从 1 到 11。...#按钮状态 .active #按钮激活时呈现为被按压外观(深色背景、深色边框、阴影)按钮元素 / 锚元素 .disable #禁用一个按钮时,它颜色会变淡 50%,并失去渐变。...class="btn-group"> 结合到一个 中,一般获得复杂组件。....text-danger #"#text-danger" 类文本样式 .text-hide #页面元素所包含文本内容替换为背景图(文本隐藏) #背景颜色,文本是个链接鼠标移动到文本上会变暗

17.4K20
领券