canvas就像一块超级画板,虽然故事层面和技术层

国漫崛起的趋势,这几年越来越明显了。

今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且一些3D动画也非常简单。很多HTML5动画也都基于canvas,一起来看看吧。

不论是《大圣归来》、《大鱼海棠》、《大护法》这样的动画电影;

HTML5/CSS3实现大风车旋转动画

作为今天首款HTML5动画,这款大风车旋转效果的确非常棒,它是用纯CSS3实现。

核心CSS代码:

图片 1图片 2

.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);
 }
}

View Code

图片 3

在线演示        源码下载

还是《秦时明月》、《少年锦衣卫》、《疯味英雄》这样的番剧;

纯CSS3 3D图片翻转展示

这是一款基于CSS3的3D图片展示,在图片切换时将会有翻转的动画效果。

核心CSS代码:

图片 4图片 5

.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;
}

View Code

图片 6

在线演示        源码下载

都让人眼前一亮。

漂亮的CSS3动画进度条

这是一款闪闪发光的CSS3进度条,进度条在初始化的时候还有滑动的动画特效。

核心jQuery代码:

图片 7图片 8

(function() {
  $(document).ready(function() {
    return $(".bar").each(function(i, elem) {
      return $(elem).addClass('active');
    });
  });

}).call(this);

View Code

图片 9

在线演示        源码下载

图片 10

CSS3垂直图标菜单

这是一款简单而清爽的CSS3垂直菜单,鼠标滑过菜单项还有Tooltip的动画效果。

核心CSS代码:

图片 11图片 12

#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;
}

View Code

图片 13

在线演示        源码下载

虽然故事层面和技术层面还没达到世界最顶尖的水准;

纯CSS3背景渐变按钮 按钮图标淡入淡出动画

这是一组带有动画效果的HTML5按钮,鼠标滑过按钮时将出现背景渐变的动画特效。

核心CSS代码:

图片 14图片 15

.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%;
}

View Code

图片 16

在线演示        源码下载

但是我们能看到的,是新一代动画人的匠心和热爱。

动感的CSS3 Loading文字特效

图片 17

在线演示        源码下载

前不久,又有一部国产动画惊艳了派爷。

纯CSS3实现滑杆开关切换按钮动画

很不错的自定义radiobox效果,非常有创意

图片 18图片 19

.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);
}

View Code

图片 20

在线演示        源码下载

它就是这部——

HTML5/CSS3多颜色柱状图表 带基准数据线

这款是基于HTML5的水平柱形图,带有基准线。

核心jQuery代码:

图片 21图片 22

$(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);
  }


});

View Code

图片 23

在线演示        源码下载

《刺客伍六七》(2018)

图片 24

在今年的三月份,《刺客伍六七》入围了有着“动画界奥斯卡”之称的法国昂西国际动画电影节。

它也成为本届动画电影节上,唯一一部入围的国产动画。

《刺客伍六七》在4月25日正式上线播出。

虽然这部动画不像其他热门动画那样,有着动辄几百万的播放量;

但是平均一集几十万的点击率,依然算是不错的成绩。

要知道,这是在没有平台爸爸支持、不刷播放量的前提下达成的。

图片 25

更难得的是,它获得了极高的口碑。

不仅豆瓣评分高达8.8;

以二次元为主的B站,评分更是高达逆天的9.8分。

甚至有的观众,已经迫不及待地把“国漫第一”的称号,送给《刺客伍六七》。

不过单从画风来看,这部番剧并不占优。

图片 26

没有精美的线条,也没有酷炫的人物,依然是我们印象中的国产动画;

Q版的可爱呆萌画风。

但是一旦接受了故事的设定和无厘头的搞笑风格;

这部番剧保证让你欲罢不能。

图片 27

15分钟一集的体量,也十分下饭。

故事的主角,自然就是伍六七。

大家印象中的杀手刺客,一定都和冷血、杀戮、敏捷、机警这些关键词挂钩。

但伍六七完美地避开了这些属性。

图片 28

第一个镜头,是他在若志(弱智)小学门口卖牛杂汤。

这样的登场方式,注定了这个杀手不太靠谱。

图片 29

卫衣+大裤衩是他永远不变的标配;

每天吊儿郎当的样子,让他丝毫没有一点刺客该有的样子。

不过伍六七和普通人不一样的地方在于,他有着特殊的剪刀使用技巧。

“以气御剪”,就是用气力控制剪刀,这也是他最大的技能。

图片 30

另外的一点不同,是他没有关于过去的记忆。

自己如何来到这个岛上,在此之前自己是干什么的,伍六七统统不知道。

图片 31

他只知道自己被一只蓝色的“鸡大保”从海边捡了回来,救了一命。

为了赚钱帮助伍六七恢复记忆;

鸡大保训练伍六七成为一个刺客。

图片 32

于是,伍六七和鸡大保经营了一家理发店作为幌子;

实际上却在暗地里接一些买凶杀人的活。

图片 33

目前更到第七集了,伍六七也接了好几笔订单。

不过这些暗杀的对象,不是喵星人要刺瞎汪星人负心汉的狗眼;

图片 34

就是喜欢收集女士内裤的秃头肥宅。

图片 35

要么是和史上最强大阿婆大战三百回合;

要么是陪绝症美少女完成遗愿清单。

图片 36

心地善良,正义感十足的伍六七,总是不能像电影中的杀手那样冷血,拿钱办事;

这也导致了几集动画里他一个人也没杀,一笔钱也没赚到。

但是,他总会站在正义的一边。

比如那个有收集女士内裤癖好的肥宅。

居委会大妈就是看不惯肥宅的做法,于是派出伍六七去解决掉他。

图片 37

但是后来伍六七了解到;

肥宅的这些内裤,并不是偷来的,而是花钱买来或者路上捡来的。

图片 38

这样的癖好确实变态,让人恶心,但是肥宅没偷没抢,更没有伤害到其他人;

因为有特殊癖好,就该死吗?

图片 39

一通嘴炮过后,伍六七竟然把枪口对准了金主居委会大妈。

而这段打斗戏,也十分精彩。

夸张的形变和动作设计,也致敬了汤浅政明的风格。

图片 40

相似的例子还有。

伍六七接到一个刺杀水果阿婆的任务。

这个阿婆可不简单。

她的水果200元一斤,你要是尝了不买,她就打翻果摊,哭倒在地,讹你一笔。

图片 41

这几年随着各种倚老卖老、为老不尊的新闻报出,导致“坏人变老”的观点,愈发得到认同。

这集中的阿婆,就是一个典型的反面教材。

但是故事的后半部分,画风一转;

把阿婆塑造成为了保护孙子可以不惜一切,对家人无私奉献的形象。

图片 42

这也让不少人以为,这是剧组在为坏阿婆洗白。

但实际上,《刺客伍六七》并没有预设任何立场;

他们只是把阿婆好的一面和坏的一面,同时展示出来。

毕竟,这个世界不是非黑既白的,人也不是非好既坏的;

生活中我们大多数人,都游走在好与坏之间的灰色地带。

图片 43

除了鸡汤和人生道理之外,这部动画的无厘头风格也是最大的亮点。

人物多变的表情,搞笑的对白和剧情,都为故事增色不少。

尤其是这个桥段,把派爷都笑傻了。

伍六七在解决喵星人和汪星人之间矛盾的时候;

遇到了刺杀汪星人首领的女杀手,梅花十三。

图片 44

她是杀手排行榜第37位高手,攻击力极高。

伍六七不小心打落了十三的面具,发现对方是个出落婷婷的少女。

看过十三真面目的男人都得死,伍六七也难逃此劫。

图片 45

就在命悬一线的时候,伍六七机智地分开双手;

两个人扑了个满怀,一个不小心就吻在一起。

图片 46

气氛变得微妙起来,一首魔性又应景的BGM也随之响了起来——

style="font-weight: bold;">“阿珍爱上了阿强,在一个有星星的夜晚,飞机从头顶划过,流星也滑坡那天空。”

类似的搞笑桥段还有许多,派爷就不一一列举了。

虽然每一集都是一个独立的故事;

但是随着故事的进展,伍六七身世之谜的主线故事,也渐渐要浮出水面。

第六集中,反派的回忆杀里显示;

失忆之前的伍六七,是个真正的冷血杀手。

那时伍六七的武器还不是剪子,而是一把锋利的刀,一招就秒杀了这个反派。

图片 47

之后的故事,应该会逐渐向主线剧情靠拢;

而刺客排行榜上的那些大boss,也一定会纷纷亮相。

要知道,《刺客伍六七》一共1000集,这一定是一个庞大的世界观架构。

1000集的剧情,也足够我们追一阵的了。

只是希望,这部剧能够坚持到最后,不烂尾,不扯资。

别像去年那部《幻镜诺德琳》那样,播了一集就因为种种原因,停播下线了。

图片 48

刚看到的一点希望,千万别再被浇灭了。

本文由澳门新葡亰app下载发布于www.301.net,转载请注明出处:canvas就像一块超级画板,虽然故事层面和技术层

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。