这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti…
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g…
使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静下心来看看这边文章,如果你能彻底理解这篇文章中使用的技术,那么,一切滑动冲突的问题解决起来就轻而易举了:先扔一个最终实现的效果图 先分析下效果图中实现的功能点 顶部下拉时背景图形成视差效果 上拉时标题栏透明切换显示 底部实现TabLayout+ViewPager+Fragment+RecyclerV…
现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBuilder这个类里的transitionsBuilder方法. 不过这个方法还是有很多写法的,通过写法的不同,产生的动画效果也有所不同. 1.渐隐渐现的动画效果 先编写一个主入口方法,还是最简单的格式,只不过home属性,使用的RouterFirst的组件是我们自定义的,需要我们再次编写.入口文件的…
巧用 CSS 实现酷炫的充电动画 循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了.有了电池,那接下来直接充电吧.最最简单的动画,那应该是用色彩把整个电池灌满即可. 方法很多,代码也很简单,直接看效果: 有内味了,如果要求不高,这个勉强也就能够交差了.通过蓝色渐变表示电量,通过色块的位移动画实现充电的动画.但是总感觉少了点什么. 增加阴影及颜色的变化 如果要继续优化的话,需要添加点…
此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了. 更多动画效果及Flutter资源:https://github.com/781238222/flutter-do 添加依赖 在项目的 pubspec.yaml 文件中添加依赖: dependencies: wheel_switch: ^0.0.1 执行命令: flutter pub get 使用 WheelSwitch( value: false, ) 组件默认的宽高分别是80.30,也可以指定宽高: Wh…
最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG 滤镜完成的该效果,感兴趣的可以戳源码看看. 其中,要想灵活运用 SVG 中的 feGaussianBlur 滤镜还是需要有非常强大的 SVG 知识储备的.那么,仅仅使用 CSS 能否实现该效果呢? 嘿嘿,强大的 CSS 当然是可以的.本文,就将带领大家一步步使用纯 CSS,完成上述效果. 借助 S…
一.打开原图素材,用钢笔工具把人物从图中扣取出来,新建一个812 * 1024像素的文档,把抠出的人物拖进来,过程如下图. 二.用你习惯的修图工具把人物的手.脸部.腰部.袜子通通修掉.再补回衣服在透视状态下的大概造型.这两个步骤因每个人的习惯而异,我用的都是钢笔工具来修整,填充. 三.用同样的方法修正好其余要出水的部位,透视效果修补的时候最好用黑色来填补,这样会更突出水的层次感.修补后的大概效果如下图. 四.打开下列的水珠喷溅素材.由于PSD文件较大,下面的是分开图,点小图浏览大图.把大图直接定…
展示地址 点此下载 原文出处 一.参数说明 item : '.item', //项目元素 top : 30, //与下一行的间距 pointWidth : 22, //时间点宽度 cornerWidth : 22, //corner宽度 scroll : true //点击时间点,是否滑动 二.CSS样式 /*时间轴样式*/ #TimeLine{width:100%;height:auto;min-height:600px;position:relative;padding:20px 0;mar…
上效果图,用截屏工具制作的,看起来有点卡,在网页上面显示还是不错的. CSS代码: <style type="text/css"> .loader{ position: absolute; width: 2.5em; height: 2.5em; //border: 1px solid rgba(100,156,136,0.15); border-radius: 50%; //box-shadow: 0 0 0.5em rgba(100,156,136,0.75); tra…