Skip to content

html / zhaocaih5-wanda

Go to a project
Commit dcd9ae05 by mamingqun
Options

cb

parent 41155971
Showing with 887 additions and 258 deletions
package.json
......@@ -13,6 +13,7 @@
"jquery": "^3.4.1",
"turn.js": "^1.0.5",
"vue": "^2.6.10",
"vue-navigation": "^1.1.4",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
......
src/main.js
......@@ -4,14 +4,32 @@ import router from './router'
import store from './store'
import 'animate.css'
import './assets/js/amfe-flexible'
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
let eventbus = new Vue()
window.$eventbus = eventbus
Vue.config.productionTip = false
Vue.directive('shotclick', function (el, binding) {
el.onmousedown = function () {
var timeNow = new Date().getTime()
document.onmouseup = function (e) {
if (new Date().getTime() - timeNow < 500) {
binding.value(e)
}
}
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
\ No newline at end of file
src/router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import shouye from './views/shouye.vue'
import xu from './views/xu.vue'
import yjml from './views/yjml.vue'
import erjiye from './views/erjiye.vue'
import xiangqing from './views/xiangqing.vue'
Vue.use(Router)
export default new Router({
routes: [
{
routes: [{
path: '/',
name: 'home',
component: Home
component: Home,
redirect: '/shouye',
children: [{
path: 'shouye',
name: 'shouye',
component: shouye
},
{
path: 'xu',
name: 'xu',
component: xu
},
{
path: 'yjml',
name: 'yjml',
component: yjml
},
{
path: 'erjiye',
name: 'erjiye',
component: erjiye
},
{
path: 'xiangqing',
name: 'xiangqing',
component: xiangqing
},
]
},
{
path: '/about',
......@@ -17,7 +48,7 @@ export default new Router({
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
component: () => import( /* webpackChunkName: "about" */ './views/About.vue')
}
]
})
\ No newline at end of file
src/views/Home.vue
......@@ -40,13 +40,23 @@
</div>
</div>
</transition>
</div> -->
</div>-->
<!-- <shouye/> -->
<!-- <xu/> -->
<!-- <yjml/> -->
<!-- <erjiye/> -->
<xiangqing/>
<!-- <xiangqing /> -->
<div class="book-page-box book-page-1 preserve-3d">
<div class="book-page page-front">
<transition :name="transitionName" mode="in-out">
<keep-alive>
<router-view />
</keep-alive>
</transition>
</div>
</div>
</div>
</template>
......@@ -65,40 +75,87 @@ export default {
xu: true,
yjml: true,
erjiye: true,
xiangqing: true
xiangqing: true,
transitionName: 'fanye1',
}
},
created() {
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
},
mounted() {
console.log(123);
this.GoOrBack()
this.watchPage()
},
methods: {
handleShouye() {
this.shouye = !this.shouye
// this.shouye = !this.shouye
this.$router.push({ name: 'shouye' })
},
handleXu() {
this.xu = !this.xu
// this.xu = !this.xu
this.$router.push({ name: 'xu' })
},
handleYjml() {
this.yjml = !this.yjml
// this.yjml = !this.yjml
this.$router.push({ name: 'yjml' })
},
handleErjiye() {
this.erjiye = !this.erjiye
// this.erjiye = !this.erjiye
this.$router.push({ name: 'erjiye' })
},
handleXiangqing() {
// this.xiangqing = !this.xiangqing
this.$router.push({ name: 'xiangqing' })
},
beforeunloadFn(e) {
console.log('刷新或关闭')
// ...
}
GoOrBack() {
this.$navigation.on('forward', (to, from) => {
console.log('前进')
this.transitionName = 'fanye1'
})
this.$navigation.on('back', (to, from) => {
console.log('后退');
this.transitionName = 'fanye2'
})
},
destroyed() {
console.log('销毁了组件');
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
watchPage() {
$eventbus.$on('jumpPage', (page) => {
console.log(page);
switch (page) {
case 'shouye':
this.handleShouye()
break;
case 'xu':
this.handleXu()
break;
case 'yjml':
this.handleYjml()
break;
case 'erjiye':
this.handleErjiye()
break;
case 'xiangqing':
this.handleXiangqing()
break;
default:
break;
}
})
}
},
// beforeRouteLeave(to, from, next) {
// console.log(this);
// this.$navigation.on('forward', (to, from) => {
// console.log('前进')
// this.transitionName = 'fanye1'
// })
// this.$navigation.once('back', (to, from) => {
// console.log('后退');
// this.transitionName = 'fanye2'
// })
// },
components: {
shouye,
xu,
......@@ -131,10 +188,17 @@ body {
// vue 动画样式
.fanye1-enter-active {
animation: fanye1 1s ease-in reverse;
// animation: fanye1 1s ease-in reverse;
}
.fanye1-leave-active {
animation: fanye1 1s ease-in;
animation: fanye1 0.5s ease-in;
}
.fanye2-enter-active {
animation: fanye1 0.5s ease-in reverse;
}
.fanye2-leave-active {
// animation: fanye1 1s ease-in reverse;
}
@keyframes fanye1 {
......@@ -166,11 +230,7 @@ body {
}
.book-page {
// width: 300 / @r;
// height: 300 / @r;
height: 100%;
border: 1 / @r solid #1976d2;
text-align: center;
}
.book-page-box {
......@@ -226,19 +286,11 @@ body {
}
/*书的封面*/
.book-page-1 .page-front {
background-color: #1976d2;
}
.book-page-1 .page-back {
background-color: #fff;
}
.book-page-1 .page-front p {
// font-size: 30 / @r;
// color: #fff;
// margin-top: 100 / @r;
}
.flip-animation-1 {
animation: flipBook1 17s;
......@@ -250,11 +302,6 @@ body {
background-color: #fff;
}
.book-page-2 .page-front p {
// font-size: 30 / @r;
// color: #1976d2;
// margin-top: 100 / @r;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
......@@ -266,11 +313,6 @@ body {
background-color: #fff;
}
.book-page-3 .page-front p {
// font-size: 30 / @r;
// color: #1976d2;
// margin-top: 100 / @r;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
......
src/views/erjiye.vue
<template>
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="erjiye">
<div class="content">
<div class="title"></div>
......@@ -28,17 +30,27 @@
</div>
<div class="bottom11"></div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
handleJump() {
$eventbus.$emit('jumpPage', 'xiangqing')
}
},
}
</script>
<style lang="less" scoped>
@r: 75rem;
.zindex{
z-index: 97;
}
.erjiye {
height: 100%;
background: url("../assets/images/erjiye/bg.png") no-repeat bottom center;
......@@ -104,4 +116,134 @@ export default {
background-size: 100% auto;
}
}
// 分割线
// vue 动画样式
// .fanye1-enter-active {
// animation: fanye1 1s ease-in reverse;
// }
// .fanye1-leave-active {
// animation: fanye1 1s ease-in;
// }
@keyframes fanye1 {
0% {
transform: rotateY(0deg) skewY(0deg);
}
100% {
transform: rotateY(-160deg) skewY(-20deg);
}
}
//翻页样式
.book {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 121%;
height: 100%;
background-color: #fff;
// transform: rotateX(30deg) translate(-50%, -60%);
transform: rotateX(0deg) translate(-50%, -50%);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
height: 100%;
}
.book-page-box {
position: absolute;
top: 0;
left: 0;
width: 750 / @r;
height: 100%;
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
/*书的封面*/
.book-page-1 .page-back {
background-color: #fff;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
</style>
src/views/index.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-flip-book</title>
<style>
/*
flip-book样式
*/
* {
padding: 0;
margin: 0;
}
body,
html {
height: 100%;
}
body {
/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
perspective: 1000px;
background-color: #212121;
font-family: '微软雅黑';
}
.book {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
width: 300px;
height: 300px;
background-color: #fff;
transform: rotateX(30deg);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border: 1px solid #1976D2;
text-align: center;
}
.book-page-box {
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
/*书的封面*/
.book-page-1 .page-front {
background-color: #1976D2;
}
.book-page-1 .page-back {
background-color: #fff;
}
.book-page-1 .page-front p {
font-size: 30px;
color: #fff;
margin-top: 100px;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.book-page-2 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.book-page-3 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
/*书的第四页*/
.book-page-4 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- 书的主体 -->
<div class="book preserve-3d">
<!-- 书的最后一页 -->
<div class="book-page-box book-page-4 preserve-3d">
<div class="book-page page-front">
<p>第三页</p>
</div>
</div>
<!-- 书的第三页 -->
<div class="book-page-box book-page-3 preserve-3d flip-animation-3">
<div class="book-page page-front">
<p>第二页</p>
</div>
</div>
<!-- 书的第二页 -->
<div class="book-page-box book-page-2 preserve-3d flip-animation-2">
<div class="book-page page-front">
<p>第一页</p>
</div>
</div>
<!-- 书的封面 -->
<div class="book-page-box book-page-1 preserve-3d flip-animation-1">
<div class="book-page page-front">
<p>
翻页特效
<br>
flip-book
</p>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
src/views/shouye.vue
<template>
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="home">
<div class="animated jackInTheBox main-title">
<div class="stars"></div>
......@@ -11,6 +13,8 @@
<span>阅读人数</span>：1898256
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -32,6 +36,11 @@ export default {
// });
// })
},
methods:{
handleJump() {
$eventbus.$emit('jumpPage','xu')
}
},
components: {
}
......@@ -41,6 +50,10 @@ export default {
<style lang="less" scoped>
@r: 75rem;
.zindex {
z-index: 100;
}
#flipbook {
width: 800 / @r;
height: 400 / @r;
......@@ -142,5 +155,149 @@ export default {
position: absolute;
bottom: 0;
}
.wrap {
height: 100%;
}
body,
html {
height: 100%;
}
body {
/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
perspective: 1000 / @r;
background-color: #212121;
font-family: "微软雅黑";
}
// vue 动画样式
/* .fanye1-enter-active {
animation: fanye1 1s ease-in reverse;
}
.fanye1-leave-active {
animation: fanye1 1s ease-in;
} */
@keyframes fanye1 {
0% {
transform: rotateY(0deg) skewY(0deg);
}
100% {
transform: rotateY(-160deg) skewY(-20deg);
}
}
//翻页样式
.book {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 121%;
height: 100%;
background-color: #fff;
// transform: rotateX(30deg) translate(-50%, -60%);
transform: rotateX(0deg) translate(-50%, -50%);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
height: 100%;
}
.book-page-box {
position: absolute;
top: 0;
left: 0;
width: 750 / @r;
height: 100%;
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
/*书的封面*/
.book-page-1 .page-front {
}
.book-page-1 .page-back {
background-color: #fff;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
</style>
src/views/xiangqing.vue
<template>
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="xiangqing">
<div class="laozhao" @click="showMulu"></div>
<div class="mulu">
<div class="mulu" v-show="mulu">
<div class="title">万达招采</div>
<div class="content">
<ul>
<ul v-shotclick="handleClick">
<li class="main-title">封面</li>
<li class="main-title">序</li>
<li class="main-title">一、集团招采管理制度要点</li>
......@@ -33,6 +35,8 @@
</div>
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -45,6 +49,12 @@ export default {
methods: {
showMulu() {
this.mulu = !this.mulu
},
handleClick() {
console.log(123);
},
handleJump() {
console.log(123123)
}
}
}
......@@ -53,6 +63,11 @@ export default {
<style lang="less" scoped>
@r: 75rem;
.zindex{
z-index: 96;
}
.xiangqing {
height: 100%;
background: url("../assets/images/xiangqing/bg.png") no-repeat top center;
......@@ -77,13 +92,14 @@ export default {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(74, 124, 185, 0.5);
background: rgba(74, 124, 185, 0.8);
border-radius: 5 / @r;
color: white;
font-size: 40 / @r;
display: flex;
flex-direction: column;
padding-bottom: 20 / @r;
user-select: none;
.title {
text-align: center;
......@@ -107,4 +123,130 @@ export default {
}
}
}
// 分割线
// vue 动画样式
// .fanye1-enter-active {
// animation: fanye1 1s ease-in reverse;
// }
// .fanye1-leave-active {
// animation: fanye1 1s ease-in;
// }
@keyframes fanye1 {
0% {
transform: rotateY(0deg) skewY(0deg);
}
100% {
transform: rotateY(-160deg) skewY(-20deg);
}
}
//翻页样式
.book {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 121%;
height: 100%;
background-color: #fff;
// transform: rotateX(30deg) translate(-50%, -60%);
transform: rotateX(0deg) translate(-50%, -50%);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
height: 100%;
}
.book-page-box {
position: absolute;
top: 0;
left: 0;
width: 750 / @r;
height: 100%;
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
.book-page-1 .page-back {
background-color: #fff;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
</style>
src/views/xu.vue
<template>
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="xu">
<div class="main-box">
<div class="title"></div>
......@@ -41,6 +43,8 @@
</div>
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -49,6 +53,14 @@ export default {
return {
}
},
mounted(){
},
methods: {
handleJump() {
$eventbus.$emit('jumpPage', 'yjml')
}
}
}
</script>
......@@ -56,6 +68,10 @@ export default {
<style lang="less" scoped>
@r: 75rem;
.zindex{
z-index: 99;
}
.w80 {
width: 80%;
}
......@@ -144,4 +160,146 @@ export default {
}
}
}
.wrap {
height: 100%;
}
body,
html {
height: 100%;
}
body {
/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
perspective: 1000 / @r;
background-color: #212121;
font-family: "微软雅黑";
}
// vue 动画样式
// .fanye1-enter-active {
// animation: fanye1 1s ease-in reverse;
// }
// .fanye1-leave-active {
// animation: fanye1 1s ease-in;
// }
@keyframes fanye1 {
0% {
transform: rotateY(0deg) skewY(0deg);
}
100% {
transform: rotateY(-160deg) skewY(-20deg);
}
}
//翻页样式
.book {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 121%;
height: 100%;
background-color: #fff;
// transform: rotateX(30deg) translate(-50%, -60%);
transform: rotateX(0deg) translate(-50%, -50%);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
height: 100%;
}
.book-page-box {
position: absolute;
top: 0;
left: 0;
width: 750 / @r;
height: 100%;
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
/*书的封面*/
.book-page-1 .page-back {
background-color: #fff;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
</style>
src/views/yjml.vue
<template>
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="yjml">
<div class="cuizi"></div>
<div class="cheng"></div>
......@@ -18,7 +20,9 @@
<div class="yijian"></div>
<!-- <div class="tanceng">
<div class="kuang"></div>
</div> -->
</div>-->
</div>
</div>
</div>
</template>
......@@ -31,15 +35,12 @@ export default {
}
},
mounted() {
// this.$nextTick(() => {
// $('#flipbook').turn({
// width: 300,
// height: 600,
// autoCenter: true,
// acceleration: true,
// duration: 600
// });
// })
},
methods: {
handleJump() {
$eventbus.$emit('jumpPage', 'erjiye')
}
},
components: {
......@@ -50,6 +51,10 @@ export default {
<style lang="less" scoped>
@r: 75rem;
.zindex{
z-index: 98;
}
.yjml {
height: 100%;
background: url("../assets/images/01/bg01.jpg") no-repeat center center;
......@@ -187,9 +192,133 @@ export default {
top: 50%;
transform: translate(-50%, -50%);
background: greenyellow;
background: url('../assets/images/02/tanceng.png') no-repeat center center;
background: url("../assets/images/02/tanceng.png") no-repeat center center;
background-size: contain;
}
}
// 分割线
// vue 动画样式
// .fanye1-enter-active {
// animation: fanye1 1s ease-in reverse;
// }
// .fanye1-leave-active {
// animation: fanye1 1s ease-in;
// }
@keyframes fanye1 {
0% {
transform: rotateY(0deg) skewY(0deg);
}
100% {
transform: rotateY(-160deg) skewY(-20deg);
}
}
//翻页样式
.book {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 121%;
height: 100%;
background-color: #fff;
// transform: rotateX(30deg) translate(-50%, -60%);
transform: rotateX(0deg) translate(-50%, -50%);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
height: 100%;
}
.book-page-box {
position: absolute;
top: 0;
left: 0;
width: 750 / @r;
height: 100%;
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
.book-page-1 .page-back {
background-color: #fff;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
</style>
yarn.lock
......@@ -7891,6 +7891,11 @@ vue-loader@^15.7.0:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-navigation@^1.1.4:
version "1.1.4"
resolved "https://registry.npm.taobao.org/vue-navigation/download/vue-navigation-1.1.4.tgz#be990190624647daa34b8cd525fad4fb6d472542"
integrity sha1-vpkBkGJGR9qjS4zVJfrU+21HJUI=
vue-router@^3.0.3:
version "3.0.6"
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment