程序猿必备的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 条评论
登录 后参与评论

相关文章

来自专栏转载gongluck的CSDN博客

VC如何获取对话框中控件的坐标

VC如何获取对话框中控件的坐标 GetWindowRect是取得窗口在屏幕坐标系下的RECT坐标(包括客户区和非客户区),这样可以得到窗口的大小和相对屏幕左上角...

3639
来自专栏天天P图攻城狮

Android图像处理系列:OpenGL深度测试的应用

什么是深度测试? 深度测试是指检测从某个方向看过去时,两个点A和B谁在谁的前面,以便知道谁挡住了谁,被挡住的点一般不会进行绘制,以达到和真实世界一样的遮挡效...

2592
来自专栏tkokof 的技术,小趣及杂念

Half-Pixel Offset 究竟是个什么鬼?

友情提示 Half-Pixel Offset 其实算是个过时话题,请依据个人情况谨慎了解 :)

1072
来自专栏HTML5学堂

CSS3三维变形,其实很简单!

HTML5学堂:空间的变化一直是视觉感官上最吸引人的东西,而如果要把这些空间上的变化用代码在浏览器上实现出来,就需要深入的来了解CSS3的transform 3...

4537
来自专栏前端那些事

过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数

给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不...

3041
来自专栏一个小程序员的成长笔记

CSS3动画功能

1.transition功能 transition属性的使用方法:transition:property duration timing-function; 其...

4016
来自专栏AI研习社

详解 Kaggle 房价预测竞赛优胜方案:用 Python 进行全面数据探索

AI 研习社按:Kaggle 的房价预测竞赛从 2016 年 8 月开始,到 2017 年 2 月结束。这段时间内,超过 2000 多人参与比赛,选手采用高级回...

6947
来自专栏前端那些事

过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数

难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往...

40011
来自专栏数据小魔方

sparklines迷你图系列7——Comparision(+/-Variance)。

今天跟大家分享sparklines迷你图系列的第七篇——Comparision(+/-Variance)。 该图表用于表现指标增长率波动情况,波动范围-100%...

2665
来自专栏贾志刚-OpenCV学堂

OpenCV中泛洪填充算法解析与应用

泛洪填充(Flood Fill)很多时候国内的开发者称它为漫水填充,该算法在图形填充与着色应用程序比较常见,属于标配。在图像处理里对二值图像的Hole可以通过泛...

50310

扫码关注云+社区

领取腾讯云代金券