最近有个转盘抽奖的需求,搜了一下现有的轮子,有的是用jQuery的动画函数实现的,有的是用canvas绘图然后再用高频率的setTimeout调用旋转方法,前者太老了没法简单移植到vue项目,后者感觉性能表现可能不会太好…
标签:css3动画
仿支付宝滑块验证码效果的手机端实现
为了加强验证功能,减少APP的被攻击。队长要求做一个支付宝的滑块验证效果。除了它外观和用户体验上的优秀外,它的安全性并未降低,通过对用户行为的分析保证了安全校验。 通过查找大多数案例都是PC端展示效果,在手机端并不能友好…
css3制作广告栏效果的疑问?
本人新手,国庆苦逼加无用班,那是我在夕阳下的奔跑吗?闲来无聊整理以前学习的资料,关于广告栏的效果制作,详情观看这里。其中用了一个作者自己写的move.js插件也就是移动动画完成(重点就是定时器setinterval如果有…
用vue做一个酷炫的menu
写在前面 最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱?。?开个小玩耍,我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的vue和css3的知识. 本文结构…
前端动画专题(二):输入框特效
本文来自「心谭博客」的 《动画设计·输入框特效》,更多文章放在了 Github 欢迎交流和Star 特效一览 划线动态: 动态边框: 划线动态 效果图 原理和代码 :before 和 :after伪元素指定了一个元素文档…
Vue+CSS3实现转盘抽奖
最近有个转盘抽奖的需求,搜了一下现有的轮子,有的是用jQuery的动画函数实现的,有的是用canvas绘图然后再用高频率的setTimeout调用旋转方法,前者太老了没法简单移植到vue项目,后者感觉性能表现可能不会太好…
CSS 实现三角形,非 Hack
写过 HTML upvote arrow(向上箭头),speech bubble(对话气泡)或其他类似的尖角元素的人都知道,为了创建一个纯 CSS 实现的三角形,必须使用某些 Hack。最流行的两种方式是通过 边框实现,…
用css3实现ps蒙版效果+动画
说实话,css3越来越强大,使用css也可以做越来越多意想不到的效果。 今天,见到有人用css3实现了ps的蒙版效果,如下所示: 实现原理 这个动画,其实也并不复杂。它使用background-clip实现了文字蒙版的效…
【译】只用 CSS 就能做到的像素画/像素动画
只用 CSS 就能做到的像素画/像素动画 原文链接: box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる 作者推特: bc_rikko 作者的推特里面有不少例子,有能力的同学可以看一下 翻译博客…
CSS3动画实例——简书“喜欢”动画
在简书里面,每一篇文章底部都有喜欢这个按钮,如同上图的这个效果,体验非常好,究竟是怎么做的呢?首先,作为前端攻城狮的我们,来右键查看一波↓看到这个实际上是一个伪类,然后放的背景图片,我们把这个背景图片在新标签页中打开,会…
css3 动画(四)animation.css 源码分析
前言 上一篇 css3 动画(三)animation 简介 中只是简单的介绍了一下 animation 的子属性,并没有真正的使用。在本篇中,通过阅读 animate.css这个 css 的动画库,来加深对 css3 的…
css3 动画(二)贝塞尔曲线
前言 上一篇 css3 动画(一) transition 中,介绍了 transition 的用法。其中 transition 包含四个可设置的属性: 有过渡效果的属性 过渡时长 过渡函数? 过渡时延 其中,1、2 以及…