昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一.流星动画 首先创建一个 div 作为画布 <div id="stars"> <div class="star" style="top: 0px;left: 500px;"></div> </div> html, body { width: 100%; height: 100%; margin:; o…

我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会考虑去使用微信官方提供的wx.createAnimation  API来创建动画. 接下来我带各位小伙伴如何让 transition 属性在这种需求中好使起来,下面上代码 page({ data: { show:false//用于显示或隐藏控件 }, chanMask:function(){ var…

前言 有点零乱,但是我想写下来慢慢整理,搭建一个好点的工程-模式MVC, 会包括一些第三方库,动画库,第三方库管理关联,自定义常用控件的管理和关联 1.预编译文件的创建 在build setting 搜索Prefix Header将里面的空白路径改为 $(SRCROOT)/xxxxxxxx(你的工程名字)/PrefixHeader.pch 其中PrefixHeader是你自己创建的pch文件 文件里一般会添加两个框架: #ifndef Carloans_PrefixHeader_pch #def…

前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧, 先创建一个带名称的@keyframes规则,以便后续使用 animation-name 这个属性来调用指定的@keyframes. 每个@keyframes 规则包含多个关键帧,也就是一段样式块语句,每个关键帧有一个百分比值作为名称,代表在动画进行中,在哪个阶段触发这个帧所包含的样式. 关键帧的…

点击上方"前端自习课"关注,学习起来~ 我们在打开APP或者网站的时候,经常可以看到这样的效果,在内容加载完成之前,会有一个骨架动画的出现,这种加载方式比传统的进度条方式要友好的多,但是很多朋友都不知道这种效果是如何做出来的,下面我们一步步的来看看吧. 设计Web上的加载状态常常被忽略或被认为是事后考虑.性能不仅是前端开发人员的职责,构建与慢速连接一起工作的体验也是设计挑战.虽然前端开发人员需要注意一些事情,比如压缩和缓存,但是设计人员必须考虑UI处于"加载"或&q…

摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: 明白正方形的画法. 明白圆形的画法. 明白什么是定位. 明白怎么旋转. 话不多说,先教大家怎么用css画一个圆形. .disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300…

写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾告一段落,搞完毕设的开题报告后去学习新的内容. 有人对我说类似的效果网上已经有了呀,直接拿来就可以用,为什么还要写.我个人的观点是:第三方控件多数不能完全满足UI的要求,如果需要修改,那么必须理解他的实现,所以很有必要自己去写一款出来,成为程序的创造者,而不单单是使用者.所以,写一写已经实现的效果,…

摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: 明白正方形的画法. 明白圆形的画法. 明白什么是定位. 明白怎么旋转. 话不多说,先教大家怎么用css画一个圆形. .disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300…

原创作品,转载请注明出处:http://blog.csdn.net/qiujuer/article/details/39831451 前段时间Android L 公布了,相信看过公布会了解过的朋友都为当中的 "Material Design" 感到由衷的惊艳吧!至少我是的. 在惊艳之余感到由衷的遗憾,由于其必须在 "Android L" 上才干使用.MD.郁闷啊. 之后便自己想弄一个点击动画试试,此念头一发不可收拾:干脆一不做二不休,就重写了一个 "Mat…

原文:uwp - 做一个相对炫酷的动画按钮/按钮动画 看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验.效果图: 动画分为几个部分,分别是:内圆从中心放大(1)并同时渐隐(2),外圆从中心放大(3)并同时渐隐(4),按钮整体从中心缩小放大(5),非常简单对吧,代码也是. 为了方便调用,我用一个自定义用户控件来做,图标是用iconfont,这样可以在任何地方使用,首先新建[AnimationButton.xaml]用户控件,前台代码将自动生成的部分…