制作摇晃的吊灯效果-优快云博客

一个前端，如果因为写JS时间过久而忘记如何写HTML和CSS了，其实也是一种悲哀啊，现在，慢慢的，一步一步的找回吧。

第一站：摇晃的吊灯

如我的博客所示，右上角有两盏一直摇晃从未停止的吊灯，下面po出这个吊灯的制作代码供游客参考：

首先是在博客园的设置中，“页首Html代码”位置写上html。

其中，id为myBanner的元素只是为了将我的代码与原本的代码区分开，并没有为其设置样式。

两盏灯一盏叫Jack，一盏叫rose。。。实际上，没有必要命名两盏，能区分就好了。。。但。。。谁让我高兴呢

<div id="myBanner">
  <i class="led led-jack"></i>
  <i class="led led-rose"></i>
</div>

其次是“页面定制CSS代码”位置写上css。

/*myBanner*/
.led{
  display: block;
  position: absolute;
  right: 16%;
  top: 0;
  height: 8em;
  width: 2px;
  background-color: #000;
  -webkit-transform-origin: 0 -1em;
  -moz-transform-origin: 0 -1em;
  -ms-transform-origin: 0 -1em;
  -o-transform-origin: 0 -1em;
  transform-origin: 0 -1em;
  -webkit-animation: swing 3.5s ease-in-out forwards infinite;
  -moz-animation: swing 3.5s ease-in-out forwards infinite;
  -ms-animation: swing 3.5s ease-in-out forwards infinite;
  -o-animation: swing 3.5s ease-in-out forwards infinite;
  animation: swing 3.5s ease-in-out forwards infinite;
}
.led:before{
  content: '';
  display: block;
  width: 6em;
  height: 3em;
  background-color: #111;
  position: absolute;
  top: 8em;
  left: -2.9em;
  border-radius: 4em 4em 0 0;
  box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
              inset 3px 3px 3px hsla(0,0%,100%,.2),
              inset -3px -3px 3px hsla(0,0%,0%,.2),
              1.5em -1em 3px hsla(0,0%,0%,.15);
}
.led:after{
  content: '';
  display: block;
  position: absolute;
  left: 1.5em;
  top: -1em;
  width: 1px;
  height: inherit;
  background-color: hsla(0,0%,0%,.1);
  box-shadow: 0 0 2px hsla(0,0%,0%,.15);
}
.led-rose{
  right: 30%;
  top: 0;
  height: 6em;
}
.led-rose:before{
  top: 6em;
}

。。。时隔两天突然发现，忘了写动画效果的代码了。。。

现在补上---->

@keyframes swing{
  0% {
    -webkit-transform: translateX(-50%) rotate(4deg);
    -moz-transform: translateX(-50%) rotate(4deg);
    -ms-transform: translateX(-50%) rotate(4deg);
    -o-transform: translateX(-50%) rotate(4deg);
    transform: translateX(-50%) rotate(4deg);
  }
  50% {
    -webkit-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);
    -moz-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);
    -ms-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);
    -o-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);
    transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);
  }
  100% {
    -webkit-transform: translateX(-50%) rotate(4deg);
    -moz-transform: translateX(-50%) rotate(4deg);
    -ms-transform: translateX(-50%) rotate(4deg);
    -o-transform: translateX(-50%) rotate(4deg);
    transform: translateX(-50%) rotate(4deg);
  }
}
@-webkit-keyframes swing{
  0% {
    -webkit-transform: translateX(-50%) rotate(4deg);
  }
  50% {
    -webkit-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);
  }
  100% {
    -webkit-transform: translateX(-50%) rotate(4deg);
  }
}