乐高积木树屋_创建树屋青蛙动画

乐高积木树屋

The following post has been written by Brazilian developer Jones Dias. His English is much better than my Portuguese but since it isn't his native language, I've sprinkled in some extra detail to the post. Enjoy!

以下帖子由巴西开发商Jones Dias撰写。 他的英语比我的葡萄牙语好很多，但是由于它不是他的母语，所以我在帖子中添加了一些额外的细节。 请享用！

Before we start, I want to say thank you to David for giving me this awesome opportunity to share this experience with you guys and say that I'm really flattered. I think that CSS animations are really great. When I first learned how CSS animations worked, a big world of possibilities opened up in front of my eyes. If you learn how to create CSS animations, you'll be able to create animated buttons, forms, pages, menus, sliders, cartoon characters, etc.

在开始之前，我想对David表示感谢，感谢他给我这次绝佳的机会，与大家分享了这一经验，并说我真的很受宠若惊。 我认为CSS动画确实很棒。 当我第一次了解CSS动画的工作原理时，在我眼前打开了无限的可能性。 如果您学习如何创建CSS动画，则可以创建动画按钮，表单，页面，菜单，滑块，卡通人物等。

I chose to animate Mike the Frog, the Treehouse mascot.

我选择为树屋吉祥物青蛙麦克做动画。

View Demo 观看演示

HTML (The HTML)

A new element is created for each relevant part of the mascot's face:

为吉祥物脸部的每个相关部分创建一个新元素：

<div class="mike">
  <div class="head">
    <div class="eyes">
      <div class="eye">
        <div class="pupil"></div>
      </div>
      <div class="eye">
        <div class="pupil"></div>
      </div>
    </div>
    <div class="nose">
      <div class="ball"></div>
      <div class="ball"></div>
    </div>
    <div class="mouth"></div>
  </div>
</div>

This example uses DIV elements but any block element type may be used.

本示例使用DIV元素，但可以使用任何块元素类型。

CSS (The CSS)

Once the HTML is done, I start setting the dimensions, background colors, borders and positioning properties:

HTML完成后，我开始设置尺寸，背景颜色，边框和定位属性：

div {
  border-radius: 50%;
  box-sizing: border-box;
}

.mike {
  width: 400px;
  margin: 0 auto;
  padding-top: 2%;
  transition: all 1s;
}

.mike:hover {
  transform: scale(1.5) rotate(360deg);
}

.head {
  width: 195px;
  height: 120px;
  background: #92ae57;
  position: relative;
  z-index: 1;
  margin-left: 103px;
}

.eyes {
  width:200px;
  position: absolute;
  bottom: 45px;
}

.eye {
  width: 95px;
  height: 93px;
  background-color: #ffe13b;
  border: 10px solid #92ae57;
  display: inline-block;
  z-index: 2;
  animation: eyes 5s infinite step-start 0s;
}

.eye:last-child {
  float:right;
}

.pupil {
  width: 1px;
  height: 1px;
  border: 10px solid #353535;
  display: inline-block;
  position: absolute;
  top: 38px;
  margin-left:27px;  
  z-index: 3;
  animation: pupil 5s infinite step-start 0s;
}

.pupil:last-child{
  float:right;
}

.ball {
  width: 1px;
  height: 1px;
  border: 5px solid #6f8346;
  position: absolute;
  top: 70px;
  left: 88px;
}

.ball:last-child {
  float:left;
  margin-left: 14px;
}

.mouth {
  height: 100px;
  width: 180px;
  border-bottom: 4px solid #6f8346;
  position: relative;
  top: 8px;
  left: 7px;
}

/* Animations */

@keyframes eyes {
   0%, 100% {
    background: #92ae57;
    border-radius: 50%;
    border: 10px solid #92ae57;
  } 

   5%, 95% {  
    background:#ffe13b;
    border-radius: 50%;
    border: 10px solid #92ae57;
  }
}

@keyframes pupil {
  0%, 100% {
    opacity: 0;
  }
  5%, 95% {
    opacity: 1;
 }
}

When I got Mike ready to be animated, I started by blinking his eyes. I created 2 keyframe rules to do it:

当我准备好让Mike动画时，我先眨了眨眼。 我创建了2个关键帧规则来做到这一点：

@keyframes eyes {
  0%, 100% {
    background: #92ae57;
    border-radius: 50%;
    border: 10px solid #92ae57;
  } 

  5%, 95% {
    background: #ffe13b;
    border-radius: 50%;
    border: 10px solid #92ae57;
   }
}

In this part, I set the eye to be opened during the periods between 5% and 95%. And to be closed in the 0% and 100%.

在这一部分中，我将视线设置在5％到95％之间。 并以0％和100％收盘。

@keyframes pupil {
  0%, 100% {
    opacity: 0;
  }
  5%, 95% {
    opacity: 1;
 }
}

I set the pupil to be hidden in two points, 0% and 100%, and to stay showing during the period between 5% and 95%. But setting this up won't make the animation work, so I put the animation property to the eye and pupil with a duration of 5s infinitely using the step-start timing function. I set a hover with transform to the .mike element, making it scaled at 1.5 as big as it was and rotate it 360 degrees.

我将瞳Kong设置为隐藏在两个点(0％和100％)中，并在5％和95％之间保持显示状态。 但是设置此设置将无法使动画正常工作，因此我使用步进开始计时功能将动画属性以5s的持续时间无限地置于眼睛和瞳Kong中。 我对.mike元素设置了带有transform的悬停，使其缩放为原来的1.5，并将其旋转360度。

.mike:hover{
  transform: scale(1.5) rotate(360deg);
}

Finally, I selected all possible animating properties in the mike class, giving it a duration of 1 second.

最后，我在mike类中选择了所有可能的动画属性，使其持续时间为1秒。

.mike{
  transition: all 1s;
}

View Demo 观看演示

That's all folks! Creating this animation was easier than many may think -- no canvas or even JavaScript required, just pure CSS!

所有人！ 创建此动画比许多人想象的要容易-不需要画布甚至JavaScript，只需纯CSS！

翻译自: https://davidwalsh.name/logo-animation

乐高积木树屋