mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 14:15:13 +00:00
67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<template lang="pug">
|
|
.VueToNuxtLogo
|
|
.Triangle.Triangle--two
|
|
.Triangle.Triangle--one
|
|
.Triangle.Triangle--three
|
|
.Triangle.Triangle--four
|
|
</template>
|
|
|
|
<style lang="stylus">
|
|
.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>
|