共计 2917 个字符,预计需要花费 8 分钟才能阅读完成。
原网址:https://codepen.io/jellynina/…
我拿来改了一点点。
应用了 CSS 的动画:
<template>
<div>
<div class="boat">
![](https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/boat.png)
</div>
![](https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/mike.png)
</div>
</template>
<script>
export default {name:'boat'}
</script>
<style lang="less" scoped>
/**
* animation 封装
*/
// keyframes 封装 @prefix 浏览器前缀 @name 动画名称 @content 动画内容执行函数
.keyframes (@prefix,@name,@content) when (@prefix=def) {
@keyframes @name {@content();
}
}
.keyframes (@prefix,@name,@content) {
@prefix+'-keyframes' @name {@content();
}
}
.keyframes (@prefix,@name,@content) when (@prefix=all) {.keyframes(moz,@name,@content);
.keyframes(o,@name,@content);
.keyframes(webkit,@name,@content);
.keyframes(def,@name,@content);
}
// animation 自定义动画
// 1. 背景挪动
.keyframes(all,bg-move,{0% { background-position: 100% -560px;}
100% {background-position: -350% -460px;}
});
// 2. 青蛙挪动
.keyframes(all,mike-move,{100% { left: 12%;}
});
// 3. 青蛙浮起来
.keyframes(all,mike-float,{
50% {transform: rotateZ(5deg) translateY(-5px);
-moz-transform: rotateZ(5deg) translateY(-5px);
-o-transform: rotateZ(5deg) translateY(-5px);
-webkit-transform: rotateZ(5deg) translateY(-5px);
}
});
// 4. 小船挪动
.keyframes(all,rock-boat,{
50% {transform: rotate(-5deg) translateY(-10px);
-moz-transform: rotate(-5deg) translateY(-10px);
-o-transform: rotate(-5deg) translateY(-10px);
-webkit-transform: rotate(-5deg) translateY(-10px);
}
});
// 5. 小船蒸汽
.keyframes(all,steam-boat,{
40%,
60% {opacity: .8;}
100% {transform: translate(-15%, -35%) rotateZ(20deg);
-moz-transform: translate(-15%, -35%) rotateZ(20deg);
-o-transform: translate(-15%, -35%) rotateZ(20deg);
-webkit-transform: translate(-15%, -35%) rotateZ(20deg);
}
});
/* Animations 调用
------------------------------------------ */
// 挪动背景
body {
background:
#F0FCFF url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/island.png') repeat-x 100% -460px;
background-size: auto;
background-size: 780px;
animation: bg-move 8s ease-out forwards;
-moz-animation:bg-move 8s ease-out forwards;
-o-animation:bg-move 8s ease-out forwards;
-webkit-animation: bg-move 8s ease-out forwards;
}
// 船
.boat {
animation: rock-boat 3s ease-in-out infinite;
-moz-animation: rock-boat 3s ease-in-out infinite;
-o-animation: rock-boat 3s ease-in-out infinite;
-webkit-animation: rock-boat 3s ease-in-out infinite;
}
// 船的烟,伪元素生成
.boat::after {
content: "";
animation: steam-boat 4s 2s infinite;
-moz-animation: steam-boat 4s 2s infinite;
-o-animation: steam-boat 4s 2s infinite;
-webkit-animation: steam-boat 4s 2s infinite;
display: block;
width: 120px;
height: 120px;
background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/steam.png') no-repeat;
background-size: auto;
background-size: 120px;
position: absolute;
top: -25%;
left: 5%;
opacity: 0;
}
.mike {
animation: mike-move 6s 6s ease-out forwards,
mike-float 3.2s infinite;
-moz-animation:mike-move 6s 6s ease-out forwards,
mike-float 3.2s infinite;
-o-animation:mike-move 6s 6s ease-out forwards,
mike-float 3.2s infinite;
-webkit-animation: mike-move 6s 6s ease-out forwards,
mike-float 3.2s infinite;
}
</style>
正文完