带37种3D动画特效的跨浏览器CSS3动画框架 AllAnimation.css

最新推荐文章于 2023-05-15 09:52:45 发布
最新推荐文章于 2023-05-15 09:52:45 发布
阅读量537 收藏
点赞数 1
分类专栏： 前台&美工
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pyzheng/article/details/84765516
版权
animate.css – 齐全的CSS3动画库 [url]http://www.dowebok.com/98.html[/url]
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
[color=red]详细查看原文[/color]


带37种3D动画特效的跨浏览器CSS3动画框架 AllAnimation.css
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架。它可以轻松的制作出各种CSS3 3D动画效果，可以在移动手机上使用。并且使用极其简单，使用时只需要添加相应的class即可。


例子： [url]http://all-animation.github.io/[/url]
所有效果代码
Especiais:
dance
journal
pulse
pulse-slow
jamp
four-rock

Bounce:
enter-up-bounce
enter-down-bounce
enter-right-bounce
enter-left-bounce
scale-bounce
jump-bounce

Perspective:
tree-flip-right
tree-flip
tree-flip-up
tree-flip-down
flip-left-bounce
rotate-flip
flip-right-bounce

Fading Entrances:
flip-top
flip-left
flip-right
flip-bottom


Rotate:
rotate-flip-down
rotate-down-bounce
rotate-out

Agrecives:
flash-bang
bomba


测试代码： 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>重新认识测试和米色脂肪</title>
<link href="css/assets/css/all-animation.min.css" rel="stylesheet"/>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
	$(document).ready(function(){
		$("button").click(function(e){
		    e.preventDefault();
		    $("#stage").addClass('journal');
		});
	});
</script>
</head>
<body ontouchmove="return false" class="f-ff1">
<button>测试</button>
<div id="stage">被用来测试的一段话</div>
</body>
</html>
不净之心
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html如何出现闪烁效果,前端css怎么实现一闪一闪的特效？
weixin_39969976的博客
06-03 1302
代码在这里了，纯css3,用动画实现body {background-color: #151515;}.super-input input {background: #222;background: -webkit-linear-gradient(#333, #222);background: -moz-linear-gradient(#333, #222);background: -o-lin...
CSS 动画 多帧 animation 一闪一闪效果
卋舉
10-12 765
透明 transparent; 一闪一闪效果 HTML超链接有参考 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Title</title> <meta
html5 css3 3D螺旋动画特效.zip
07-11
<html> <head> <meta charset="UTF-8"> <title>html5 css3 3D螺旋动画特效</title> <link rel="stylesheet" href="css/style.css?3.1.64" media="screen" type="text/css" /> </head> <body> [removed][removed]   </body> </html> 一款炫酷的基于html5 css3实现的螺旋动画特效，全屏css3网页动画效果。
CSS3实现闪烁动画效果的方法
09-25
主要为大家介绍了CSS3实现闪烁动画效果的方法,可实现属性名为className的元素呈现闪烁效果的功能,非常具有实用价值,需要的朋友可以参考下
CSS3 3D立体文字变色发光动画特效.zip
07-11
代码：      <link rel="stylesheet" href="css/reset.min.css?3.1.64">   <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body>[removed][removed]   <figure>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   </figure>
CSS3实现3D螺旋动画特效.zip
07-11
素材简介：CSS3实现3D螺旋动画特效是一款基于html5 css3实现的螺旋动画特效。
带37种3D动画特效的跨浏览器CSS3动画框架
12-13
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架。它可以轻松的制作出各种CSS3 3D动画效果，可以在移动手机上使用。并且使用极其简单，使用时只需要添加相应的class即可。
html5 特效框架,带37种3D动画特效的跨浏览器CSS3动画框架
weixin_32639437的博客
06-04 314
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架。它可以轻松的制作出各种CSS3 3D动画效果，可以在移动手机上使用。并且使用极其简单，使用时只需要添加相应的class即可。使用方法使用AllAnimation.css时要引入all-animation.css文件。HTML结构你可以使用一个按钮来触发事件，在事件中为指定元素添加相应的动画class。Trigge...
css 3d闪烁动画,CSS3实现闪烁动画效果的方法
weixin_31755771的博客
08-03 1353
本文实例讲述了CSS3实现闪烁动画效果的方法。分享给大家供大家参考。具体方法如下：给class属性名为className的元素添加闪烁动画效果复制代码代码如下:.className{-webkit-animation: twinkling 1s infinite ease-in-out}.animated{-webkit-animation-duration: 1s;animation-durat...
CSS 动画 实现点的动态缩放闪烁
for you的博客
08-28 5827
实现动画效果，要用到css的 animation 属性，具体写法为： animation：a1, a2 , a3 ; a1为通过@keyframes 规则创建的动画名称，可自己定义 a2 为动画时常 ，例如：1s   2s   可自行规定 a3 为css自带的动画效果，有如下几个： linear 以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1...
使用css animation动画做边框闪动效果
iYNing的博客
03-15 3072
使用css animation动画做闪动效果 在拖拽div节点时，给div节点添加diagramTop-item-click样式，使用css animation动画0.5秒执行一次。 css样式 .diagramTop-item { width: 102px; height: 32px; background-color: #0e141f; border: 1px solid #090d14; box-shadow: 0px 1px 0px 0px rgba(9, 1
CSS3 3D圆点波浪动画特效
07-24
CSS3 3D圆点波浪动画特效是一款圆点矩阵波浪滚动，3D粒子波浪动画特效。
html/css实现一个一闪一闪的按钮，Css闪烁点标，css设置按钮层次感，css按钮美化，CSS按钮动画过渡，CSS按钮添加阴影，Css按钮点击涟漪效果，Css按钮实现凹凸效果
weixin_43992507的博客
05-15 958
html/css实现一个一闪一闪的按钮，Css闪烁点标，css设置按钮层次感，css按钮美化，CSS按钮动画过渡，CSS按钮添加阴影，Css按钮点击涟漪效果，Css按钮实现凹凸效果
【CSS3动画】简单实现背景闪烁，文字闪烁 兼容IE11
freedomVenly的博客
11-25 3120
相关配置兼容性属 教程 等参考这个就够了： https://www.w3school.com.cn/css3/css3_animation.asp 以下示例测试了chrome / IE11 / 火狐浏览器 背景闪烁： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
纯Css实现呼吸灯闪烁动画样式
天生欧皇张狗蛋
04-01 2025
css手写呼吸灯样式
CSS3动画实现高亮光弧效果，循环闪动效果
qq_40410916的博客
09-08 1296
主要运用css动画进行循环播放，修改css渐变效果元素 <!Doctype html> <html> <head> <meta name="viewport" content="width=device-width,iitial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="Content-Type" content
css3动画边框一闪一闪,css3动画条纹边框_觉唯设计
weixin_39915367的博客
08-04 754
之前分享过一篇关于《焦点图相框》的文章，深受大家的喜爱。今天也同样为大家分享一篇用css3制作的动画条纹边框，效果还是蛮有趣的，推荐大家用一用、玩一玩。先简单的说一下实现原理，大家都可以通过demo看到最终的效果，当鼠标停留在图片上面时，图片的边框就会出现带有斜度的条纹背景(暂且不管动画)， 看下源代码就能明白其中的原理，首先用样式制作出条纹背景，设置opacity值为0，在鼠标经过图片所在的层是...
animation css 透明度逐渐_css3动画硬闪烁(帧之间没有淡入淡出)
weixin_35334000的博客
12-24 360
使用适当的动画定时功能：.motion.play .frame {-webkit-animation-name: flash;-webkit-animation-duration: 3s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal; /* not "linear" */-webkit...
css 按钮呼吸动画效果
阿之阿佐
08-10 1466
<src src="get-btn,png" alt="立即领取" class="animated infinite pulse slow" /> @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transfor.
css3垂直动画特效
最新发布
08-20
CSS3垂直动画特效是指使用CSS3技术实现的一种垂直方向上的动画效果。CSS3提供了一系列的动画特性，如transform、transition、animation等，可以让开发者通过设置属性值来实现各种各样的动画效果。 常见的CSS3垂直动画特效有下拉菜单效果、垂直展开效果、垂直滚动效果等。下拉菜单效果可以通过设置:hover伪类选择器和transition属性，实现鼠标悬停时菜单项下拉显示的效果。垂直展开效果可以使用transition属性实现元素高度从0到具体数值的过渡动画，使元素逐渐展开。垂直滚动效果可以通过设置transform属性的translateY值进行位移动画，让元素在垂直方向上滚动。 同时，CSS3还提供了animation属性，使开发者可以创建更复杂的垂直动画特效。通过设置关键帧和动画播放的属性，可以实现元素在垂直方向上的渐变、上升、下降等动画效果。 综上所述，CSS3垂直动画特效可以通过使用CSS3的transform、transition、animation等属性来实现。开发者可以根据具体需求选择合适的动画效果，通过设置属性值和关键帧，创造出各种精美的垂直动画特效，丰富网页的交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值