源代码下载

 

　　https://github.com/comehope/front-end-daily-challenges

 

　　代码解读

 

　　定义dom，容器中包含2个元素，分别代表怪兽的身体和眼睛：

 

　　<pclass="monster">

 

　　<spanclass="body"></span>

 

　　<spanclass="eyes"></span>

 

　　</p>

 

　　设置背景色：

 

　　body{

 

　　margin:0;

 

　　height:100vh;

 

　　background-color:black;

 

　　}

 

　　设置前景色：

 

　　.monster{

 

　　width:100vw;

 

　　height:50vh;

 

　　background-color:lightcyan;

 

　　}

 

　　画出怪兽的身体：

 

　　.monster{

 

　　position:relative;

 

　　}

 

　　.body{

 

　　position:absolute;

 

　　width:32vmin;

 

　　height:32vmin;

 

　　background-color:teal;

 

　　border-radius:43%40%43%40%;

 

　　bottom:calc(-1*32vmin/2-4vmin);

 

　　}

 

　　定义怪兽眼睛所在的容器：

 

　　.eyes{

 

　　width:24vmin;

 

　　height:5vmin;

 

　　position:absolute;

 

　　bottom:2vmin;

 

　　left:calc(32vmin-24vmin-2vmin);

 

　　}

 

　　用伪元素画出怪兽的眼睛：

 

　　

 

　　.eyes::before,

 

　　.eyes::after{

 

　　content:'';

 

　　position:absolute;

 

　　width:5vmin;

 

　　height:5vmin;

 

　　border:1.25vminsolidwhite;

 

　　box-sizing:border-box;

 

　　border-radius:50%;

 

　　}

 

　　.eyes::before{

 

　　left:4vmin;

 

　　}

 

　　.eyes::after{

 

　　right:4vmin;

 

　　}

 

　　为怪兽定义轻轻跳起的动画，结合后面的动画效果，让它具有果冻的弹性：

 

　　.body{

 

　　animation:

 

　　bounce1sinfinitealternate;

 

　　}

 

　　@keyframesbounce{

 

　　to{

 

　　bottom:calc(-1*32vmin/2-2vmin);

 

　　}

 

　　}

 

　　让怪兽的身体转动起来：

 

　　@keyframeswave{

 

　　to{

 

　　transform:rotate(360deg);

 

　　}

 

　　}

 

　　让怪兽徘徊行走：

 

　　

 

　　.monster{

 

　　overflow:hidden;

 

　　}

 

　　.body{

 

　　left:-2vmin;

 

　　animation:

 

　　wander5slinearinfinitealternate,

 

　　wave3slinearinfinite,

 

　　bounce1sinfinitealternate;

 

　　}

 

　　.eyes{

 

　　animation:wander5slinearinfinitealternate;

 

　　}

 

　　@keyframeswander{

 

　　to{

 

　　left:calc(100%-32vmin+2vmin);

 

　　}

 

　　}

 

　　最后，让怪兽的眼睛眨一眨：

 

　　.eyes::before,

 

　　.eyes::after{

 

　　animation:blink3sinfinitelinear;

 

　　}

 

　　@keyframesblink{

 

　　4%,10%,34%,40%{

 

　　transform:scaleY(1);

 

　　}

 

　　7%,37%{

 

　　transform:scaleY(0);

 

　　}

 

　　}

 

　　大功告成！








本文转载自中文网