在日常开发中,UI同学总是会给挑出各种各样的问题,尤其是一些下拉框,总是想改这些隐藏较深的点,但是每次当我鼠标移动上去选中它的样式的时候,鼠标移走就消失了,真的很气人
table-striped配合 “:nth-child”选择器使用,来改变默认的颜色效果,也称之为隔行变色或斑马线,起到两种不同颜色变化的效果,条纹状态的表格
https://juejin.cn/post/6844904031513477128
直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样:
在码代码之前了,我们可以尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果?
为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常
前端爱好者的聚集地 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS。 在正常态时,每个导航的默认样式为: nav li{ opacity: 0.5; } 当前页面的导航透明度为1. 为了实现这个目的: 首先通过bo
本文主要讲述两种下划线动效效果,第一种悬停时X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左。
首先是Html代码,习惯上会将菜单放在一个div里,使用盒子模型,方便以后的操作和设置样式。
经常在页面开发中,需要使用hover事件来触发相应的网络请求或页面DOM元素显示切换,需要考虑的问题就有了:
今天在写一个demo的时候,发现CSS3中transform变换的一个特性。 首先,我先描述一下我发现的情况(问题再现):
HTML5学堂(码匠):在前端开发中,针对效果层面的开发,使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果,我们能否考虑借助某些简单方便的操作来替代原生JS的使用呢? 本
怎么来实现它呢?我们首先写一个简单的页面,实现鼠标移入移除或者点击显示隐藏效果。
最近在设计自己的博客,前端页面在内容很多的时候往下拖动会有滚动条。通常我们都需要一个返回顶部的功能来实现快速来到网页顶部。当然实现方式不止一种,这里我采用的最实用的一种。使用CSS+Jquery方式 代码量相对较少,容易理解。
通过调用封装的组件,部署组件DOM结构和其上面的参数完成动画效果的添加,同时用户可以更改组件的参数以及自定义组件的样式来实现所需要的展示效果。
关注 JS 太久,会养成任何功能都用 JS 实现的习惯,而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好,我们要综合使用技术工具,而不是只依赖 JS。
请注意,本文编写于 2075 天前,最后修改于 173 天前,其中某些信息可能已经过时。
有不同的页面主题风格:Base,bootstrap 3,jquery UI, Foundation, Semantic UI.
用于表单 form,点击会出发 submit(提交) 和 reset(重置) 事件
最近项目中有一个 Hover 的效果,当选中其中一个元素的时候高亮展示,其余的元素透明度 0.5,虽然使用 JS 的方案通过监听鼠标的移入移出来实现,但是实属多余。
之前发表过一种样式的“返回顶部、返回底部、评论”效果,今天在这里分享Devework.com目前使用的效果:一个博客侧边滑动,返回顶部,查看评论的小工具,作为WordPress等博客专用。说到这个小工具,可是小有来头啊,据说(强调是“据说”)这原来是一位WordPress高手林木木首创的(人家称之为“滑动导航”),然后被某人改进做成了WordPress 插件,并且成功提交到WordPress官方去了。所以说不是自己的一定要说明来源,不然...;最后说一句,这个挺像插件wp-auto-top,姑且当做是wp-
之前做了一个纯 HTML+CSS 网站,完全没有 JS 代码,大家可以点击这个链接体验一下 https://woopen.github.io/ssp/ 。
-transition:max-height:0.5s使用默认的ease时间函数在0.5秒内过渡max-height的值。
CSS中有很多媒体查询的用法,例如设备尺寸判别,是否支持鼠标行为,是否是黑暗模式,是否是省电模式等。
我开发过基于QT的客户端程序、基于C# WinForm客户端,开发过Java后端服务,此外,前端VUE和React我也开发过不少。对应我所开发过的东西,比起一行一行冰冷的代码,我更加迷恋哪些能够直观的,可视化的东西。还记得以前在开发C#的时候,接触过一个的C# WinForm库NetronGraphLib,这个库能够让我们轻松的构建属于自己的流程图绘制软件,让我们能够以拖拉拽的方式来构建图(下图就是NetronGraphLib库的官方示例应用Cobalt):
在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三个特效,希望这三个特殊能让大家受到启发,利用css3做出更好,更炫的动画效果,并且对比这三个特效和JS特效的对比,希望能帮助到是大家学到CSS3的一些知识。今天这三个案例可以说是一个预习或者热身吧,以后也会写关于CSS3更好的作品或者文章,最近我也是在编写一个css3的动画库!
JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短。 本篇接我另一篇讲述 CSS 伪元素的文章: 【CSS进阶】伪元素的妙用–单标签之美,看完本文觉得有意思的可以再去看看上一篇,分享了一些伪元素的妙用。 正文从这里开始: 哪些标签不支持伪元素? 我也是才知道这个姿势。为了不误导读者,就赶紧补充一下。 伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的。 诸如
| 导语 基于实际业务场景使用ECharts的经验,总结一些通用的解决方案。 应用场景 用流动关系图来映射品牌之间的有效换机数量,从而帮助运营对手机品牌的行情做分析和预测。 图形说明 一期:图形中间为分析主品牌;左侧为流入品牌,曲线粗细=换机数大小(流入量);右侧为流向品牌信息,曲线粗细=换机数大小(流出量); 二期:为降低信息复杂度,中间品牌支持切换为单个品牌(观察品牌)。 最终实现效果如下图所示: 一期 [展示品牌过多,线条过密,信息复杂度较高] 二期 [ 中间品牌支持切换为单个品牌
之前用darkmode.js给主题适配了一个暗黑模式,操作很简单,但体验感不是很好,于是用了几天就干掉了。
想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来活力 hover效果能给网页增加一些动态效果,并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微差强人意,所以请使用FireFox,Safari
1. 父子关系 .a:hover .b{color:red}; 2. 同级相邻元素 .a:hover + .b{color:red}; 3. 同级不相邻元素 .a:hover ~ .b{color:red}; ps: 1. 同级相邻或者不相邻都可以使用 ~; 2. 这里的同级指b标签必须在a的后面,若是前面,则不起效果,使用js控制。
分享一件关于在激活PhpStorm时的一件趣事,(屏蔽网站) C:\Windows\System32\drivers\etc 路径下的hosts文件, 打开hosts文件之后,我们会发现在hosts文件的最下面,有这样一行:
HTML5学堂(码匠):前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。 本文主要内容 1. 效果展示 2. 涉
hover效果的插件.gif *第一步: 安装 cnpm install hover.css -s 第二步: 在main.js 中引入 import 'hover.css' 第三步: 使用 /// 直接添加类名 就可以 hvr-rectangle-out 动画.gif
大家好,本篇文章小编将和大家一起学习 4 个 Hover 相关的动效案例,这 4 个案例分别是 Anchors(链接锚点)、Tooltips(提示层)、Card Content(内容卡片)、Button(按钮)相关的 Hover 效果,由于篇幅原因,本文只介绍前两个案例。
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发的
这是一款带视觉特效的js密码强度检测特效。该特效在用户输入密码的时候,随着密码强度的增强,旁边的图像会越来越清晰或越来越模糊,通过图像的变化来提示用户密码的强度。
嗨嗨嗨,好久没更新小程序专栏了,本期浅浅用小程序写一个计算器。 最终代码会上传至资源噢~
组件是视图层的组成单元,具有UI风格样式及特定的功能效果。当打开某款小程序后,界面中的图片,文字等多需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果,一个组件开始包括标签和结束标签,属性用来装饰这个组件的样式。
做不同的好看的效果一直是做一个小前端的目标,都希望可以做出不一样的页面,炫酷的页面,但是技术有的时候跟不上的时候只能是模仿,看别人是怎么做的,其实模仿的过程也就是学习的一个过程,能看明白别人的代码也是一种进步,今天就简单的讲述一下如果用bootStrapUI框架做一个图片轮播的效果。
仿佛奇怪的问题总是喜欢找上那些初学者。当我在学习制作网页的时候,经常遇到一些很特别的问题。例如:刚刚添加的样式不起作用、jQuery 的代码老是不起作用等等,这些问题往往是不关注细节导致的。而今天我要谈的这个细节,就是关于网页中代码的顺序。没错,代码也是有顺序的,顺序不对有可能会出现一些意外的情况。
一个好的前端界面中很重要的内容就是动画,使用符合场景的动画不仅可以优化网站页面中的交互细节,提高用户体验,还可以让页面更具有吸引力,给网站带来更多访问量。如果你还不具备手写各种骚动画的能力,那么下面介绍的这几个动画库可得收藏好了~
当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。
注: 在版本jQuery 1.4中,.support 替换掉了.browser 变量
领取专属 10元无门槛券
手把手带您无忧上云