最近有个小伙伴问我,在某个网站看到一个使用 SVG 实现的炫彩三角边框动画,问能否使用 CSS 实现: 很有意思的一个动画效果,立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画,非常的类似: 其核心就是利用了角向渐变(conic-gradient),然后将图案的中心区域通过覆盖遮罩一个小号的图形实现. 然而,这个三角形动画里有两个难点: 整个图形是个三角形 在 CSS 中,我们可比较轻松的实现矩形与圆形,但是三角形这里无疑会棘手很多. 整个边框还附带阴影,并且阴影还是在边框的两…

循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了.有了电池,那接下来直接充电吧.最最简单的动画,那应该是用色彩把整个电池灌满即可. 方法很多,代码也很简单,直接看效果: 有内味了,如果要求不高,这个勉强也就能够交差了.通过蓝色渐变表示电量,通过色块的位移动画实现充电的动画.但是总感觉少了点什么. 增加阴影及颜色的变化 如果要继续优化的话,需要添加点细节. 我们知道,低电量时,电量通…

今日,群里有个很有意思的问题,问我如何实现一个彩色的,带渐变的二维码,像是这样: 很有意思的问题,我们在百度谷歌,搜索 qrcode,能搜到非常多在线制作二维码的工具,它们其中一些也会带有制作渐变二维码的功能.但是它们大部分都是 Canvas 或者其它编程语言实现的. 如果我们现在已经有了一张白底黑字的普通二维码,想把它变成一个渐变色的二维码?该如何做呢? 本文就将介绍,使用 CSS,快速将一个普通黑色二维码,变成任意我们想要的彩色渐变二维码. 强大的混合模式 拥有一张原图,想改变其颜色.在 C…

有群友问我,使用 CSS 如何实现如下 Loading 效果: 这是一个非常有意思的问题. 我们知道,使用 CSS,我们可以非常轻松的实现这样一个动画效果: <div></div> div { width: 100px; height: 100px; border-radius: 50%; border: 2px solid transparent; border-top: 2px solid #000; border-left: 2px solid #000; animation…

用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015   原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年,苹果都会召开一次重大的会议.WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会. 每一年的这个时候,他们都会制造出很多新创意,今年,我被一个用简单圆圈和形状制作出来的图标所惊艳,于是我决定用HTML和CSS来实现它. WWDC 15邀请卡 苹…

今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div id="intro"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.…

一.CSS3动画 名称 用途 链接 阴影波纹特效 1.元素hover效果 2.突出表现效果 http://www.jq22.com/code80 横板导航菜单动画 导航菜单 http://www.jq22.com/code181 横板导航菜单动画2 导航菜单 http://www.jq22.com/code195 竖板导航菜单动画 导航菜单 http://www.jq22.com/code480 圆形导航菜单动画 导航菜单 http://www.jq22.com/code816 环形导航菜单动画…

在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去画出一些十分复杂动画的线条,这个时候,就要借助前端好帮手 PS 和 AI,而本文就是介绍如何导出复杂的 SVG 路径.: 好了,假定我们现在要制作下图 GIF 这样的一个 loading 图: 上面这个 SVG 线条动画的路径 path ,如果靠自己手工一个点一个点定位调试画出来的话,嘿嘿嘿你去试试…

1.CSS3/SVG质感背景小图标 镂空效果图标按钮 今天我们来分享一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错. 在线演示 源码下载 2.HTML5 SVG Tab滑块菜单 非常酷的Tab菜单 之前我们分享过很多HTML5/CSS3菜单,应该说大部分都还比较实用华丽,今天我们要来分享另外一种形式的HTML5菜单——HTML5 Tab菜单.这款Tab菜单是利用HTML5和SVG实现的,Tab菜单的外观非常漂亮,而且Tab切换也很方便…

1.HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的.另外,动画使用了一张立体感很强的天空背景图,让蝴蝶飞舞时更加显得立体逼真. 在线演示 源码下载 2.一组HTML5 SVG可爱的笑脸动画 今天我们来分享一组利用HTML5和SVG实现的可爱笑脸动画,它们是色彩各异的一组泥娃娃的脸,默认的时候就出现眨眼和微笑的动画,当你把鼠标滑过它们时,就像是感受到了主人的抚摸…