css3动画,网页炫酷CSS动效

1.Animate.css简介

　　 Animate.css是一个可在您的网项目中使用的即用型跨浏览器动画库。非常适合强调，首页，滑块和引导注意的提示。它是一个来自国外的CSS3动画库，它预设了抖动（摇一摇)闪烁（闪光灯)弹跳（弹跳)翻转（翻转)旋转(rotateIn/rotateOut)，淡入淡出（渐强/渐弱)等多达60多种动画效果，几乎包含了所有常见的动画效果。虽然借助Animate.css能够很方便、快速的制作CSS3动画效果，但还是建议看看Animate.css的代码，也许你能从中学到一些东西。不论是在网端和小程序内都可以正常使用，详细内容请到官方地址学习。

2.动画效果的实现

　　 在使用过程中，可以根据自己的喜好来改造钢性铸铁代码来达到你想要的效果，文中动图显示可能不是特别直观，建议自己写一遍代码，即利于学习，又能够直观的体会到动画效果。

　　1.发光的盒子

　　页面结构代码：

　　我是LetCode！/viewxss代码：

　　@关键帧动画-边框{ 0% { box-shadow:0 0 0 rgba(255，255，255，0.4)；} 100% { box-shadow:0 0 20px rgba(255，255，255，0)；} } # box { animation:动画-边框1.5s无限；高度：100rpx字体系列：Arial字体大小：18px字体粗细：粗体；颜色：白色；边框：2px纯色；边框半径：10px边距：100像素15像素行高：100rpx文本对齐：居中；}2.文字的缩放效果

　　页面结构代码：

　　view class=animate_zoomOutDown 关注公众号"爪哇技术迷",有更多分享！/viewxss代码：

　　@关键帧zoomOutDown { 40% { opacity:1；transform: scale3d(0.475，0.475，0.475) translate3d(0，-60px，0)；动画-计时-函数：三次-贝塞尔(0.55,0.055,0.675,0.19);}到{不透明度：0;transform: scale3d(0.1，0.1，0.1) translate3d(0，2000px，0)；动画-计时-函数：三次-贝塞尔(0.175,0.885,0.32,1);} }.animate _ zoomOutDown { animation:2s线性0s无限交替zoomOutDown字体系列：Arial字体大小：18px字体粗细：粗体；颜色：白色；边距-顶部：70px文本对齐：居中；边距-顶部：15px}3。加载动画

　　页面结构代码：

　　view class= load-container load view class= loader /view/view view class= txt 关注公众号"爪哇技术迷",有更多分享！/viewxss代码：装载容器{宽度：240像素高度：240像素边距：0自动；位置：相对；溢出：隐藏；框大小：边框-框；} .加载loader { color:# ffffff；字体大小：90px文本缩进：-9999 em；溢出：隐藏；宽度：1em身高：1em边界半径：50%;边距：72px自动；位置：相对；transform:平移z(0)；动画：载入1.7s无限轻松，回合1.7s无限轻松；} @关键帧加载{ 0% { box-shadow: 0 -0.83em 0 -0.4em，0 -0.83em 0 -0.42em，0 -0.83em 0 -0.44em，0 -0.83em 0 -0.46em，0-0.83 em 0-0.477 em；} 5%,95% {盒影：0 -0.83em 0 -0.4em，0 -0.83em 0 -0.42em，0 -0.83em 0 -0.44em，0 -0.83em 0 -0.46em，0-0.83 em 0-0.477 em；} 10%,59% {盒影：0 -0.83em 0 -0.4em，-0.087em -0.825em 0 -0.42em，-0.173em -0.812em 0 -0.44em，-0.256em -0.789em 0 -0.46em，-0.297 em-0.775 em 0-0.477 em；} 20% { box-shadow:0-0.83 em 0-0.4 em，-0.338em -0.758em 0 -0.42em，-0.555em -0.617em 0 -0.44em，-0.671em -0.488em 0 -0.46em，-0.749 em-0.34 em 0-0.477 em；} 38% {盒影：0-0.83 em 0-0.4 em，-0.377em -0.74em 0 -0.42em，-0.645em -0.522em 0 -0.44em，-0.775em -0.297em 0 -0.46em，-0.82 em-0.09 em 0-0.477 em；} 100% {盒影：0-0.83 em 0-0.4 em 0-0.83 em 0-0.42 em 0-0.83 em 0-0.44 em 0-0.83 em 0-0.46 em 0-0.83 em 0-0.477 em；} } @关键帧round { 0% { transform:rotate(0度))；} 100% {变换：旋转(360度);} }4.抖动的文字

　　页面结构代码：

　　view class=shake-slow txt 关注公众号"爪哇技术迷",有更多分享！/viewxss代码：

　　@关键帧shake-slow { 2% { transform:平移(6px，-2px)旋转(3.5 deg)；} 4% { transform: translate(5px，8px)rotate(-0.5度)；} 6% { transform: translate(6px，-3px)rotate(-2.5 deg)；} 8% { transform: translate(4px，-2px)rotate(1.5度)；} 10% {转换：平移(-6px，8px)旋转(-1.5度)；} 12% { transform: translate(-5px，5px)rotate(1.5度)；} 14% { transform: translate(4px，10px)rotate(3.5 deg)；} 16% {变换：平移(0px，4px)旋转(1.5度)；} 18% { transform: translate(-1px，-6px)rotate(-0.5度)；} 20% {转换：平移(6px，-9px)旋转(2.5度)；} 22% {转换：平移(1px，-5px)旋转(-1.5度);} 24% {变换：平移(-9px，6px)旋转(-0.5度)；} 26% { transform: translate(8px，-2px)rotate(-1.5度);} 28% { transform: translate(2px，-3px)rotate(-2.5度)；} 30% { transform: translate(9px，-7px)rotate(-0.5度);} 32% {变换：平移(8px，-6px)旋转(-2.5度)；} 34%{ transform: translate(-5px，1px)rotate(3.5度);} 36%{变换：平移(0px，-5px)旋转(2.5度)；} 38% { transform: translate(2px，7px)rotate(-1.5度)；} 40% { transform: translate(6px，3px)rotate(-1.5度);} 42% {转换：平移(1px，-5px)旋转(-1.5度);} 44%{ transform: translate(10px，-4px)rotate(-0.5度)；} 46% { transform: translate(-2px，2px)旋转(3.5度)；} 48% { transform: translate(3px，4px)rotate(-0.5度)；} 50% { transform: translate(8px，1px)rotate(-1.5度)；} 52% { transform: translate(7px，4px)rotate(-1.5度)；} 54% { transform: translate(10px，8px)rotate(-1.5度)；} 56% {转换：平移(-3px，0px)旋转(-0.5度);} 58% {变换：平移(0px，-1px)旋转(1.5度)；} 60% { transform: translate(6px，9px)rotate(-1.5 deg)；} 62% { transform: translate(-9px，8px)rotate(0.5 deg)；} 64% { transform: translate(-6px，10px)rotate(0.5度)；} 66% {变换：平移(7px，0px)旋转(0.5度)；} 68% { transform: translate(3px，8px)rotate(-0.5度)；} 70% { transform: translate(-2px，-9px)rotate(1.5度)；} 72% { transform: translate(-6px，2px)rotate(1.5度)；} 74% { transform: translate(-2px，10px)rotate(-1.5度)；} 76% { transform: translate(2px，8px)rotate(2.5度);} 78% { transform: translate(6px，-2px)rotate(-0.5 deg)；} 80% {转换：平移(6px，8px)旋转(0.5度)；} 82% { transform: translate(10px，9px)rotate(3.5 deg)；} 84% { transform: translate(-3px，-1px)rotate(3.5度)；} 86% { transform: translate(1px，8px)rotate(-2.5 deg)；} 88% { transform: translate(-5px，-9px)rotate(2.5度)；} 90% { transform:平移(2px，8px)旋转(0.5度)；} 92% { transform:平移(0px，-1px)旋转(1.5度)；} 94% { transform: translate(-8px，-1px)rotate(0.5度)；} 96% {转换：平移(-3px，8px)旋转(-1.5度);} 98%{变换：平移(4px，8px)旋转(0.5度);} 0%，100%{转换：平移(0,0)旋转(0);}} .慢摇{动画：慢摇5s无限渐出；}在实际开发过程中，远不止这些炫酷的动画效果，在互联网迅速的发展状态下，还需要更多的程序员来实现功能需求，因此本文只做简单的介绍，未完待续.

　　到此这篇关于钢性铸铁实现快速炫酷抖动动画效果的文章就介绍到这了，更多相关钢性铸铁抖动效果内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。