首页 > 代码库 > 惊艳的HTML5动画特效及源码
惊艳的HTML5动画特效及源码
今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且一些3D动画也非常简单。很多HTML5动画也都基于canvas,一起来看看吧。
HTML5/CSS3实现大风车旋转动画
作为今天首款HTML5动画,这款大风车旋转效果的确非常棒,它是用纯CSS3实现。
核心CSS代码:
.wmd1{ -webkit-transform: scale(.6); position:absolute; top:180px; left:200px; perspective: 1000px;}.base{ }.blades{ width: 350px; height: 350px; left: 10%; top: 10%; z-index:2; border-radius: 50%; position: absolute; margin-top: -30px; margin-left: 50px; animation: spin 6s linear infinite;}.blade1 { background: white; position:absolute; width:41px; height:139px; top:-10px; left:150.5px; transform:rotate(0deg); display:inline-block; background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0); background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%; background-repeat: no-repeat;}.blade2 { background:white; position:absolute; width:41px; height:139px; top:105.5px; left:41px; transform:rotate(-90deg); display:inline-block; background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0); background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%; background-repeat: no-repeat;}.blade3 { background:white; position:absolute; width:41px; height:139px; top:105.5px; right:41px; transform:rotate(-270deg); display:inline-block; background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0); background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%; background-repeat: no-repeat;}.blade4 { background:white; position:absolute; width:41px; height:139px; bottom:-10px; left:150.5px; transform:rotate(180deg); display:inline-block; background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0); background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%; background-repeat: no-repeat;}.vane1{ width:1px; height:350px; left:175px; background:white; position:absolute; transform:rotate(90deg);}.vane2{ width:1px; height:350px; left:171.5px; background:white; position:absolute; transform:rotate(180deg);}.base .bottom_base{ position:absolute; width:90px; height:100px; left:162px; border-right: 16px solid transparent; border-left: 16px solid transparent; border-bottom: 380px solid white; opacity:.8; z-index:-1; top:42.5px;}ul{ position:absolute; top:180px; left:-30px;}li{ width:10px; height:10px; background:white; padding:2px; display:block; margin: 30px; box-shadow: inset 0px -2px 0px lightgray; }li:nth-child(2){ position:absolute; top:-45px; left:20px;}li:nth-child(1){ position:absolute; top:35px; left:50px;}li:nth-child(3){ position:absolute; top:75px; left:50px;}@keyframes spin {0% { transform:rotate(0deg); } 100% { transform:rotate(-360deg); }}
在线演示 源码下载
纯CSS3 3D图片翻转展示
这是一款基于CSS3的3D图片展示,在图片切换时将会有翻转的动画效果。
核心CSS代码:
.coverflow-list { width: 100%;}.coverflow-list .coverflow-item { display: inline-block; background: #414141; margin: 0 -50px; position: relative; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);}.coverflow-list .coverflow-item .album-cover { display: block; height: 150px; margin: 0;}.coverflow-list .coverflow-item .album-cover img { height: 150px; width: 150px; opacity: 0.5;}.coverflow-list .coverflow-item .album-name { text-align: center; display: block; color: #444;}.coverflow-list .coverflow-item label { padding: 0; border: none; display: block; text-shadow: none;}/* Now apply 3D transforms (never done this before!) */.coverflow-list { -webkit-transform: perspective(900px); -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 100% 30%;}.coverflow-list .coverflow-item { -webkit-transition: all 0.4s ease; background: #212121; -webkit-transform: rotateY(45deg);}input[type="radio"] { display: none;}input[type="radio"]:checked + .coverflow-item { -webkit-transform: rotateY(0deg); margin: 0 auto; background: #313131; transition: all 0.4s ease;}input[type="radio"]:checked + .coverflow-item img { opacity: 1;}input[type="radio"]:checked + .coverflow-item figcaption { color: #FFFFFF;}input[type="radio"]:checked + .coverflow-item ~ .coverflow-item { -webkit-transform: rotateY(-45deg); background: #515151;}
在线演示 源码下载
漂亮的CSS3动画进度条
这是一款闪闪发光的CSS3进度条,进度条在初始化的时候还有滑动的动画特效。
核心jQuery代码:
(function() { $(document).ready(function() { return $(".bar").each(function(i, elem) { return $(elem).addClass(‘active‘); }); });}).call(this);
在线演示 源码下载
CSS3垂直图标菜单
这是一款简单而清爽的CSS3垂直菜单,鼠标滑过菜单项还有Tooltip的动画效果。
核心CSS代码:
#nav-bar { margin: 50px 50px 50px 400px; max-width: 50px; border: 1px solid #bed1df; border-radius: 4%; background-color: white; -webkit-box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11); -moz-box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11); box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11);}li { color: #bed1df; margin: 0; font-family: ‘Open Sans‘, sans-serif; font-size: 0.75em; list-style: none;}li.level-one { font-size: 1.5em; text-align: center; border-top: 1px solid #bed1df; cursor: pointer;}li.level-one:first-child { border-top: none;}li.level-one:hover { background: rgba(255,255,255,1); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(233,238,242,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#ffffff‘, endColorstr=‘#e9eef2‘, GradientType=0 );}#selected { background: #3f8eb9; -webkit-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45); -moz-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45); box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);}i { color: #bed1df; margin: 25%;}p { font-family: ‘Open Sans‘, sans-serif; font-size: 0.8em; color: #bed1df; margin: 50px;}a { color: #3f8eb9; text-decoration: none;}.level-one { position: relative;}.level-two { display: none; position: absolute; height: 50px; width: 100px; background: #FFFFFF; border-radius: 4px; font-family: ‘Open Sans‘, sans-serif; font-size: 0.65em; text-align: center;}.level-two:after { content: ‘‘; position: absolute; border-style: solid; border-width: 9px 9px 9px 0; border-color: transparent #fff; display: block; width: 0; z-index: 1; left: -9px; top: 15px;}.level-two li { margin: 15px;}.level-one:hover > .level-two { display: block;}.level-two { left: 130%; top: 0;}
在线演示 源码下载
纯CSS3背景渐变按钮 按钮图标淡入淡出动画
这是一组带有动画效果的HTML5按钮,鼠标滑过按钮时将出现背景渐变的动画特效。
核心CSS代码:
.test{ width:320px; height:90px; margin:30px auto; background:-webkit-linear-gradient(top , #A9DB80 0%, #96C56F 100%); background:-moz-linear-gradient(top , #A9DB80 0%, #96C56F 100%); background:-ms-linear-gradient(top , #A9DB80 0%, #96C56F 100%); background:-o-linear-gradient(top , #A9DB80 0%, #96C56F 100%); background:#A9DB80; box-shadow:0 0 3px #999; border-radius:3px; transition:1s all ease; -webkit-transition:0.5s all ease; -moz-transition:0.5s all ease; -ms-transition:0.5s all ease; -o-transition:0.5s all ease; overflow:hidden;}.test .aLink{ display:block; width:318px; height:88px; background:-webkit-linear-gradient(center top , #FFF 2%); background:-moz-linear-gradient(center top , #FFF 2%); background:-ms-linear-gradient(center top , #FFF 2%); background:-o-linear-gradient(center top , #FFF 2%); box-shadow:0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2); border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px; position:relative; text-decoration:none; border:#484848 solid 1px; overflow:hidden;}.test .aLink .txt{ position:absolute; font-size:28px; color:#6D954E; left:18px; top:26px; opacity:0; -webkit-transition:0.2s all ease; -moz-transition:0.2s all ease; -ms-transition:0.2s all ease; -o-transition:0.2s all ease; transition:0.2s all ease;}.test .aLink .img{ position:absolute; width:70px; height:70px; display:block; z-index:2; top:12px; left:10px; -webkit-transition:0.2s all ease; -moz-transition:0.2s all ease; -ms-transition:0.2s all ease; -o-transition:0.2s all ease; transition:0.2s all ease;}.test .aLink .txt2{ font-size:32px; color:#FFF; width:140px; overflow:hidden; display:block; text-shadow:0 0 2px #999999; position:absolute; left:80px; text-align:center; top:10px; font-family:"Comic Sans MS", cursive;}.test .aLink .txt2 span{ font-size:14px; color:#FFF; display:block;}.test .aLink .btn{ width:80px; display:block; height:88px; position:absolute; right:0; top:0; border-left:#484848 solid 1px; box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1); -webkit-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1); -ms-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1); -moz-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1); -o-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);}.test .aLink .btn span{ display:block; width:40px; height:40px; background:url(img/arrow_down.png) center center no-repeat #333; margin:24px auto; border-radius:50%; -webkit-transition:0.3s all ease; -moz-transition:0.3s all ease; -ms-transition:0.3s all ease; -o-transition:0.3s all ease;}/*动画*/.test:hover{ box-shadow:0 0 10px #666; box-shadow:0 0 10px #666;}.test:hover .img{ width:150px; height:150px; left:-26px; top:-30px; opacity:0;}.test:hover .txt{ opacity:1;}.test:active{ box-shadow:0 0 0px #999; background:-webkit-linear-gradient(top , #80ab5d 0%, #80ab5d 100%); background:-moz-linear-gradient(top , #80ab5d 0%, #80ab5d 100%); background:-ms-linear-gradient(top , #80ab5d 0%, #80ab5d 100%); background:-o-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);}.test:active .aLink{ box-shadow:inset 2px 2px 3px #666666;}.test:active .btn{ box-shadow:inset 1px 1px 1px #666666; box-shadow:inset 1px 1px 1px #666666);}.test:active .txt{ color:#A9DB80;}.test:active .btn span{ width:60px; height:60px; margin-top:15px; background-size:60%;}
在线演示 源码下载
动感的CSS3 Loading文字特效
在线演示 源码下载
纯CSS3实现滑杆开关切换按钮动画
很不错的自定义radiobox效果,非常有创意
.switch { display: inline-block; margin: 10em 2em; position: relative; border-radius: 3.5em; -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.2); -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2); box-shadow: 0 0 0.5em rgba(255,255,255,0.2);}.switch label { width: 100%; height: 100%; margin: 0; padding: 0; display: block; position: absolute; top: 0; left: 0; z-index: 10;}.switch input { display: none;}.switch span { display: block; -webkit-transition: top 0.2s; -moz-transition: top 0.2s; -ms-transition: top 0.2s; -o-transition: top 0.2s; transition: top 0.2s;}.switch-border1 { border: 0.1em solid #000; border-radius: 3.5em; -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2); -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2); box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);}.switch-border2 { width: 6.6em; height: 12.6em; position: relative; border: 0.1em solid #323232; background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D)); background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D); border-radius: 3.4em;}.switch-border2:before,.switch-border2:after { content: ‘‘; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; opacity: .3; border-radius: 3.4em;}.switch-border2:before { background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0))); background: -webkit-linear-gradient(#000, rgba(0,0,0,0)); background: -moz-linear-gradient(#000, rgba(0,0,0,0)); background: -ms-linear-gradient(#000, rgba(0,0,0,0)); background: -o-linear-gradient(#000, rgba(0,0,0,0)); background: linear-gradient(#000, rgba(0,0,0,0));}.switch-border2:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000)); background: -webkit-linear-gradient(rgba(0,0,0,0), #000); background: -moz-linear-gradient(rgba(0,0,0,0), #000); background: -ms-linear-gradient(rgba(0,0,0,0), #000); background: -o-linear-gradient(rgba(0,0,0,0), #000); background: linear-gradient(rgba(0,0,0,0), #000);}.switch-top { width: 100%; height: 84%; position: absolute; top: 8%; left: 0; z-index: 1; background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D)); background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D); border-radius: 3.4em;}.switch-shadow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; border-radius: 3.4em; -webkit-box-shadow: 0 0 2em black inset; -moz-box-shadow: 0 0 2em black inset; box-shadow: 0 0 2em black inset;}.switch-handle-left,.switch-handle-right { content: ‘‘; display: block; width: 3.6em; height: 0; position: absolute; top: 6.6em; z-index: 2; border-bottom: 4.5em solid #111; border-left: 0.7em solid transparent; border-right: 0.7em solid transparent; border-radius: 0;}.switch-handle-left { left: 0.8em;}.switch-handle-right { right: 0.8em;}.switch-handle { width: 3.6em; height: 4.5em; position: absolute; top: 6.6em; left: 1.5em; z-index: 3; background: #333; background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111)); background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111); border-radius: 0;}.switch-handle-top { width: 5em; height: 5em; position: absolute; top: 8.5em; left: 0.8em; z-index: 4; background-color: #555; background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787)); background-image: -webkit-linear-gradient(left, #5F5F5F, #878787); background-image: -moz-linear-gradient(left, #5F5F5F, #878787); background-image: -ms-linear-gradient(left, #5F5F5F, #878787); background-image: -o-linear-gradient(left, #5F5F5F, #878787); background-image: linear-gradient(to right, #5F5F5F, #878787); border-top: 0.2em solid #AEB2B3; border-radius: 2.5em;}.switch-handle-bottom { width: 3.6em; height: 3.6em; position: absolute; top: 4.7em; left: 1.5em; z-index: 3; background: #333; background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111)); background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111); border-top: 0.2em solid #141414; border-radius: 1.8em;}.switch-handle-base { width: 4.2em; height: 4.2em; position: absolute; top: 3.8em; left: 1.2em; z-index: 2; border-top: 0.2em solid rgba(255,255,255,0.35); border-radius: 2.1em; -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset; -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset; box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;}.switch-led { position: absolute; left: 2em; border-radius: 1.4em;}.switch-led-border { border: 0.2em solid black; border-radius: 1.3em;}.switch-led-light { border-radius: 1.1em; -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset; -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset; box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;}.switch-led-glow { width: 2em; height: 2em; position: relative; border-radius: 1em;}.switch-led-glow:before { content: ‘‘; display: block; width: 0.6em; height: 0.6em; position: absolute; top: 0.3em; left: 0.7em; background: rgba(255,255,255,0.2); border-radius: 0.3em; -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75); -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75); box-shadow: 0 0 1em rgba(255,255,255,0.75);}.switch-led-glow:after { content: ‘‘; display: block; width: 0; height: 0; position: absolute; top: 0; left: 0; opacity: 0.2; filter: alpha(opacity=20); border: 1em solid #fff; border-color: transparent #fff transparent #fff; border-radius: 1em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}.switch-led:after { display: block; width: 100%; position: absolute; left: 0; color: #666; font-family: arial, verdana, sans-serif; font-weight: bold; text-align: center; text-shadow: 0 0.1em rgba(0,0,0,0.7);}.switch-led-green:after { content: ‘ON‘; top: -1.8em;}.switch-led-red:after { content: ‘OFF‘; bottom: -1.8em;}.switch-led-green { top: -5em; border-top: 0.1em solid rgba(0,161,75,0.5); border-bottom: 0.1em solid rgba(255,255,255,0.25);}.switch-led-green .switch-led-light { background: rgb(0,161,75); border: 0.1em solid rgb(0,104,56);}.switch-led-red { bottom: -5em; border-top: 0.1em solid rgba(237,28,36,0.2); border-bottom: 0.1em solid rgba(255,255,255,0.25); -webkit-box-shadow: 0 0 3em rgb(237,28,36); -moz-box-shadow: 0 0 3em rgb(237,28,36); box-shadow: 0 0 3em rgb(237,28,36);}.switch-led-red .switch-led-light { background: rgb(237,28,36); border: 0.1em solid rgb(161,30,45);}.switch-led-red .switch-led-glow { background: #fff; background: rgba(255, 255, 255, 0.3); filter: alpha(opacity=30);}/* Switch on */.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right { top: 1.5em; border-bottom: 0; border-top: 4.5em solid #111;}.switch input:checked~.switch-handle { top: 1.5em;}.switch input:checked~.switch-handle-top { top: -1em; border-top: 0; border-bottom: 0.2em solid #AEB2B3;}.switch input:checked~.switch-handle-bottom { top: 4.2em; border-top: 0; border-bottom: 0.2em solid #141414;}.switch input:checked~.switch-handle-base { top: 4.5em; border-top: 0; border-bottom: 0.2em solid rgba(255,255,255,0.35);}.switch input:checked~.switch-led-green { -webkit-box-shadow: 0 0 3em rgb(0,161,75); -moz-box-shadow: 0 0 3em rgb(0,161,75); box-shadow: 0 0 3em rgb(0,161,75);}.switch input:checked~.switch-led-green .switch-led-glow { background: #fff; background: rgba(255, 255, 255, 0.4); filter: alpha(opacity=40);}.switch input:checked~.switch-led-red { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}.switch input:checked~.switch-led-red .switch-led-glow { background: rgba(255, 255, 255, 0); filter: alpha(opacity=0);}
在线演示 源码下载
HTML5/CSS3多颜色柱状图表 带基准数据线
这款是基于HTML5的水平柱形图,带有基准线。
核心jQuery代码:
$(document).ready(function(){ $(‘.bar‘).each(function(i, elem){ drawBar(elem); }); $(‘.measure‘).each(function(i, elem){ drawMeasure(elem); }); $(‘a.redraw‘).click(function(e){ e.preventDefault(); $(‘.bar‘).each(function(i, elem){ randomiseBar(elem); }); $(‘.measure‘).each(function(i, elem){ randomiseMeasure(elem); }); }); function drawBar(bar) { var percentage = $(bar).data(‘percentage‘); if(percentage > 100){ percentage = 100; } $(bar).animate({‘width‘: percentage + ‘%‘}, ‘slow‘); } function randomiseBar(bar) { var width = Math.floor(Math.random() * (100 - 20 + 1)) + 20; $(bar).animate({‘width‘: width + ‘%‘}, ‘slow‘); $(bar).attr(‘data-percentage‘, width); } function drawMeasure(measure) { var percentage = $(measure).data(‘percentage‘); if(percentage > 100){ percentage = 100; } $(measure).animate({‘width‘: percentage + ‘%‘}, ‘slow‘); } function randomiseMeasure(measure) { var width = Math.floor(Math.random() * (100 - 20 + 1)) + 20; $(measure).animate({‘width‘: width + ‘%‘}, ‘slow‘); $(measure).attr(‘data-percentage‘, width); } });
在线演示 源码下载
惊艳的HTML5动画特效及源码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。