Skip to content

Commit

Permalink
add: css3
Browse files Browse the repository at this point in the history
  • Loading branch information
xiuhonglee committed Jun 29, 2018
1 parent b453a7a commit bcfc4c8
Show file tree
Hide file tree
Showing 11 changed files with 566 additions and 1 deletion.
187 changes: 187 additions & 0 deletions docs/.vuepress/components/CSS3/c01.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
<template>
<div class="c01">
<div class="a"></div>
</div>
</template>

<script>
export default {
data() {
return {};
}
};
</script>


<style>
.c01 {
position: relative;
width: 400px;
height: 200px;
}
.a {
position: relative;
width: 0;
height: 0;
border-width: 0 50px 87px;
border-style: solid;
border-color: transparent transparent #095;
animation: a 20s infinite linear alternate;
}
.a:before,
.a:after {
position: absolute;
content: "";
border-width: 0;
border-style: solid;
}
.a:before {
animation: ab 20s infinite linear alternate;
}
.a:after {
animation: af 20s infinite linear alternate;
}
@keyframes a {
0%,
5% {
width: 0;
height: 0;
border-width: 0 50px 87px;
border-color: transparent transparent #095;
}
23% {
width: 0;
height: 0;
border-width: 0 50px 0;
border-color: transparent transparent #c00;
}
42% {
width: 0;
height: 0;
border-width: 0 81px 59px;
border-color: transparent transparent #069;
}
61% {
width: 100px;
height: 0;
border-width: 0 50px 87px;
border-color: transparent transparent #f80;
}
80% {
width: 0;
height: 0;
border-width: 0 90px 43px;
border-color: transparent transparent #09c;
}
95%,
100% {
width: 100px;
height: 0;
border-width: 0 71px 71px;
border-color: transparent transparent #f69;
}
}
@keyframes ab {
0%,
5% {
top: 87px;
left: -50px;
width: 100px;
height: 0;
background: #095;
border-width: 0;
border-color: #095 transparent transparent;
}
22.99% {
top: 0;
left: -50px;
width: 100px;
height: 100px;
background: #c00;
border-width: 0;
border-color: #c00 transparent transparent;
}
23% {
top: 0;
left: -50px;
width: 100px;
height: 0;
background: none;
border-width: 100px 0 0;
border-color: #c00 transparent transparent;
}
42% {
top: 59px;
left: -81px;
width: 100px;
height: 0;
background: none;
border-width: 95px 31px 0;
border-color: #069 transparent transparent;
}
61% {
top: 87px;
left: -50px;
width: 100px;
height: 0;
border-width: 87px 50px 0;
border-color: #f80 transparent transparent;
}
80% {
top: 140px;
left: -112px;
width: 100px;
height: 0;
border-width: 78px 62px 0;
border-color: #09c transparent transparent;
}
95%,
100% {
top: 171px;
left: -71px;
width: 100px;
height: 0;
border-width: 71px 71px 0;
border-color: #f69 transparent transparent;
}
}
@keyframes af {
0%,
61% {
top: 87px;
left: -50px;
width: 200px;
height: 0;
border-width: 0;
background: none;
border-color: transparent transparent #f80;
}
80% {
top: 43px;
left: -112px;
width: 180px;
height: 0;
border-width: 0 22px 99px;
background: none;
border-style: solid;
border-color: transparent transparent #09c;
}
95%,
100% {
top: 71px;
left: -71px;
width: 242px;
height: 0;
border-width: 0 0 100px;
background: none;
border-style: solid;
border-color: transparent transparent #f69;
}
}
</style>

99 changes: 99 additions & 0 deletions docs/.vuepress/components/CSS3/c02.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<template>
<div class="c02">
<div class="camera" :style="{ perspective: `${perspective}px`, 'perspective-origin': `${perspectiveOriginX}% ${perspectiveOriginY}%`}">
<div class="space">
<div class="box" :style="{transform: `translateX(50px) translateY(50px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`}"></div>
</div>
</div>
<div class="ctrls">
<p>
perspective-origin x: <input type="range" min="0" max="100" step="1" v-model="perspectiveOriginX"> {{perspectiveOriginX}}%
</p>
<p>
perspective-origin y: <input type="range" min="0" max="100" step="1" v-model="perspectiveOriginY"> {{perspectiveOriginY}}%
</p>
<p>
perspective: <input type="range" min="90" max="2000" step="1" v-model="perspective"> {{perspective}}px
</p>
<p>
translateZ: <input type="range" min="-100" max="100" step="1" v-model="translateZ"> {{translateZ}}px
</p>
<p>
rotateX: <input type="range" min="-360" max="360" step="1" v-model="rotateX"> {{rotateX}}deg
</p>
<p>
rotateY: <input type="range" min="-360" max="360" step="1" v-model="rotateY"> {{rotateY}}deg
</p>
<button @click="reset">reset</button>

</div>
</div>
</template>

<script>
export default {
data() {
return {
perspectiveOriginX: 50,
perspectiveOriginY: 50,
perspectiveOriginZ: 0,
translateZ: 0,
rotateX: 0,
rotateY: 0,
perspective: 500
};
},
methods: {
reset() {
this.rotateX = 0;
this.rotateY = 0;
this.translateZ = 0;
this.perspective = 500;
this.perspectiveOriginX = 50;
this.perspectiveOriginY = 50;
this.perspectiveOriginZ = 50;
}
}
};
</script>

<style>
p {
padding: 0;
margin: 2px;
}
.c02 {
display: flex;
flex-direction: row;
position: relative;
width: 600px;
height: 200px;
margin-top: 20px;
}
.ctrls {
margin-left: 20px;
}
.camera {
width: 200px;
height: 200px;
perspective: 500px;
perspective-origin: center center;
}
.space {
width: 100%;
height: 100%;
border: 1px dashed #f00;
transform-style: preserve-3d;
}
.box {
width: 100px;
height: 100px;
background: #f55777;
transform: translateX(50px) translateY(50px);
}
</style>


Loading

0 comments on commit bcfc4c8

Please sign in to comment.