mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-12 23:37:14 +00:00
b11e9c0e51
- [ ] babel-eslint https://github.com/babel/babel-eslint/issues/664 - [x] eslint-config-standard-jsx https://github.com/standard/eslint-config-standard-jsx/issues/32 - [x] eslint-config-standard to be stable release https://github.com/standard/eslint-config-standard/issues/123 - [x] eslint-plugin-html - [x] eslint-plugin-import - [x] eslint-plugin-jest - [x] eslint-plugin-node - [x] eslint-plugin-promise - [x] eslint-plugin-standard https://github.com/standard/eslint-plugin-standard/issues/29 - [x] eslint-plugin-vue https://github.com/vuejs/eslint-plugin-vue/pull/504 - [x] eslint-plugin-react https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.10.0
80 lines
1.4 KiB
Vue
80 lines
1.4 KiB
Vue
<template>
|
|
<div class="VueToNuxtLogo">
|
|
<div class="Triangle Triangle--two" />
|
|
<div class="Triangle Triangle--one" />
|
|
<div class="Triangle Triangle--three" />
|
|
<div class="Triangle Triangle--four" />
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.VueToNuxtLogo {
|
|
display: inline-block;
|
|
animation: turn 2s linear forwards 1s;
|
|
transform: rotateX(180deg);
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 180px;
|
|
width: 245px;
|
|
}
|
|
|
|
.Triangle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.Triangle--one {
|
|
border-left: 105px solid transparent;
|
|
border-right: 105px solid transparent;
|
|
border-bottom: 180px solid #41B883;
|
|
}
|
|
|
|
.Triangle--two {
|
|
top: 30px;
|
|
left: 35px;
|
|
animation: goright 0.5s linear forwards 3.5s;
|
|
border-left: 87.5px solid transparent;
|
|
border-right: 87.5px solid transparent;
|
|
border-bottom: 150px solid #3B8070;
|
|
}
|
|
|
|
.Triangle--three {
|
|
top: 60px;
|
|
left: 35px;
|
|
animation: goright 0.5s linear forwards 3.5s;
|
|
border-left: 70px solid transparent;
|
|
border-right: 70px solid transparent;
|
|
border-bottom: 120px solid #35495E;
|
|
}
|
|
|
|
.Triangle--four {
|
|
top: 120px;
|
|
left: 70px;
|
|
animation: godown 0.5s linear forwards 3s;
|
|
border-left: 35px solid transparent;
|
|
border-right: 35px solid transparent;
|
|
border-bottom: 60px solid #fff;
|
|
}
|
|
|
|
@keyframes turn {
|
|
100% {
|
|
transform: rotateX(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes godown {
|
|
100% {
|
|
top: 180px;
|
|
}
|
|
}
|
|
|
|
@keyframes goright {
|
|
100% {
|
|
left: 70px;
|
|
}
|
|
}
|
|
</style>
|