<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