css按钮交互效果
是利用了:active和box-shadow两个特性来实现的。希望通过这个简单效果,能让更多的朋友喜欢上css。首先来说一下:active,就是当用户按住一个a标签的时候的意思,鼠标点击下去但没有松开的时候就这样样子啦。
时间: 2019-08-16阅读: 20标签: 效果
Vue实现网页放大镜效果
组件使用less,请确保已安装loader,本组件为放大镜组件,传参列表为:width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍,picList:必传,传入图片列表
时间: 2019-08-09阅读: 46标签: 效果
js实现弹幕效果
弹幕是一个很常见的功能,下面是本人封装的一个小小的实现方案,存在不足之处可以提出来或自由改进。直接上代码:效果如图:点击开启弹幕按钮:
时间: 2019-08-02阅读: 54标签: 效果
父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案
最近使用 vuedraggable 做拖拽效果。不过因为要用到滚动条而使用了 overflow: scroll,导致了两个奇怪的效果,虽然折腾了一段时间,不过最后我还是将这些奇怪的 bug 解决了。
时间: 2019-07-30阅读: 51标签: 效果
Vue实现吸顶效果
因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的。因为在css中我们可以设置一个元素的position: fixed;
时间: 2019-07-26阅读: 83标签: 效果
如何用 CSS Animations 实现滑动图片展现文字的效果
在这篇文章中,我希望能带领大家了解一下 CSS animation property ,以及详细地解释我的个人网站 中的一个效果:让文字在移动的物体后出现。如果你想要看最后的成果,这里有一个例子 。
时间: 2019-07-24阅读: 67标签: 效果
原生js实现放大镜效果
我们平时在电商网站购物时,需要对选取的某一个商品进行详情查看,此时当鼠标在商品图片上某一部分移动查看时旁边就会出现一个该部分图片的放大效果,这样就能够更好的对商品进行分析,下面就使用原生js来实现一下类似放大镜的效果
时间: 2019-07-21阅读: 60标签: 效果
Vue.js实现tab切换效果
在我们平时浏览网站的时候,经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后,开始要写出一些简单的特效。实现思路是点击上方的标题,下方的内容随之发生改变
时间: 2019-07-19阅读: 4标签: 效果
web页面实现镂空遮盖层效果
可以看到除了中间框选的部分,其他区域被一层半透明层覆盖(backdrop),这种效果不知道专业叫法,这里称呼它“镂空遮盖层”。实际业务需求中倒是不多见,比较常见的是“页面上的新手引导”,“视频网站的关灯模式”等用到这种效果
时间: 2019-07-12阅读: 30标签: 效果
css实现开关效果
我们使用<input type=\\\\\\\"checkbox\\\\\\\">标签来实现这个效果。checkbox的选中、未选中的特性,刚好对应开关的打开、关闭;on:打开 off:关闭;开始画出off、on状态的草图
时间: 2019-07-03阅读: 82标签: 效果
Js实现时钟效果
在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。
时间: 2019-06-30阅读: 40标签: 效果
以轮播效果为案例谈如何写优质代码
作为程序员大家在写代码时谈的最多的就是代码的拓展性、复用性。本文就以大家熟悉的轮播效果为案例,讲一讲写优质代码的思路和实践。文章分三个步骤。第一步,实现基本功能
时间: 2019-06-28阅读: 99标签: 效果
原生JS快速实现拖放(drag and drop)效果
拖放是很常见的一种交互效果,很多时候我们都会借助于第三方的控件来实现,其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果:
时间: 2019-06-23阅读: 101标签: 效果
CSS :placeholder-shown伪类实现输入框浮动文字效果
当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的:label标签是关联表单元素,提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在<input>元素内的文本
时间: 2019-06-13阅读: 137标签: 效果
css3的transform:tanslateZ没有效果
关于css动画tansform:translateZ(100PX)没有效果的记录,之前学习cs3动画就学的迷迷糊糊的,这次项目中刚好用到了cs3动画,遇到了一个问题,记录下来,方便后期查阅
时间: 2019-06-08阅读: 93标签: 效果