程序猿必备的10款web前端动画插件二

1.菜单悬停效果的展示

一些菜单链接悬停效果为您的灵感。由CSS和JavaScript为单个字母动画提供支持。今天,我们希望与您分享一些菜单悬停效果。我们希望这一套启发你,并为你的下一个项目提供一些想法。这些效果是由CSS或仅在anime.js的帮助下提供动力。有些还使用Charming,用于个别字母效果。

2.带有动画图像效果的实验

一组带有动画图像效果的实验,其中图像被打碎成矩形片段。由anime.js提供支持。在制作开发者/设计师页面布局概念之后,我们想要为图片上的部分动画尝试一些不同的效果。有很多可能的动画片段,所以我们做了一些演示,显示不同的效果。动画由anime.js提供支持。

3.CSS网格布局幻灯片

每个幻灯片都有一个单独的CSS网格布局和浏览时的显示效果。我们希望与您分享一个由CSS网格支持的幻灯片。这个想法是以艺术的方式显示几个图像,并为每张幻灯片应用不同的布局。在幻灯片之间浏览时,我们还会播放显示和隐藏项目的显示效果。

4.新的字母效果和动画

一组新的字母效果和动画,用于俏皮的排版交互。我们玩弄悬停和点击交互来创建一些有趣的排版动画。对于一些动画,我们使用anime.js。Charming.js可以帮助我们处理字母所需的结构。

5.SVG clipPath对图像进行变形悬停效果

这个想法是通过动画悬停的几个元素来创造一个有机的,流畅的感觉。玩过一些滚动变形的背景形状后,我们想在这个演示中探索一些悬停效果。通过变换SVG路径,我们可以在悬停上创建一些有机的,飘逸的动作。在SVG上这样做clipPath可以让我们在图像上使用这种效果。

6.免费图标集UI图标(SVG,EPS,PDF,PNG)

Icons8 Dusk图标是一个独特的免费赠品,有80种柔和色彩的图标,有多种不同的格式,非常适合全新的界面设计。

7.有趣的交互活动的字体动画和字母(悬停)效果

我们希望与您分享四个版式动画。信件是一件很棒的事情,他们允许这么多的有趣的互动和效果,以提高设计,使装饰头条脱颖而出。对于一些动画,我们使用anime.js。Charming.js可以帮助我们处理字母所需的结构。

8.有趣的工具提示形状和动画

我们希望与您分享几个简单的工具提示动画想法。工具提示有不同的形状,主要由SVG制成,我们用anime.js来动画。这些有弹性的家伙中的一些使用SVG路径变形,其他变换和一个是简单的文字效果。

9.基于EGO图标设计的一组精心制作的矢量插图

我们很高兴能与您分享一个独家的插图集,以庆祝EGO图标的推出!这些独特的插图具有像EGO图标的标志性和角度外观,并且可以用于文章,网站和其他设计项目。

10.SVG形状在滚动上变形和变形的装饰性网站背景效果

我们想和大家分享一下背景效果。这个想法是在滚动上创建一个装饰性的SVG形状。根据我们当前正在查看的部分,形状将变形为不同的形式。动画由Julian Garnier的anime.js提供支持,并且Stu Kabakoff的scrollMonitor.js支持滚动检测。

本文固定链接: http://www.i7758.com/archives/2878.html

本文来自企鹅号 - 深渡媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

第三届 CSS 开发者大会笔记

这次大会于 2016 年 12 月 17 日在广州的天虹酒店举办。演讲嘉宾有大漠,勾三股四等一些业界大牛们。特邀嘉宾有 Andrey Sitnik(PostCS...

1022
来自专栏北京马哥教育

Kmeans聚类代码实现及优化

云豆贴心提醒,本文阅读时间6分钟 这篇文章直接给出上次关于Kmeans聚类的篮球远动员数据分析案例,最后介绍Matplotlib包绘图的优化知识。 希望这篇文...

2845
来自专栏CDA数据分析师

【图表大师三】仿gartner清爽圆角矩阵图

在Gartner的报告中,常看到如下图的清爽圆角矩阵图。 ? 我很喜欢这种清爽的图表风格,其特点有:干净清爽的颜色,优雅的圆角绘图区,个性的XY坐标轴。...

1806
来自专栏数据小魔方

R预设配色系统及自定义色板

关于配色的话题,已经聊过很多次了,但是就像是之前说过的,对于图形可视化而言,配色决定着作品的“颜值”,谈再多次都不嫌多。 今天是R语言配色系统综合篇的上篇(当然...

4249
来自专栏PPV课数据科学社区

“数学之美”系列九:如何确定网页和查询的相关性

[我们已经谈过了如何自动下载网页、如何建立索引、如何衡量网页的质量(Page Rank)。我们今天谈谈如何确定一个网页和某个查询的相关性。了解了这四个方面,一个...

2705
来自专栏我和未来有约会

CaseStudy(showcase)界面篇-desing设计界面

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

1627
来自专栏阮一峰的网络日志

巧用Photoshop进行科学研究

Photoshop CS3 Extended是一个强大的软件。你可以用它,让你的报名照变得漂亮一些,然后上传到社交网站上;你也可以将一个名人的脑袋,移植到一张裸...

792
来自专栏Python小屋

Python绘制时间序列数据的时序图、自相关图和偏自相关图

时序图、自相关图和偏相关图是判断时间序列数据是否平稳的重要依据。 本文涉及的扩展库numpy、pandas、statsmodels一般可以使用pip进行在线安装...

2394
来自专栏大数据钻研

手把手教你打造一个纯CSS图标库

来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉...

2904
来自专栏生信宝典

高颜值可定制在线绘图工具-第三版

生信宝典推出之前推出了一系列画图相关文章,包括多种形式的热图、线图、柱状图、箱线图、泡泡图、韦恩图、进化树、火山图、生存分析、共表达分析聚类如等,都是基于R代码...

3295

扫码关注云+社区