首页 > 其他 > 详细

动态启动页

时间:2021-01-05 15:07:14      阅读:26      评论:0      收藏:0      [点我收藏+]
<template>
    <view class="content">
        <view class="litAnimate">
            <view></view>
            <view></view>
            <view></view>
        </view>
        <image class="logo" @click="navTo" mode="aspectFill" src="/static/img/Aes.jpg"></image>
        <!-- <view class="text-area"><navigator url="../../components/Calendar" class="title">直接去模板页面</navigator></view> -->
        <!-- <view class="text-area "><navigator url="./ImportComponet" class="title">当做模板引入>></navigator></view> -->
        <view class="text-area "><text>喜欢请点赞、给我一丝前进的动力</text></view>
        <view class="text-area "><text>Thanks for your appreciation.</text></view>
    </view>
</template>

 

<script>
export default {
    data() {
        return {
            title: ‘‘
        };
    },
    onLoad() {},
    onShow() {},
    methods: {
        navTo() {
            setTimeout(() => {
                uni.navigateTo({
                    // url: ‘./ImportComponet‘
                });
            }, 500);
        }
    }
};
</script>
<style>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.litAnimate { 
  margin-top: 100px; 
  text-align: center; 
  animation: 1s upDownAnimation infinite linear; 
  position: relative; 
} 
@keyframes upDownAnimation {
   0% { top: 4px; } 50% { top: -4px; } 100% { top: 4px; }
 } 
.logo {
  width: 50vw; 
  border-radius: 50%; 
  height: 50vw; margin: 100upx 0; 
  transition: all 0.4s linear; 
} 
.logo:hover { 
  border-radius: 0; 
  transform: scale(1.8); 
  height: 30vw; 
  box-shadow: 3px 6px 3px #9e9e9e; 
} 
.text-area { 
  margin: 10px 0; 
  display: flex; 
  justify-content: center; 
} 
.title { 
  font-size: 36upx; 
  color: #8f8f94; 
}
</style>

 

动态启动页

原文:https://www.cnblogs.com/xmgnp/p/14235266.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!