mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-07 00:04:00 +08:00
更新组件演示页面，方便用户直接使用组件，去除tn-button的默认背景色，tn-avatar修改参数默认值，修复tn-avatar-group最开始头像进行了偏移、修复无法使用标签的bug，tn-badge修改参数默认值，tn-collapse-item修复背景颜色失效问题，滚动通知移除默认背景颜色和字体大小，tn-count-down修复时间单位不正确问题，列表组件修复背景颜色问题，tn-nav-bar返回按钮修改为可进行修改的图标，tn-step添加点击步骤进行跳转，tn-loading修复默认激活颜色出错问题，tn-tag移除默认背景颜色，优化阴影大小css
This commit is contained in:
JaylenTech
@@ -131,7 +131,7 @@
|
||||
|
||||
|
||||
<!-- 图文 -->
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding: 0 0 60rpx 0;">
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding-bottom: 170rpx;">
|
||||
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
@@ -144,7 +144,7 @@
|
||||
<!-- 方式二 -->
|
||||
<image
|
||||
class="tn-blogger-content__main-image tn-blogger-content__main-image--1 tn-margin-bottom"
|
||||
:src="item.mainImage"
|
||||
:src="item.mainImage[0]"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
@@ -177,6 +177,36 @@
|
||||
</block>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-qr-code tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">粤码通城</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-emoji-good tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@@ -516,4 +546,76 @@
|
||||
}
|
||||
}
|
||||
/* 移动背景部分 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: -60rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #01BEFF;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom-xl">
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom-xl" style="padding-bottom: 170rpx;">
|
||||
<block v-for="(item, index) in content" :key="index">
|
||||
<view class="" style="width: 50%;">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
@@ -160,6 +160,41 @@
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-course.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">课程</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-fire-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">精选</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-play-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">播放</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-my-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
@@ -644,4 +679,53 @@
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -134,7 +134,7 @@
|
||||
<!-- 方式7 end-->
|
||||
|
||||
<!-- 图文 -->
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom">
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom" style="padding-bottom: 170rpx;">
|
||||
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
@@ -182,6 +182,34 @@
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-level">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/home_cur.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-discover-planet tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<!-- <view class="tn-color-gray">发布</view> -->
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-signpost tn-color-gray--dark">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/me.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
@@ -601,4 +629,76 @@
|
||||
}
|
||||
}
|
||||
/* 移动背景部分 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: -30rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #FFCA28;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(255, 202, 40, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,238 +0,0 @@
|
||||
<template>
|
||||
<view class="template-browser">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
<swiper class="card-swiper" :indicator-dots="true" :circular="true" :autoplay="false" interval="10000"
|
||||
duration="500" @change="cardSwiper" indicator-color="#666" indicator-active-color="#000"
|
||||
|
||||
style="margin-top: 300rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur swiper-item1--active':'swiper-item1'">
|
||||
<view class="swiper-item image-banner" style="border-radius: 20rpx 20rpx 22rpx 22rpx;">
|
||||
<image class="" :src="item.url" v-if="item.type=='image'" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="tn-text-center tn-color-black">
|
||||
测试，未写完
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile tn-color-black">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover tn-color-gray--dark">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark">圈子</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-image-text tn-color-gray--dark">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark">案例</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my tn-color-gray--dark">
|
||||
<tn-badge :absolute="true">99+</tn-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateBrowser',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '总有你想不到的创意',
|
||||
text: '海量分享',
|
||||
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg4.jpg',
|
||||
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d1.png'
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '寻找一起成长的小伙伴',
|
||||
text: '愉快玩耍',
|
||||
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg5.jpg',
|
||||
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d4.png'
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '更多彩蛋等你探索',
|
||||
text: '酷炫多彩',
|
||||
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg4.jpg',
|
||||
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-browser{
|
||||
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
|
||||
}
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 500rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 250rpx !important;
|
||||
left: 250rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 100rpx 0rpx 100rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 200rpx;
|
||||
border-radius: 0rpx;
|
||||
transform: translate(0rpx, 0rpx) scale(1.5);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
border: 5rpx solid red;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: translate(0rpx, 0rpx) scale(2);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
border: 5rpx solid pink;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #FFF;
|
||||
opacity: 0.4;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
left: -270rpx;
|
||||
top: -180rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.swiper-item1 {
|
||||
z-index: -1;
|
||||
|
||||
&--active {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
625
templatePage/life/candle/candle.vue
Normal file
625
templatePage/life/candle/candle.vue
Normal file
@@ -0,0 +1,625 @@
|
||||
<template>
|
||||
<view class="template-candle">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
<view class="wrapper">
|
||||
<view class="candles">
|
||||
<view class="light__wave"></view>
|
||||
<view class="candle1">
|
||||
<view class="candle1__body">
|
||||
<view class="candle1__eyes">
|
||||
<view class="candle1__eyes-one"></view>
|
||||
<view class="candle1__eyes-two"></view>
|
||||
</view>
|
||||
<view class="candle1__mouth"></view>
|
||||
</view>
|
||||
<view class="candle1__stick"></view>
|
||||
</view>
|
||||
<view class="candle2">
|
||||
<view class="candle2__body">
|
||||
<view class="candle2__eyes">
|
||||
<view class="candle2__eyes-one"></view>
|
||||
<view class="candle2__eyes-two"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="candle2__stick"></view>
|
||||
</view>
|
||||
<view class="candle2__fire"></view>
|
||||
<view class="sparkles-one"></view>
|
||||
<view class="sparkles-two"></view>
|
||||
<view class="candle__smoke-one">
|
||||
</view>
|
||||
<view class="candle__smoke-two">
|
||||
</view>
|
||||
</view>
|
||||
<view class="floor">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="text-shine tn-flex tn-flex-row-center tn-text-xxl tn-text-bold" style="margin-top: 60vh;">
|
||||
敬请期待
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateCandle',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 蜡烛 start*/
|
||||
.template-candle{
|
||||
}
|
||||
.wrapper {
|
||||
background: red;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: scale(1.5, 1.5) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.floor {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 350px;
|
||||
height: 5px;
|
||||
background: #673C63;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0px 2px 5px #111;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.candles {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
transform: translate(-50%, -100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.candle1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 35px;
|
||||
height: 100px;
|
||||
background: #fff;
|
||||
border: 3px solid #673C63;
|
||||
border-bottom: 0px;
|
||||
border-radius: 3px;
|
||||
transform-origin: center right;
|
||||
transform: translate(60%, -25%);
|
||||
box-shadow: -2px 0px 0px #95c6f2 inset;
|
||||
animation: expand-body 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__stick, .candle2__stick {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
background: #673C63;
|
||||
border-radius: 8px;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
.candle2__stick {
|
||||
height: 12px;
|
||||
transform-origin: bottom center;
|
||||
animation: stick-animation 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__eyes, .candle2__eyes {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
width: 35px;
|
||||
height: 30px;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
|
||||
.candle1__eyes-one {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 20%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
transform: translate(-70%, 0%);
|
||||
animation: blink-eyes 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__eyes-two {
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
top: 20%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
transform: translate(-70%, 0%);
|
||||
animation: blink-eyes 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__mouth {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
top: 20%;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-radius: 20px;
|
||||
background: #673C63;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: uff 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle__smoke-one {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 50%;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: grey;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: move-left 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle__smoke-two {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 40%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
background: grey;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: move-top 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2 {
|
||||
position: absolute;
|
||||
left: 20%;
|
||||
top: 65%;
|
||||
width: 47px;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border: 3px solid #673C63;
|
||||
border-bottom: 0px;
|
||||
border-radius: 3px;
|
||||
transform: translate(60%, -15%);
|
||||
transform-origin: center right;
|
||||
box-shadow: -2px 0px 0px #95c6f2 inset;
|
||||
animation: shake-left 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2__eyes-one {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border: 0px solid #673C63;
|
||||
border-radius: 100%;
|
||||
float: left;
|
||||
background: #673C63;
|
||||
transform: translate(-80%, 0%);
|
||||
animation: changeto-lower 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2__eyes-two {
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border: 0px solid #673C63;
|
||||
border-radius: 100%;
|
||||
float: left;
|
||||
background: #673C63;
|
||||
transform: translate(-80%, 0%);
|
||||
animation: changeto-greater 3s infinite linear;
|
||||
}
|
||||
|
||||
.light__wave {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 35%;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 100%;
|
||||
z-index: 0;
|
||||
transform: translate(-25%, -50%) scale(2.5, 2.5);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
animation: expand-light 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2__fire {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||
background: #FF9800;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: dance-fire 3s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes blink-eyes {
|
||||
0%,35% {
|
||||
opacity: 1;
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
36%,39% {
|
||||
opacity: 0;
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
50%,65% {
|
||||
transform: translate(-140%, 0%);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
}
|
||||
@keyframes expand-body {
|
||||
0%,40% {
|
||||
transform: scale(1, 1) translate(60%, -25%);
|
||||
}
|
||||
45%,55% {
|
||||
transform: scale(1.1, 1.1) translate(60%, -28%);
|
||||
}
|
||||
60% {
|
||||
transform: scale(0.89, 0.89) translate(60%, -25%);
|
||||
}
|
||||
65% {
|
||||
transform: scale(1, 1) translate(60%, -25%);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.95, 0.95) translate(60%, -25%);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1, 1) translate(60%, -25%);
|
||||
}
|
||||
}
|
||||
@keyframes uff {
|
||||
0%,40% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
50%,54% {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
left: 30%;
|
||||
}
|
||||
59% {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
left: 20%;
|
||||
}
|
||||
62% {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
left: 20%;
|
||||
}
|
||||
67% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
left: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move-left {
|
||||
0%,59%,100% {
|
||||
width: 0px;
|
||||
left: 40%;
|
||||
}
|
||||
60% {
|
||||
width: 30px;
|
||||
left: 30%;
|
||||
}
|
||||
68% {
|
||||
width: 0px;
|
||||
left: 20%;
|
||||
}
|
||||
}
|
||||
@keyframes move-top {
|
||||
0%,64%,100% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
top: 0%;
|
||||
}
|
||||
65% {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 40%;
|
||||
left: 40%;
|
||||
}
|
||||
80% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
@keyframes shake-left {
|
||||
0%,40% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
50%,54% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
59% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
62% {
|
||||
left: 18%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
65% {
|
||||
left: 21%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
67% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
75% {
|
||||
left: 20%;
|
||||
transform: scale(1.15, 0.85) translate(60%, -15%);
|
||||
background: #fff;
|
||||
border-color: #673C63;
|
||||
}
|
||||
91% {
|
||||
left: 20%;
|
||||
transform: scale(1.18, 0.82) translate(60%, -10%);
|
||||
background: #F44336;
|
||||
border-color: #F44336;
|
||||
box-shadow: -2px 0px 0px #F44336 inset;
|
||||
}
|
||||
92% {
|
||||
left: 20%;
|
||||
transform: scale(0.85, 1.15) translate(60%, -15%);
|
||||
}
|
||||
95% {
|
||||
left: 20%;
|
||||
transform: scale(1.05, 0.95) translate(60%, -15%);
|
||||
}
|
||||
97% {
|
||||
left: 20%;
|
||||
transform: scale(1, 1) translate(60%, -15%);
|
||||
}
|
||||
}
|
||||
@keyframes stick-animation {
|
||||
0%,40% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
50%,54% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
59% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
62% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(-15deg) translate(-50%, -100%);
|
||||
}
|
||||
65% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(15deg) translate(-50%, -100%);
|
||||
}
|
||||
70% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(-5deg) translate(-50%, -100%);
|
||||
}
|
||||
72% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(5deg) translate(-50%, -100%);
|
||||
}
|
||||
74%,84% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(0deg) translate(-50%, -100%);
|
||||
}
|
||||
85% {
|
||||
transform: rotateZ(180deg) translate(0%, 120%);
|
||||
}
|
||||
92% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
}
|
||||
@keyframes expand-light {
|
||||
10%,29%,59%,89% {
|
||||
transform: translate(-25%, -50%) scale(0, 0);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
}
|
||||
90%,20%,50% {
|
||||
transform: translate(-25%, -50%) scale(1, 1);
|
||||
}
|
||||
95%,96%,26%,27%,56%,57% {
|
||||
transform: translate(-25%, -50%) scale(2, 2);
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
0%,28%,58%,100% {
|
||||
transform: translate(-25%, -50%) scale(2.5, 2.5);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
@keyframes dance-fire {
|
||||
59%,89% {
|
||||
left: 40%;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
90%,0%,7%,15%,23%,31%,39%,47%,55% {
|
||||
left: 40.8%;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
background: #FFC107;
|
||||
}
|
||||
94%,3%,11%,19%,27%,35%,43%,51%,58% {
|
||||
left: 41.2%;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
background: #FF9800;
|
||||
}
|
||||
}
|
||||
@keyframes changeto-lower {
|
||||
0%,70%,90% {
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
border-width: 0 0 0 0;
|
||||
border: 0px solid #673C63;
|
||||
transform: translate(-90%, 0%);
|
||||
}
|
||||
71%,89% {
|
||||
background: none;
|
||||
border: solid #673C63;
|
||||
border-radius: 0px;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
transform-origin: bottom left;
|
||||
transform: rotate(-45deg) translate(-50%, -65%);
|
||||
-webkit-transform: rotate(-45deg) translate(-50%, -65%);
|
||||
}
|
||||
}
|
||||
@keyframes changeto-greater {
|
||||
0%,70%,90% {
|
||||
top: 50%;
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
border-width: 0 0 0 0;
|
||||
border: 0px solid #673C63;
|
||||
transform: translate(-80%, 0%);
|
||||
}
|
||||
71%,89% {
|
||||
top: 30%;
|
||||
background: none;
|
||||
border: solid #673C63;
|
||||
border-radius: 0px;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
transform-origin: bottom left;
|
||||
transform: rotate(135deg) translate(-80%, 20%);
|
||||
-webkit-transform: rotate(135deg) translate(-80%, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/*敬请期待 start*/
|
||||
.text-shine {
|
||||
background: linear-gradient(to right, #080808 0, #fff 10%, #080808 20%);
|
||||
background-position: 0;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shine 4s infinite linear;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@-moz-keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
@-o-keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
23
templatePage/life/pano/pano.vue
Normal file
23
templatePage/life/pano/pano.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<view class="components-pano">
|
||||
<!-- <web-view src="https://j4zgq9xbby.720yun.com/t/98vkswdwr8y"></web-view> -->
|
||||
<web-view src="https://vr.he29.com/v3/tour/index?id=3095"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -18,10 +18,14 @@
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">图鸟UI Plus会员，初步定价</view>
|
||||
<view class="tn-text-bold">
|
||||
<text class="tn-text-xl-xxl">699￥ / </text>
|
||||
<text class="tn-text-xl-xxl">399￥</text>
|
||||
<text class="tn-text-xl" style="">699￥</text>
|
||||
<!-- 为什么不用text-decoration 因为这里面加了骚操作，不生效，你试试就知道了吖-->
|
||||
<text class="" style="margin: -10rpx 10rpx 0 -115rpx;">————</text>
|
||||
<text class="tn-text-xl-xxl"> / </text>
|
||||
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
|
||||
</view>
|
||||
<view class="tn-margin-bottom-xl">（大约等于两个前端页面价格）</view>
|
||||
<view class="tn-margin-bottom-xl">（大约等于1个前端页面价格）</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
@@ -53,7 +57,7 @@
|
||||
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">也希望大家能喜欢这个项目</view>
|
||||
<view class="tn-margin-bottom-xl">（不喜勿喷，东东还在努力成长）</view>
|
||||
<view class="tn-margin-bottom-xl">（不喜勿喷，北北还在努力成长）</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
@@ -70,32 +74,34 @@
|
||||
<view class="tn-text-bold">项目正式开始于2021年10月，于12月30上线</view>
|
||||
<view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">灵感来源于我的上一个原创项目</view>
|
||||
<view class="tn-margin-bottom-xl">（项目初衷是拓展业务，寻求商务合作）</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">感恩你的支持</view>
|
||||
<view class="tn-text-bold">会员特权</view>
|
||||
<view class="">①会员尊享更多酷炫模板，模板持续更新</view>
|
||||
<view class="">②优先响应会员页面模板需求，icon需求</view>
|
||||
<view class="">③会员版本更新，在会员群进行代码发送</view>
|
||||
<view class="tn-margin-bottom-xl">④有什么好的建议，可以提出来，多沟通</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">关于作者</view>
|
||||
<view class="">蔡北北，95年，广州</view>
|
||||
<view class="">浮夸UI设计</view>
|
||||
<view class="">菜鸡软件开发</view>
|
||||
<view class="">祭天产品经理</view>
|
||||
<view class="">背锅项目经理</view>
|
||||
<view class="tn-margin-bottom-xl">努力往CTO去发展</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">北北感恩你的支持</view>
|
||||
<view class="tn-margin-bottom-xl"></view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -162,5 +168,4 @@
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
|
||||
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
|
||||
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -131,7 +131,7 @@
|
||||
<!-- 验证码倒计时 -->
|
||||
<tn-verification-code
|
||||
ref="code"
|
||||
uniqueKey="login-demo-1"
|
||||
uniqueKey="login-demo-2"
|
||||
:seconds="60"
|
||||
@change="codeChange">
|
||||
</tn-verification-code>
|
||||
|
||||
401
templatePage/login/demo3/demo3.vue
Normal file
401
templatePage/login/demo3/demo3.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<view class="template-login">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="login">
|
||||
<!-- 顶部背景图片-->
|
||||
<view class="login__bg login__bg--top">
|
||||
<image class="bg" src="https://tnuiimage.tnkjapp.com/swiper/banner-animate2.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<view class="login__wrapper">
|
||||
<!-- 登录/注册切换 -->
|
||||
<view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
|
||||
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
|
||||
登录
|
||||
</view>
|
||||
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
|
||||
注册
|
||||
</view>
|
||||
|
||||
<!-- 滑块-->
|
||||
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
|
||||
</view>
|
||||
|
||||
<!-- 输入框内容-->
|
||||
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<!-- 登录 -->
|
||||
<block v-if="currentModeIndex === 0">
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-phone"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-lock"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
|
||||
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 注册 -->
|
||||
<block v-if="currentModeIndex === 1">
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-phone"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-code"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
|
||||
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-lock"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
|
||||
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
|
||||
|
||||
<view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
|
||||
</view>
|
||||
|
||||
<!-- 其他登录方式 -->
|
||||
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
|
||||
<view class="tn-icon-wechat-fill"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
|
||||
<view class="tn-icon-sina"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
|
||||
<view class="tn-icon-qq"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 验证码倒计时 -->
|
||||
<tn-verification-code
|
||||
ref="code"
|
||||
uniqueKey="login-demo-3"
|
||||
:seconds="60"
|
||||
@change="codeChange">
|
||||
</tn-verification-code>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'login-demo-3',
|
||||
mixins: [template_page_mixin],
|
||||
data() {
|
||||
return {
|
||||
// 当前选中的模式
|
||||
currentModeIndex: 0,
|
||||
// 模式选中滑块
|
||||
modeSliderStyle: {
|
||||
left: 0
|
||||
},
|
||||
// 是否显示密码
|
||||
showPassword: false,
|
||||
// 倒计时提示文字
|
||||
tips: '获取验证码'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentModeIndex(value) {
|
||||
const sliderWidth = uni.upx2px(476 / 2)
|
||||
this.modeSliderStyle.left = `${sliderWidth * value}px`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换模式
|
||||
modeSwitch(index) {
|
||||
this.currentModeIndex = index
|
||||
this.showPassword = false
|
||||
},
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if (this.$refs.code.canGetCode) {
|
||||
this.$t.messageUtils.loading('正在获取验证码')
|
||||
setTimeout(() => {
|
||||
this.$t.messageUtils.closeLoading()
|
||||
this.$t.messageUtils.toast('验证码已经发送')
|
||||
// 通知组件开始计时
|
||||
this.$refs.code.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
|
||||
}
|
||||
},
|
||||
// 获取验证码倒计时被修改
|
||||
codeChange(event) {
|
||||
this.tips = event
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 悬浮 */
|
||||
.login-sussuspension{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translate(0 , 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(0rem , 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
|
||||
/* 背景图片 start */
|
||||
&__bg {
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
|
||||
&--top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
/* &--bottom {
|
||||
bottom: -10rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
image {
|
||||
width: 750rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
} */
|
||||
}
|
||||
/* 背景图片 end */
|
||||
|
||||
/* 内容 start */
|
||||
&__wrapper {
|
||||
margin-top: 403rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 切换 start */
|
||||
&__mode {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 476rpx;
|
||||
height: 77rpx;
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
||||
border-radius: 39rpx;
|
||||
|
||||
&__item {
|
||||
height: 77rpx;
|
||||
width: 100%;
|
||||
line-height: 77rpx;
|
||||
text-align: center;
|
||||
font-size: 31rpx;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 1em;
|
||||
text-indent: 1em;
|
||||
z-index: 2;
|
||||
transition: all 0.4s;
|
||||
|
||||
&--active {
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
&__slider {
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: calc(476rpx / 2);
|
||||
border-radius: inherit;
|
||||
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
|
||||
z-index: 1;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
}
|
||||
/* 切换 end */
|
||||
|
||||
/* 登录注册信息 start */
|
||||
&__info {
|
||||
margin: 0 30rpx;
|
||||
margin-top: 105rpx;
|
||||
padding: 30rpx 51rpx;
|
||||
padding-bottom: 0;
|
||||
border-radius: 20rpx;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
||||
|
||||
&__item {
|
||||
|
||||
&__input {
|
||||
margin-top: 59rpx;
|
||||
width: 100%;
|
||||
height: 77rpx;
|
||||
border: 1rpx solid #E6E6E6;
|
||||
border-radius: 39rpx;
|
||||
|
||||
&__left-icon {
|
||||
width: 10%;
|
||||
font-size: 44rpx;
|
||||
margin-left: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 80%;
|
||||
padding-left: 10rpx;
|
||||
|
||||
&--verify-code {
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 24rpx;
|
||||
// letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
width: 10%;
|
||||
font-size: 44rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
|
||||
&__right-verify-code {
|
||||
width: 34%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: 75rpx;
|
||||
margin-bottom: 39rpx;
|
||||
width: 100%;
|
||||
height: 77rpx;
|
||||
text-align: center;
|
||||
font-size: 31rpx;
|
||||
font-weight: bold;
|
||||
line-height: 77rpx;
|
||||
letter-spacing: 1em;
|
||||
text-indent: 1em;
|
||||
border-radius: 39rpx;
|
||||
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
|
||||
}
|
||||
|
||||
&__tips {
|
||||
margin: 30rpx 0;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 登录注册信息 end */
|
||||
|
||||
/* 登录方式切换 start */
|
||||
&__way {
|
||||
margin: 0 auto;
|
||||
margin-top: 110rpx;
|
||||
|
||||
&__item {
|
||||
&--icon {
|
||||
width: 77rpx;
|
||||
height: 77rpx;
|
||||
font-size: 50rpx;
|
||||
border-radius: 100rpx;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 登录方式切换 end */
|
||||
/* 内容 end */
|
||||
|
||||
}
|
||||
|
||||
/deep/.input-placeholder {
|
||||
font-size: 24rpx;
|
||||
color: #E6E6E6;
|
||||
}
|
||||
|
||||
</style>
|
||||
420
templatePage/login/demo4/demo4.vue
Normal file
420
templatePage/login/demo4/demo4.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<view class="template-login">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="login">
|
||||
<!-- 顶部背景图片-->
|
||||
<view class="login__bg login__bg--top">
|
||||
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/2/login-top2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="login__wrapper">
|
||||
<view class="tn-margin-left tn-margin-right tn-text-bold" style="font-size: 60rpx;">
|
||||
欢迎回来
|
||||
</view>
|
||||
<view class="tn-margin tn-color-gray--disabled tn-text-lg">
|
||||
你是不是傻，菜的一撇的北北
|
||||
</view>
|
||||
|
||||
<!-- 登录/注册切换 -->
|
||||
<!-- <view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
|
||||
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
|
||||
登录
|
||||
</view>
|
||||
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
|
||||
注册
|
||||
</view>
|
||||
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
|
||||
</view> -->
|
||||
|
||||
<!-- 输入框内容-->
|
||||
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<!-- 登录 -->
|
||||
<block v-if="currentModeIndex === 0">
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-phone"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-safe"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
|
||||
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 注册 -->
|
||||
<block v-if="currentModeIndex === 1">
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-phone"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-safe"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
|
||||
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
|
||||
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-lock"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
|
||||
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
|
||||
|
||||
|
||||
<view v-if="currentModeIndex === 1" :class="[{'login__info__item__tips': currentModeIndex === 0}]">
|
||||
<view class="tn-flex tn-flex-row-between tn-padding">
|
||||
<view class="" @tap.stop="modeSwitch(0)">前往登录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="currentModeIndex === 0" :class="[{'login__info__item__tips': currentModeIndex === 1}]">
|
||||
<view class="tn-flex tn-flex-row-between tn-padding">
|
||||
<view class="tn-padding-right" @tap.stop="modeSwitch(1)">账号注册</view>
|
||||
<view class="tn-padding-left tn-color-gray">忘记密码</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 其他登录方式 -->
|
||||
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-teal--dark">
|
||||
<view class="tn-icon-wechat-fill"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-red">
|
||||
<view class="tn-icon-sina"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
|
||||
<view class="tn-icon-qq"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部背景图片-->
|
||||
<view class="login__bg login__bg--bottom">
|
||||
<image src="https://tnuiimage.tnkjapp.com/login/2/login-bottom2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 验证码倒计时 -->
|
||||
<tn-verification-code
|
||||
ref="code"
|
||||
uniqueKey="login-demo-4"
|
||||
:seconds="60"
|
||||
@change="codeChange">
|
||||
</tn-verification-code>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'login-demo-4',
|
||||
mixins: [template_page_mixin],
|
||||
data() {
|
||||
return {
|
||||
// 当前选中的模式
|
||||
currentModeIndex: 0,
|
||||
// 模式选中滑块
|
||||
modeSliderStyle: {
|
||||
left: 0
|
||||
},
|
||||
// 是否显示密码
|
||||
showPassword: false,
|
||||
// 倒计时提示文字
|
||||
tips: '获取验证码'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentModeIndex(value) {
|
||||
const sliderWidth = uni.upx2px(476 / 2)
|
||||
this.modeSliderStyle.left = `${sliderWidth * value}px`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换模式
|
||||
modeSwitch(index) {
|
||||
this.currentModeIndex = index
|
||||
this.showPassword = false
|
||||
},
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if (this.$refs.code.canGetCode) {
|
||||
this.$t.messageUtils.loading('正在获取验证码')
|
||||
setTimeout(() => {
|
||||
this.$t.messageUtils.closeLoading()
|
||||
this.$t.messageUtils.toast('验证码已经发送')
|
||||
// 通知组件开始计时
|
||||
this.$refs.code.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
|
||||
}
|
||||
},
|
||||
// 获取验证码倒计时被修改
|
||||
codeChange(event) {
|
||||
this.tips = event
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 悬浮 */
|
||||
/* .login-sussuspension{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translate(0 , 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(0rem , 1rem);
|
||||
}
|
||||
} */
|
||||
|
||||
.login {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
|
||||
/* 背景图片 start */
|
||||
&__bg {
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
|
||||
&--top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
|
||||
.bg {
|
||||
width: 750rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
bottom: -10rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
// height: 144px;
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
image {
|
||||
width: 750rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 背景图片 end */
|
||||
|
||||
/* 内容 start */
|
||||
&__wrapper {
|
||||
margin-top: 300rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 切换 start */
|
||||
&__mode {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 476rpx;
|
||||
height: 77rpx;
|
||||
margin-top: 100rpx;
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
||||
border-radius: 39rpx;
|
||||
|
||||
&__item {
|
||||
height: 77rpx;
|
||||
width: 100%;
|
||||
line-height: 77rpx;
|
||||
text-align: center;
|
||||
font-size: 31rpx;
|
||||
color: #080808;
|
||||
letter-spacing: 1em;
|
||||
text-indent: 1em;
|
||||
z-index: 2;
|
||||
transition: all 0.4s;
|
||||
|
||||
&--active {
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
&__slider {
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: calc(476rpx / 2);
|
||||
border-radius: inherit;
|
||||
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
|
||||
z-index: 1;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
}
|
||||
/* 切换 end */
|
||||
|
||||
/* 登录注册信息 start */
|
||||
&__info {
|
||||
margin: 80rpx 30rpx 10rpx 30rpx;
|
||||
padding-bottom: 0;
|
||||
border-radius: 20rpx;
|
||||
|
||||
&__item {
|
||||
|
||||
&__input {
|
||||
margin-top: 59rpx;
|
||||
width: 100%;
|
||||
height: 77rpx;
|
||||
border: 1rpx solid #E6E6E6;
|
||||
border-radius: 39rpx;
|
||||
|
||||
&__left-icon {
|
||||
width: 10%;
|
||||
font-size: 44rpx;
|
||||
margin-left: 20rpx;
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 80%;
|
||||
padding-left: 10rpx;
|
||||
|
||||
&--verify-code {
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 24rpx;
|
||||
// letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
width: 10%;
|
||||
font-size: 44rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
&__right-verify-code {
|
||||
width: 34%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: 75rpx;
|
||||
margin-bottom: 39rpx;
|
||||
width: 100%;
|
||||
height: 77rpx;
|
||||
text-align: center;
|
||||
font-size: 31rpx;
|
||||
font-weight: bold;
|
||||
line-height: 77rpx;
|
||||
letter-spacing: 1em;
|
||||
text-indent: 1em;
|
||||
border-radius: 39rpx;
|
||||
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
|
||||
}
|
||||
|
||||
&__tips {
|
||||
margin: 30rpx 0;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 登录注册信息 end */
|
||||
|
||||
/* 登录方式切换 start */
|
||||
&__way {
|
||||
margin: 0 auto;
|
||||
margin-top: 110rpx;
|
||||
|
||||
&__item {
|
||||
&--icon {
|
||||
width: 85rpx;
|
||||
height: 85rpx;
|
||||
font-size: 80rpx;
|
||||
// border-radius: 100rpx;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
// &::after {
|
||||
// content: " ";
|
||||
// position: absolute;
|
||||
// z-index: -1;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// border-radius: inherit;
|
||||
// opacity: 1;
|
||||
// transform: scale(1, 1);
|
||||
// background-size: 100% 100%;
|
||||
// background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 登录方式切换 end */
|
||||
/* 内容 end */
|
||||
|
||||
}
|
||||
|
||||
/deep/.input-placeholder {
|
||||
font-size: 24rpx;
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
</style>
|
||||
874
templatePage/time/clock/clock.vue
Normal file
874
templatePage/time/clock/clock.vue
Normal file
@@ -0,0 +1,874 @@
|
||||
<template>
|
||||
<view class="template-clock">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<view class="clock">
|
||||
<view class="clock__hand clock__hand--hr"></view>
|
||||
<view class="clock__hand clock__hand--min"></view>
|
||||
<view class="clock__hand clock__hand--sec"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateClock',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-clock{
|
||||
// background: linear-gradient(#e3e4e8, #abafba);
|
||||
}
|
||||
/* 时钟 start*/
|
||||
|
||||
/* * {
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
*/
|
||||
/* :root {
|
||||
--bg: linear-gradient(#e3e4e8, #abafba);
|
||||
|
||||
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
|
||||
} */
|
||||
|
||||
/* body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font: 1em/1.5 sans-serif;
|
||||
height: 100vh;
|
||||
min-height: 480px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
} */
|
||||
|
||||
.clock {
|
||||
margin: 20% auto;
|
||||
box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.1) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.2), 0 1em 1em rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
width: 16em;
|
||||
height: 16em;
|
||||
}
|
||||
.clock, .clock:before, .clock:after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.clock:before, .clock:after, .clock__hand {
|
||||
position: absolute;
|
||||
}
|
||||
.clock:before, .clock:after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.clock:before {
|
||||
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.1);
|
||||
top: 2.5em;
|
||||
left: 2.5em;
|
||||
width: 11em;
|
||||
height: 11em;
|
||||
}
|
||||
.clock:after {
|
||||
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.3) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.3);
|
||||
top: calc(50% - 0.5em);
|
||||
left: calc(50% - 0.5em);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.clock__hand {
|
||||
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
bottom: 50%;
|
||||
transform-origin: 50% 100%;
|
||||
transform: rotate(0) translateY(-1.25em);
|
||||
}
|
||||
.clock__hand--hr {
|
||||
animation: shortHand 86400s linear infinite;
|
||||
background: #255ff4;;
|
||||
border-radius: 0.5em;
|
||||
left: calc(50% - 0.5em);
|
||||
width: 1em;
|
||||
height: 3.2em;
|
||||
}
|
||||
.clock__hand--min {
|
||||
animation: longHand 3600s linear infinite;
|
||||
background: #5583f6;
|
||||
border-radius: 0.4em;
|
||||
left: calc(50% - 0.4em);
|
||||
width: 0.8em;
|
||||
height: 3.6em;
|
||||
}
|
||||
.clock__hand--sec {
|
||||
animation: longHand 60s cubic-bezier(0.8, 0, 0.2, 1) infinite;
|
||||
background: #17181c;
|
||||
border-radius: 0.3em;
|
||||
left: calc(50% - 0.3em);
|
||||
width: 0.6em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
|
||||
.clock {
|
||||
box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.05) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.05), 0 1em 1em rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.clock:before {
|
||||
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.2) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.clock:after {
|
||||
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
/* Animations */
|
||||
@keyframes shortHand {
|
||||
0% {
|
||||
box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(0deg) translateY(-1.25em);
|
||||
}
|
||||
0.83% {
|
||||
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(6deg) translateY(-1.25em);
|
||||
}
|
||||
1.67% {
|
||||
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(12deg) translateY(-1.25em);
|
||||
}
|
||||
2.5% {
|
||||
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(18deg) translateY(-1.25em);
|
||||
}
|
||||
3.33% {
|
||||
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(24deg) translateY(-1.25em);
|
||||
}
|
||||
4.17% {
|
||||
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(30deg) translateY(-1.25em);
|
||||
}
|
||||
5% {
|
||||
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(36deg) translateY(-1.25em);
|
||||
}
|
||||
5.83% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(42deg) translateY(-1.25em);
|
||||
}
|
||||
6.67% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(48deg) translateY(-1.25em);
|
||||
}
|
||||
7.5% {
|
||||
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(54deg) translateY(-1.25em);
|
||||
}
|
||||
8.33% {
|
||||
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(60deg) translateY(-1.25em);
|
||||
}
|
||||
9.17% {
|
||||
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(66deg) translateY(-1.25em);
|
||||
}
|
||||
10% {
|
||||
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(72deg) translateY(-1.25em);
|
||||
}
|
||||
10.83% {
|
||||
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(78deg) translateY(-1.25em);
|
||||
}
|
||||
11.67% {
|
||||
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(84deg) translateY(-1.25em);
|
||||
}
|
||||
12.5% {
|
||||
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(90deg) translateY(-1.25em);
|
||||
}
|
||||
13.33% {
|
||||
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(96deg) translateY(-1.25em);
|
||||
}
|
||||
14.17% {
|
||||
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(102deg) translateY(-1.25em);
|
||||
}
|
||||
15% {
|
||||
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(108deg) translateY(-1.25em);
|
||||
}
|
||||
15.83% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(114deg) translateY(-1.25em);
|
||||
}
|
||||
16.67% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(120deg) translateY(-1.25em);
|
||||
}
|
||||
17.5% {
|
||||
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(126deg) translateY(-1.25em);
|
||||
}
|
||||
18.33% {
|
||||
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(132deg) translateY(-1.25em);
|
||||
}
|
||||
19.17% {
|
||||
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(138deg) translateY(-1.25em);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(144deg) translateY(-1.25em);
|
||||
}
|
||||
20.83% {
|
||||
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(150deg) translateY(-1.25em);
|
||||
}
|
||||
21.67% {
|
||||
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(156deg) translateY(-1.25em);
|
||||
}
|
||||
22.5% {
|
||||
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(162deg) translateY(-1.25em);
|
||||
}
|
||||
23.33% {
|
||||
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(168deg) translateY(-1.25em);
|
||||
}
|
||||
24.17% {
|
||||
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(174deg) translateY(-1.25em);
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(180deg) translateY(-1.25em);
|
||||
}
|
||||
25.83% {
|
||||
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(186deg) translateY(-1.25em);
|
||||
}
|
||||
26.67% {
|
||||
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(192deg) translateY(-1.25em);
|
||||
}
|
||||
27.5% {
|
||||
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(198deg) translateY(-1.25em);
|
||||
}
|
||||
28.33% {
|
||||
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(204deg) translateY(-1.25em);
|
||||
}
|
||||
29.17% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(210deg) translateY(-1.25em);
|
||||
}
|
||||
30% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(216deg) translateY(-1.25em);
|
||||
}
|
||||
30.83% {
|
||||
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(222deg) translateY(-1.25em);
|
||||
}
|
||||
31.67% {
|
||||
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(228deg) translateY(-1.25em);
|
||||
}
|
||||
32.5% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(234deg) translateY(-1.25em);
|
||||
}
|
||||
33.33% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.51em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(240deg) translateY(-1.25em);
|
||||
}
|
||||
34.17% {
|
||||
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(246deg) translateY(-1.25em);
|
||||
}
|
||||
35% {
|
||||
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(252deg) translateY(-1.25em);
|
||||
}
|
||||
35.83% {
|
||||
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(258deg) translateY(-1.25em);
|
||||
}
|
||||
36.67% {
|
||||
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(264deg) translateY(-1.25em);
|
||||
}
|
||||
37.5% {
|
||||
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(270deg) translateY(-1.25em);
|
||||
}
|
||||
38.33% {
|
||||
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(276deg) translateY(-1.25em);
|
||||
}
|
||||
39.17% {
|
||||
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(282deg) translateY(-1.25em);
|
||||
}
|
||||
40% {
|
||||
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(288deg) translateY(-1.25em);
|
||||
}
|
||||
40.83% {
|
||||
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(294deg) translateY(-1.25em);
|
||||
}
|
||||
41.67% {
|
||||
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(300deg) translateY(-1.25em);
|
||||
}
|
||||
42.5% {
|
||||
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(306deg) translateY(-1.25em);
|
||||
}
|
||||
43.33% {
|
||||
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(312deg) translateY(-1.25em);
|
||||
}
|
||||
44.17% {
|
||||
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(318deg) translateY(-1.25em);
|
||||
}
|
||||
45% {
|
||||
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(324deg) translateY(-1.25em);
|
||||
}
|
||||
45.83% {
|
||||
box-shadow: -0.06em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(330deg) translateY(-1.25em);
|
||||
}
|
||||
46.67% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(336deg) translateY(-1.25em);
|
||||
}
|
||||
47.5% {
|
||||
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(342deg) translateY(-1.25em);
|
||||
}
|
||||
48.33% {
|
||||
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(348deg) translateY(-1.25em);
|
||||
}
|
||||
49.17% {
|
||||
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(354deg) translateY(-1.25em);
|
||||
}
|
||||
50% {
|
||||
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(360deg) translateY(-1.25em);
|
||||
}
|
||||
50.83% {
|
||||
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(366deg) translateY(-1.25em);
|
||||
}
|
||||
51.67% {
|
||||
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(372deg) translateY(-1.25em);
|
||||
}
|
||||
52.5% {
|
||||
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(378deg) translateY(-1.25em);
|
||||
}
|
||||
53.33% {
|
||||
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(384deg) translateY(-1.25em);
|
||||
}
|
||||
54.17% {
|
||||
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(390deg) translateY(-1.25em);
|
||||
}
|
||||
55% {
|
||||
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(396deg) translateY(-1.25em);
|
||||
}
|
||||
55.83% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(402deg) translateY(-1.25em);
|
||||
}
|
||||
56.67% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(408deg) translateY(-1.25em);
|
||||
}
|
||||
57.5% {
|
||||
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(414deg) translateY(-1.25em);
|
||||
}
|
||||
58.33% {
|
||||
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(420deg) translateY(-1.25em);
|
||||
}
|
||||
59.17% {
|
||||
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(426deg) translateY(-1.25em);
|
||||
}
|
||||
60% {
|
||||
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(432deg) translateY(-1.25em);
|
||||
}
|
||||
60.83% {
|
||||
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(438deg) translateY(-1.25em);
|
||||
}
|
||||
61.67% {
|
||||
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(444deg) translateY(-1.25em);
|
||||
}
|
||||
62.5% {
|
||||
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(450deg) translateY(-1.25em);
|
||||
}
|
||||
63.33% {
|
||||
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(456deg) translateY(-1.25em);
|
||||
}
|
||||
64.17% {
|
||||
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(462deg) translateY(-1.25em);
|
||||
}
|
||||
65% {
|
||||
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(468deg) translateY(-1.25em);
|
||||
}
|
||||
65.83% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(474deg) translateY(-1.25em);
|
||||
}
|
||||
66.67% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(480deg) translateY(-1.25em);
|
||||
}
|
||||
67.5% {
|
||||
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(486deg) translateY(-1.25em);
|
||||
}
|
||||
68.33% {
|
||||
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(492deg) translateY(-1.25em);
|
||||
}
|
||||
69.17% {
|
||||
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(498deg) translateY(-1.25em);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(504deg) translateY(-1.25em);
|
||||
}
|
||||
70.83% {
|
||||
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(510deg) translateY(-1.25em);
|
||||
}
|
||||
71.67% {
|
||||
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(516deg) translateY(-1.25em);
|
||||
}
|
||||
72.5% {
|
||||
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(522deg) translateY(-1.25em);
|
||||
}
|
||||
73.33% {
|
||||
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(528deg) translateY(-1.25em);
|
||||
}
|
||||
74.17% {
|
||||
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(534deg) translateY(-1.25em);
|
||||
}
|
||||
75% {
|
||||
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(540deg) translateY(-1.25em);
|
||||
}
|
||||
75.83% {
|
||||
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(546deg) translateY(-1.25em);
|
||||
}
|
||||
76.67% {
|
||||
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(552deg) translateY(-1.25em);
|
||||
}
|
||||
77.5% {
|
||||
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(558deg) translateY(-1.25em);
|
||||
}
|
||||
78.33% {
|
||||
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(564deg) translateY(-1.25em);
|
||||
}
|
||||
79.17% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(570deg) translateY(-1.25em);
|
||||
}
|
||||
80% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(576deg) translateY(-1.25em);
|
||||
}
|
||||
80.83% {
|
||||
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(582deg) translateY(-1.25em);
|
||||
}
|
||||
81.67% {
|
||||
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(588deg) translateY(-1.25em);
|
||||
}
|
||||
82.5% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(594deg) translateY(-1.25em);
|
||||
}
|
||||
83.33% {
|
||||
box-shadow: -0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(600deg) translateY(-1.25em);
|
||||
}
|
||||
84.17% {
|
||||
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(606deg) translateY(-1.25em);
|
||||
}
|
||||
85% {
|
||||
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(612deg) translateY(-1.25em);
|
||||
}
|
||||
85.83% {
|
||||
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(618deg) translateY(-1.25em);
|
||||
}
|
||||
86.67% {
|
||||
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(624deg) translateY(-1.25em);
|
||||
}
|
||||
87.5% {
|
||||
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(630deg) translateY(-1.25em);
|
||||
}
|
||||
88.33% {
|
||||
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(636deg) translateY(-1.25em);
|
||||
}
|
||||
89.17% {
|
||||
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(642deg) translateY(-1.25em);
|
||||
}
|
||||
90% {
|
||||
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(648deg) translateY(-1.25em);
|
||||
}
|
||||
90.83% {
|
||||
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(654deg) translateY(-1.25em);
|
||||
}
|
||||
91.67% {
|
||||
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(660deg) translateY(-1.25em);
|
||||
}
|
||||
92.5% {
|
||||
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(666deg) translateY(-1.25em);
|
||||
}
|
||||
93.33% {
|
||||
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(672deg) translateY(-1.25em);
|
||||
}
|
||||
94.17% {
|
||||
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(678deg) translateY(-1.25em);
|
||||
}
|
||||
95% {
|
||||
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(684deg) translateY(-1.25em);
|
||||
}
|
||||
95.83% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(690deg) translateY(-1.25em);
|
||||
}
|
||||
96.67% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(696deg) translateY(-1.25em);
|
||||
}
|
||||
97.5% {
|
||||
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(702deg) translateY(-1.25em);
|
||||
}
|
||||
98.33% {
|
||||
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(708deg) translateY(-1.25em);
|
||||
}
|
||||
99.17% {
|
||||
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(714deg) translateY(-1.25em);
|
||||
}
|
||||
100% {
|
||||
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(720deg) translateY(-1.25em);
|
||||
}
|
||||
}
|
||||
@keyframes longHand {
|
||||
0% {
|
||||
box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(0deg) translateY(-1.25em);
|
||||
}
|
||||
1.67% {
|
||||
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(6deg) translateY(-1.25em);
|
||||
}
|
||||
3.33% {
|
||||
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(12deg) translateY(-1.25em);
|
||||
}
|
||||
5% {
|
||||
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(18deg) translateY(-1.25em);
|
||||
}
|
||||
6.67% {
|
||||
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(24deg) translateY(-1.25em);
|
||||
}
|
||||
8.33% {
|
||||
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(30deg) translateY(-1.25em);
|
||||
}
|
||||
10% {
|
||||
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(36deg) translateY(-1.25em);
|
||||
}
|
||||
11.67% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(42deg) translateY(-1.25em);
|
||||
}
|
||||
13.33% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(48deg) translateY(-1.25em);
|
||||
}
|
||||
15% {
|
||||
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(54deg) translateY(-1.25em);
|
||||
}
|
||||
16.67% {
|
||||
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(60deg) translateY(-1.25em);
|
||||
}
|
||||
18.33% {
|
||||
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(66deg) translateY(-1.25em);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(72deg) translateY(-1.25em);
|
||||
}
|
||||
21.67% {
|
||||
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(78deg) translateY(-1.25em);
|
||||
}
|
||||
23.33% {
|
||||
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(84deg) translateY(-1.25em);
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(90deg) translateY(-1.25em);
|
||||
}
|
||||
26.67% {
|
||||
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(96deg) translateY(-1.25em);
|
||||
}
|
||||
28.33% {
|
||||
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(102deg) translateY(-1.25em);
|
||||
}
|
||||
30% {
|
||||
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(108deg) translateY(-1.25em);
|
||||
}
|
||||
31.67% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(114deg) translateY(-1.25em);
|
||||
}
|
||||
33.33% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(120deg) translateY(-1.25em);
|
||||
}
|
||||
35% {
|
||||
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(126deg) translateY(-1.25em);
|
||||
}
|
||||
36.67% {
|
||||
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(132deg) translateY(-1.25em);
|
||||
}
|
||||
38.33% {
|
||||
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(138deg) translateY(-1.25em);
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(144deg) translateY(-1.25em);
|
||||
}
|
||||
41.67% {
|
||||
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(150deg) translateY(-1.25em);
|
||||
}
|
||||
43.33% {
|
||||
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(156deg) translateY(-1.25em);
|
||||
}
|
||||
45% {
|
||||
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(162deg) translateY(-1.25em);
|
||||
}
|
||||
46.67% {
|
||||
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(168deg) translateY(-1.25em);
|
||||
}
|
||||
48.33% {
|
||||
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(174deg) translateY(-1.25em);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(180deg) translateY(-1.25em);
|
||||
}
|
||||
51.67% {
|
||||
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(186deg) translateY(-1.25em);
|
||||
}
|
||||
53.33% {
|
||||
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(192deg) translateY(-1.25em);
|
||||
}
|
||||
55% {
|
||||
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(198deg) translateY(-1.25em);
|
||||
}
|
||||
56.67% {
|
||||
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(204deg) translateY(-1.25em);
|
||||
}
|
||||
58.33% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(210deg) translateY(-1.25em);
|
||||
}
|
||||
60% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(216deg) translateY(-1.25em);
|
||||
}
|
||||
61.67% {
|
||||
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(222deg) translateY(-1.25em);
|
||||
}
|
||||
63.33% {
|
||||
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(228deg) translateY(-1.25em);
|
||||
}
|
||||
65% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(234deg) translateY(-1.25em);
|
||||
}
|
||||
66.67% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.51em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(240deg) translateY(-1.25em);
|
||||
}
|
||||
68.33% {
|
||||
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(246deg) translateY(-1.25em);
|
||||
}
|
||||
70% {
|
||||
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(252deg) translateY(-1.25em);
|
||||
}
|
||||
71.67% {
|
||||
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(258deg) translateY(-1.25em);
|
||||
}
|
||||
73.33% {
|
||||
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(264deg) translateY(-1.25em);
|
||||
}
|
||||
75% {
|
||||
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(270deg) translateY(-1.25em);
|
||||
}
|
||||
76.67% {
|
||||
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(276deg) translateY(-1.25em);
|
||||
}
|
||||
78.33% {
|
||||
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(282deg) translateY(-1.25em);
|
||||
}
|
||||
80% {
|
||||
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(288deg) translateY(-1.25em);
|
||||
}
|
||||
81.67% {
|
||||
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(294deg) translateY(-1.25em);
|
||||
}
|
||||
83.33% {
|
||||
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(300deg) translateY(-1.25em);
|
||||
}
|
||||
85% {
|
||||
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(306deg) translateY(-1.25em);
|
||||
}
|
||||
86.67% {
|
||||
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(312deg) translateY(-1.25em);
|
||||
}
|
||||
88.33% {
|
||||
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(318deg) translateY(-1.25em);
|
||||
}
|
||||
90% {
|
||||
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(324deg) translateY(-1.25em);
|
||||
}
|
||||
91.67% {
|
||||
box-shadow: -0.06em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(330deg) translateY(-1.25em);
|
||||
}
|
||||
93.33% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(336deg) translateY(-1.25em);
|
||||
}
|
||||
95% {
|
||||
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(342deg) translateY(-1.25em);
|
||||
}
|
||||
96.67% {
|
||||
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(348deg) translateY(-1.25em);
|
||||
}
|
||||
98.33% {
|
||||
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(354deg) translateY(-1.25em);
|
||||
}
|
||||
100% {
|
||||
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(360deg) translateY(-1.25em);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user