molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-03-12 18:44:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新图标库

Browse Source 
修复已知bug
This commit is contained in:
jaylen
2022-06-06 13:10:28 +08:00
parent 81579ccee5
commit 1e087b5ac3
226 changed files with 51832 additions and 46044 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
templatePage/animate/bubble/bubble.vue Normal file
View File

@@ -0,0 +1,226 @@
<template>
<view class="template-bubble">
<!-- 顶部自定义导航 -->
<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>
<canvas canvas-id="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"></canvas>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateBubble',
mixins: [template_page_mixin],
data(){
return {
windowHeight: 0,
windowWidth: 0,
actionTimer: null,
animationTimer: null,
queue: {},
ctx: null
}
},
onLoad() {
this.getSystemInfo()
},
onReady() {
this.$nextTick(() => {
this.queue = {}
this.ctx = uni.createCanvasContext("bubble", this)
setTimeout(() => {
this.actionTimer = setInterval(() => {
this.generateBubble()
}, 500)
}, 1000)
})
},
onUnload() {
this.clearActionTimer()
this.clearAnimationTimer()
},
methods: {
// 获取系统信息
getSystemInfo() {
const systemInfo = uni.getSystemInfoSync()
if (!systemInfo) {
setTimeout(() => {
this.getSystemInfo()
}, 50)
return
}
this.windowHeight = systemInfo.safeArea.height
this.windowWidth = systemInfo.safeArea.width
},
// 生成泡泡
generateBubble() {
const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$t.number.randomInt(1, 33) + ".png"
uni.getImageInfo({
src: image,
success: (res) => {
if (res.errMsg === 'getImageInfo:ok') {
const anmationData = {
id: new Date().getTime(),
timer: 0,
opacity: 0,
pathData: this.generatePathData(),
image: res.path,
factor: {
speed: 0.0006, // 运动速度，值越小越慢
t: 0.1 // 贝塞尔函数系数，当为0，就是从无到有，这时候屏幕高度也要调一下
}
}
if (Object.keys(this.queue).length > 0) {
this.queue[anmationData.id] = anmationData
} else {
this.queue[anmationData.id] = anmationData
this.bubbleAnimate()
}
}
}
})
},
/* 动画相关 */
// 生成运动的路径数据
generatePathData() {
let width = this.windowWidth,
height = this.windowHeight;
const p0 = {
x: 0.72 * width,
y: height
}
const p1 = {
x: this.$t.number.random(0.22 * width, 0.33 * width),
y: this.$t.number.random(0.5 * height, 0.75 * height)
}
const p2 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0.25 * height, 0.5 * height)
}
const p3 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0, 0.125 * height)
}
return [p0, p1, p2, p3]
},
// 更新运动的路径
updatePath(data, factor) {
const p0 = data[0]
const p1 = data[1]
const p2 = data[2]
const p3 = data[3]
const t = factor.t
/*计算多项式系数 （下同）*/
const cx1 = 3 * (p1.x - p0.x)
const bx1 = 3 * (p2.x - p1.x) - cx1
const ax1 = p3.x - p0.x - cx1 - bx1
const cy1 = 3 * (p1.y - p0.y)
const by1 = 3 * (p2.y - p1.y) - cy1
const ay1 = p3.y - p0.y - cy1 - by1
const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x
const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y
// console.log(p0.y, p1.y, p2.y, p3.y, y);
return {
x,
y
}
},
// 执行泡泡动画
bubbleAnimate() {
let width = this.windowWidth,
height = this.windowHeight;
Object.keys(this.queue).forEach(key => {
const anmationData = this.queue[+key];
const {
x,
y
} = this.updatePath(
anmationData.pathData,
anmationData.factor
)
const speed = anmationData.factor.speed
anmationData.factor.t += speed
var curWidth = 30
curWidth = (height - y) / 1.5
curWidth = Math.min(30, curWidth)
var curAlpha = anmationData.opacity
curAlpha = y / (0.3 * height) //消失的高度适当调一下
curAlpha = Math.min(1, curAlpha)
this.ctx.globalAlpha = curAlpha
this.ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth)
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(x - curWidth / 2, y, 50, 50)
if (anmationData.factor.t > 1) {
delete this.queue[anmationData.id]
}
if (y > height) {
delete this.queue[anmationData.id]
}
})
this.ctx.draw()
if (Object.keys(this.queue).length > 0) {
this.animationTimer = setTimeout(() => {
this.bubbleAnimate()
}, 5)
} else {
this.clearAnimationTimer()()
this.ctx.draw() // 清空画面
}
},
// 清除定时器
clearActionTimer() {
if (this.actionTimer) {
clearInterval(this.actionTimer)
}
},
clearAnimationTimer() {
if (this.animationTimer) {
clearTimeout(this.animationTimer)
}
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-bubble {
position: relative;
background: linear-gradient(-120deg, #9A5CE5, #01BEFF, #00F5D4, #43e97b);
width: 100vw;
height: 100vh;
.bubble {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1024;
pointer-events: none;
}
}
</style>

294
templatePage/animate/hollow/hollow.vue
View File

@@ -1,147 +1,147 @@
<template>
<view class="template-hollow">
<!-- 顶部自定义导航 -->
<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="" :style="{paddingTop: vuex_custom_bar_height + 'px;margin-top:250rpx'}">
<view class="tn-flex tn-flex-row-between tn-margin-xl">
<view class="justify-content-item" style="margin-top: 50rpx;">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">Jaylen</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">浅浅遇</view>
</view>
</view>
<view class="justify-content-item">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">可我会像</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">北北同学</view>
</view>
</view>
<view class="justify-content-item" style="margin-top: 50rpx;">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">福哥</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/content_1.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">锋哥</view>
</view>
</view>
</view>
</view>
<view class="bottom-backgroup">
<image src='https://tnuiimage.tnkjapp.com/animate/hollow.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<view class="hollow">
<view class="tn-text-xxl">
<text class="">Hi，图鸟的小伙伴</text>
</view>
<view class="tn-text-xl tn-padding-top">
技术的友情，有你真好
</view>
<view class="tn-text-xl tn-padding-top">
TnUI，感谢一路陪伴与支持
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateHollow',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 背景图 start */
.bottom-backgroup {
height: 700rpx;
z-index: -1;
.backgroud-image {
border-radius: 60rpx 60rpx 0 0;
width: 100%;
height: 3373rpx;
// z-index: -1;
}
}
/* 背景图 end */
/* 镂空 start*/
.hollow {
position: fixed;
text-align: center;
width: 87%;
padding: 30rpx;
margin: 0 6.5%;
top: 180rpx;
font-weight: bold;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
color: #000;
border-radius: 20rpx;
/* overlay; difference;lighten;hue;这些都是参数值，但东东觉得lighten好看点*/
mix-blend-mode: lighten;
}
/* 效果布局 start*/
.image-hollow{
width: 200rpx;
height: 400rpx;
font-size: 40rpx;
font-weight: 300;
position: relative;
}
.image-pic{
height: 100%;
background-size: cover;
background-repeat:no-repeat;
// background-attachment:fixed;
background-position:top;
border-radius: 10rpx;
}
</style>
<template>
<view class="template-hollow">
<!-- 顶部自定义导航 -->
<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="" :style="{paddingTop: vuex_custom_bar_height + 'px;margin-top:250rpx'}">
<view class="tn-flex tn-flex-row-between tn-margin-xl">
<view class="justify-content-item" style="margin-top: 50rpx;">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">Jaylen</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">浅浅遇</view>
</view>
</view>
<view class="justify-content-item">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">可我会像</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">北北同学</view>
</view>
</view>
<view class="justify-content-item" style="margin-top: 50rpx;">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">福哥</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/content_1.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">锋哥</view>
</view>
</view>
</view>
</view>
<view class="bottom-backgroup">
<image src='https://tnuiimage.tnkjapp.com/animate/hollow.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<view class="hollow">
<view class="tn-text-xxl">
<text class="">Hi，图鸟的小伙伴</text>
</view>
<view class="tn-text-xl tn-padding-top">
技术的友情，有你真好
</view>
<view class="tn-text-xl tn-padding-top">
TnUI，感谢一路陪伴与支持
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateHollow',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 背景图 start */
.bottom-backgroup {
height: 700rpx;
z-index: -1;
.backgroud-image {
border-radius: 60rpx 60rpx 0 0;
width: 100%;
height: 3373rpx;
// z-index: -1;
}
}
/* 背景图 end */
/* 镂空 start*/
.hollow {
position: fixed;
text-align: center;
width: 87%;
padding: 30rpx;
margin: 0 6.5%;
top: 180rpx;
font-weight: bold;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
color: #000;
border-radius: 20rpx;
/* overlay; difference;lighten;hue;这些都是参数值，但东东觉得lighten好看点*/
mix-blend-mode: lighten;
}
/* 效果布局 start*/
.image-hollow{
width: 200rpx;
height: 400rpx;
font-size: 40rpx;
font-weight: 300;
position: relative;
}
.image-pic{
height: 100%;
background-size: cover;
background-repeat:no-repeat;
// background-attachment:fixed;
background-position:top;
border-radius: 10rpx;
}
</style>

530
templatePage/animate/loading/loading.vue
View File

@@ -1,265 +1,265 @@
<template>
<view class="template-loading">
<!-- 顶部自定义导航 -->
<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="bg-contaniner">
</view>
<view class="container-content hex-border">
<view class="hexagons">
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateLoading',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 移动背景部分 */
.bg-contaniner {
position: fixed;
top: -0rpx;
left: -300rpx;
--text-color: hsl(0 95% 60%);
--bg-color: hsl(0 0% 100%);
--bg-size: 200px;
height: 100%;
display: grid;
place-items: center;
place-content: center;
/* grid-template-areas: "body"; */
overflow: hidden;
font-family: "Dela Gothic One", sans-serif;
background-color: var(--bg-color);
z-index: -1;
}
.bg-contaniner::before {
--size: 150vmax;
grid-area: body;
content: "";
inline-size: var(--size);
block-size: var(--size);
background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg");
background-size: var(--bg-size);
background-repeat: repeat;
transform: rotate(45deg);
opacity: 0.25;
animation: bg 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.bg-contaniner::before {
animation-duration: 0s;
}
}
@keyframes bg {
to {
background-position: 0 calc(var(--bg-size) * -1);
}
}
/* 加载部分 */
.components-anloading {
margin: 0;
width: 100%;
height: 100vh;
color: #fff;
/* background: linear-gradient(45deg, #0fd850, #f9f047); */
}
.hex-border {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 170px;
height: 170px;
border: 2px solid rgba(235, 237, 241, 0.8);
border-radius: 100%;
}
.hex-border::before {
content: "";
position: absolute;
width: 174px;
height: 174px;
border: 2px solid #F4B4C4;
border-radius: 100%;
box-sizing: border-box;
clip-path: inset(0px 135px 135px 0px);
-webkit-clip-path: inset(0px 135px 135px 0px);
top: -4px;
left: -4px;
animation: rotateSmall 2s linear infinite;
z-index: 2;
}
.hex-border::after {
content: "";
position: absolute;
width: 174px;
height: 174px;
border: 2px solid #F4B4C4;
border-radius: 100%;
box-sizing: border-box;
top: -4px;
left: -4px;
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
animation: rotateLarge 1.6s linear infinite;
}
.hexagons {
position: relative;
border-radius: 100%;
padding: 5%;
top: 30px;
left: 35px;
}
.hexagon {
position: absolute;
width: 40px;
height: 23px;
background-color: #F4B4C4;
transform: scale(1.02);
transform-origin: center;
}
.hexagon::before {
content: "";
position: absolute;
top: -11.5px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 11.5px solid #F4B4C4;
}
.hexagon::after {
content: "";
position: absolute;
top: 23px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 11.5px solid #F4B4C4;
}
.hexagon:nth-child(1) {
animation: animateHex 3s infinite;
}
.hexagon:nth-child(2) {
left: 53px;
animation: animateHex 3s 0.2s infinite;
}
.hexagon:nth-child(3) {
left: -13px;
top: 46px;
animation: animateHex 3s 1s infinite;
}
.hexagon:nth-child(4) {
left: 31px;
top: 46px;
animation: animateHex 3s 1.2s infinite;
}
.hexagon:nth-child(5) {
left: 75px;
top: 46px;
animation: animateHex 3s 0.4s infinite;
}
.hexagon:nth-child(6) {
top: 84px;
animation: animateHex 3s 0.8s infinite;
}
.hexagon:nth-child(7) {
left: 53px;
top: 84px;
animation: animateHex 3s 0.6s infinite;
}
@keyframes rotateSmall {
100% {
transform: rotate(1turn);
}
}
@keyframes rotateLarge {
0% {
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
}
50% {
clip-path: inset(0px 150px 150px 0px);
-webkit-clip-path: inset(0px 150px 150px 0px);
}
100% {
transform: rotate(1turn);
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
}
}
@keyframes animateHex {
0% {
transform: scale(1.02);
}
20%,
50% {
transform: scale(0.6);
opacity: 0;
}
65% {
transform: scale(1.02);
opacity: 1;
}
}
</style>
<template>
<view class="template-loading">
<!-- 顶部自定义导航 -->
<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="bg-contaniner">
</view>
<view class="container-content hex-border">
<view class="hexagons">
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateLoading',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 移动背景部分 */
.bg-contaniner {
position: fixed;
top: -0rpx;
left: -300rpx;
--text-color: hsl(0 95% 60%);
--bg-color: hsl(0 0% 100%);
--bg-size: 200px;
height: 100%;
display: grid;
place-items: center;
place-content: center;
/* grid-template-areas: "body"; */
overflow: hidden;
font-family: "Dela Gothic One", sans-serif;
background-color: var(--bg-color);
z-index: -1;
}
.bg-contaniner::before {
--size: 150vmax;
grid-area: body;
content: "";
inline-size: var(--size);
block-size: var(--size);
background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg");
background-size: var(--bg-size);
background-repeat: repeat;
transform: rotate(45deg);
opacity: 0.25;
animation: bg 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.bg-contaniner::before {
animation-duration: 0s;
}
}
@keyframes bg {
to {
background-position: 0 calc(var(--bg-size) * -1);
}
}
/* 加载部分 */
.components-anloading {
margin: 0;
width: 100%;
height: 100vh;
color: #fff;
/* background: linear-gradient(45deg, #0fd850, #f9f047); */
}
.hex-border {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 170px;
height: 170px;
border: 2px solid rgba(235, 237, 241, 0.8);
border-radius: 100%;
}
.hex-border::before {
content: "";
position: absolute;
width: 174px;
height: 174px;
border: 2px solid #F4B4C4;
border-radius: 100%;
box-sizing: border-box;
clip-path: inset(0px 135px 135px 0px);
-webkit-clip-path: inset(0px 135px 135px 0px);
top: -4px;
left: -4px;
animation: rotateSmall 2s linear infinite;
z-index: 2;
}
.hex-border::after {
content: "";
position: absolute;
width: 174px;
height: 174px;
border: 2px solid #F4B4C4;
border-radius: 100%;
box-sizing: border-box;
top: -4px;
left: -4px;
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
animation: rotateLarge 1.6s linear infinite;
}
.hexagons {
position: relative;
border-radius: 100%;
padding: 5%;
top: 30px;
left: 35px;
}
.hexagon {
position: absolute;
width: 40px;
height: 23px;
background-color: #F4B4C4;
transform: scale(1.02);
transform-origin: center;
}
.hexagon::before {
content: "";
position: absolute;
top: -11.5px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 11.5px solid #F4B4C4;
}
.hexagon::after {
content: "";
position: absolute;
top: 23px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 11.5px solid #F4B4C4;
}
.hexagon:nth-child(1) {
animation: animateHex 3s infinite;
}
.hexagon:nth-child(2) {
left: 53px;
animation: animateHex 3s 0.2s infinite;
}
.hexagon:nth-child(3) {
left: -13px;
top: 46px;
animation: animateHex 3s 1s infinite;
}
.hexagon:nth-child(4) {
left: 31px;
top: 46px;
animation: animateHex 3s 1.2s infinite;
}
.hexagon:nth-child(5) {
left: 75px;
top: 46px;
animation: animateHex 3s 0.4s infinite;
}
.hexagon:nth-child(6) {
top: 84px;
animation: animateHex 3s 0.8s infinite;
}
.hexagon:nth-child(7) {
left: 53px;
top: 84px;
animation: animateHex 3s 0.6s infinite;
}
@keyframes rotateSmall {
100% {
transform: rotate(1turn);
}
}
@keyframes rotateLarge {
0% {
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
}
50% {
clip-path: inset(0px 150px 150px 0px);
-webkit-clip-path: inset(0px 150px 150px 0px);
}
100% {
transform: rotate(1turn);
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
}
}
@keyframes animateHex {
0% {
transform: scale(1.02);
}
20%,
50% {
transform: scale(0.6);
opacity: 0;
}
65% {
transform: scale(1.02);
opacity: 1;
}
}
</style>

298
templatePage/animate/particle/particle.vue
View File

@@ -1,149 +1,149 @@
<template>
<view class="template-particle">
<!-- 顶部自定义导航 -->
<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>
<canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
const Point = class {
constructor(x, y) {
this.x = x
this.y = y
this.r = 1 + Math.random() * 2
this.sx = Math.random() * 2 - 1
this.sy = Math.random() * 2 - 1
}
draw(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = '#fff'
ctx.fill()
}
move(w, h) {
this.x += this.sx
this.y += this.sy
if (this.x > w || this.x < 0) this.sx = -this.sx
if (this.y > h || this.y < 0) this.sy = -this.sy
}
drawLine(ctx, p) {
const dx = this.x - p.x
const dy = this.y - p.y
const d = Math.sqrt(dx * dx + dy * dy)
if (d < 100) {
var alpha = (100 - d) / 300 * 1
ctx.beginPath()
ctx.moveTo(this.x, this.y)
ctx.lineTo(p.x, p.y)
ctx.closePath()
ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
ctx.strokeWidth = 1
ctx.stroke()
}
}
}
const sysinfo = uni.getSystemInfoSync()
const w = 400
const h = 1000
export default {
name: 'TemplateParticle',
mixins: [template_page_mixin],
data(){
return {
ctx: null,
screenWidth: sysinfo.screenWidth,
screenHeight: sysinfo.screenHeight,
timer: null,
points: []
}
},
onLoad(options) {
this.from = options.from || ''
for (let i = 0; i < 80; i++) {
this.points.push(new Point(Math.random() * w, Math.random() * h))
}
this.ctx = uni.createCanvasContext('star_canvas')
// console.log(points)
this.gameloop() //进行
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(200, 300, 50, 50)
// this.ctx.draw()
},
onUnload() {
clearTimeout(this.timer)
},
methods: {
/**粒子进行*/
gameloop() {
this.timer = setTimeout(this.gameloop, 100);
// console.log('gameloop')
this.paint();
},
/**清空画布*/
paint() {
this.ctx.clearRect(0, 0, w, h)
for (var i = 0; i < this.points.length; i++) {
this.points[i].move(w, h)
this.points[i].draw(this.ctx)
for (var j = i + 1; j < this.points.length; j++) {
this.points[i].drawLine(this.ctx, this.points[j])
}
}
this.ctx.draw();
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-particle {
background: -webkit-gradient(linear, left top, right top, from(#892FE8), to(#3D7EFF));
background: linear-gradient(90deg, #892FE8, #3D7EFF);
min-height: 100vh
}
.template-particle:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
-webkit-mask-image: linear-gradient(to bottom, transparent, black);
mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
mask-image: linear-gradient(to bottom, transparent, black);
background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
background: linear-gradient(90deg, #E72F8C, #892FE8);
}
.mycanvas {
background-size: cover;
width: 100vw;
height: 100vh;
justify-content: center;
flex-direction: column;
color: #fff;
}
</style>
<template>
<view class="template-particle">
<!-- 顶部自定义导航 -->
<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>
<canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
const Point = class {
constructor(x, y) {
this.x = x
this.y = y
this.r = 1 + Math.random() * 2
this.sx = Math.random() * 2 - 1
this.sy = Math.random() * 2 - 1
}
draw(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = '#fff'
ctx.fill()
}
move(w, h) {
this.x += this.sx
this.y += this.sy
if (this.x > w || this.x < 0) this.sx = -this.sx
if (this.y > h || this.y < 0) this.sy = -this.sy
}
drawLine(ctx, p) {
const dx = this.x - p.x
const dy = this.y - p.y
const d = Math.sqrt(dx * dx + dy * dy)
if (d < 100) {
var alpha = (100 - d) / 300 * 1
ctx.beginPath()
ctx.moveTo(this.x, this.y)
ctx.lineTo(p.x, p.y)
ctx.closePath()
ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
ctx.strokeWidth = 1
ctx.stroke()
}
}
}
const sysinfo = uni.getSystemInfoSync()
const w = 400
const h = 1000
export default {
name: 'TemplateParticle',
mixins: [template_page_mixin],
data(){
return {
ctx: null,
screenWidth: sysinfo.screenWidth,
screenHeight: sysinfo.screenHeight,
timer: null,
points: []
}
},
onLoad(options) {
this.from = options.from || ''
for (let i = 0; i < 80; i++) {
this.points.push(new Point(Math.random() * w, Math.random() * h))
}
this.ctx = uni.createCanvasContext('star_canvas')
// console.log(points)
this.gameloop() //进行
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(200, 300, 50, 50)
// this.ctx.draw()
},
onUnload() {
clearTimeout(this.timer)
},
methods: {
/**粒子进行*/
gameloop() {
this.timer = setTimeout(this.gameloop, 100);
// console.log('gameloop')
this.paint();
},
/**清空画布*/
paint() {
this.ctx.clearRect(0, 0, w, h)
for (var i = 0; i < this.points.length; i++) {
this.points[i].move(w, h)
this.points[i].draw(this.ctx)
for (var j = i + 1; j < this.points.length; j++) {
this.points[i].drawLine(this.ctx, this.points[j])
}
}
this.ctx.draw();
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-particle {
background: -webkit-gradient(linear, left top, right top, from(#892FE8), to(#3D7EFF));
background: linear-gradient(90deg, #892FE8, #3D7EFF);
min-height: 100vh
}
.template-particle:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
-webkit-mask-image: linear-gradient(to bottom, transparent, black);
mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
mask-image: linear-gradient(to bottom, transparent, black);
background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
background: linear-gradient(90deg, #E72F8C, #892FE8);
}
.mycanvas {
background-size: cover;
width: 100vw;
height: 100vh;
justify-content: center;
flex-direction: column;
color: #fff;
}
</style>

528
templatePage/animate/photo/photo.vue
View File

@@ -1,264 +1,264 @@
<template>
<view class="template-photo">
<!-- 顶部自定义导航 -->
<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="slideshow">
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/cup1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/card.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/watch1.jpg')"></view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePhoto',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-photo {
margin: 0;
width: 100%;
height: 100vh;
color: #fff;
overflow: hidden;
}
/* 相册 start*/
.slideshow {
top: 0;
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slideshow-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 16s;
animation-duration: 16s;
opacity: 1;
transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
-webkit-animation-name: kenburns-1;
animation-name: kenburns-1;
z-index: 3;
}
.slideshow-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.slideshow-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.slideshow-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
}
@-webkit-keyframes kenburns-1 {
0% {
opacity: 1;
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
98.4375% {
opacity: 0;
transform: scale(1.2117647059);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-1 {
0% {
opacity: 1;
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
98.4375% {
opacity: 0;
transform: scale(1.2117647059);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes kenburns-2 {
23.4375% {
opacity: 1;
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@keyframes kenburns-2 {
23.4375% {
opacity: 1;
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-3 {
48.4375% {
opacity: 1;
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@keyframes kenburns-3 {
48.4375% {
opacity: 1;
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-4 {
73.4375% {
opacity: 1;
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
@keyframes kenburns-4 {
73.4375% {
opacity: 1;
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
/* 相册 end*/
</style>
<template>
<view class="template-photo">
<!-- 顶部自定义导航 -->
<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="slideshow">
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/cup1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/card.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/watch1.jpg')"></view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePhoto',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-photo {
margin: 0;
width: 100%;
height: 100vh;
color: #fff;
overflow: hidden;
}
/* 相册 start*/
.slideshow {
top: 0;
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slideshow-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 16s;
animation-duration: 16s;
opacity: 1;
transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
-webkit-animation-name: kenburns-1;
animation-name: kenburns-1;
z-index: 3;
}
.slideshow-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.slideshow-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.slideshow-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
}
@-webkit-keyframes kenburns-1 {
0% {
opacity: 1;
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
98.4375% {
opacity: 0;
transform: scale(1.2117647059);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-1 {
0% {
opacity: 1;
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
98.4375% {
opacity: 0;
transform: scale(1.2117647059);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes kenburns-2 {
23.4375% {
opacity: 1;
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@keyframes kenburns-2 {
23.4375% {
opacity: 1;
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-3 {
48.4375% {
opacity: 1;
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@keyframes kenburns-3 {
48.4375% {
opacity: 1;
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-4 {
73.4375% {
opacity: 1;
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
@keyframes kenburns-4 {
73.4375% {
opacity: 1;
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
/* 相册 end*/
</style>

214
templatePage/animate/suspended/suspended.vue Normal file
View File

@@ -0,0 +1,214 @@
<template>
<view class="template-suspended">
<!-- 顶部自定义导航 -->
<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="wechat tnxuanfu" @click="navTuniaoUI">
<view class="bg0 pa">
<view class="bg1">
<image src="https://tnuiimage.tnkjapp.com/my/my7.png" class="button-shop shadow"></image>
</view>
</view>
<view class="hx-box pa">
<view class="pr">
<view class="hx-k1 pa0">
<view class="span"></view>
</view>
<view class="hx-k2 pa0">
<view class="span"></view>
</view>
<view class="hx-k3 pa0">
<view class="span"></view>
</view>
<view class="hx-k4 pa0">
<view class="span"></view>
</view>
<view class="hx-k5 pa0">
<view class="span"></view>
</view>
<view class="hx-k6 pa0">
<view class="span"></view>
</view>
</view>
</view>
</view>
</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: 'TemplateSuspended',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
// 跳转到
navTuniaoUI(e) {
wx.vibrateShort();
uni.navigateTo({
url: '/pages/index/index'
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-suspended{
background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
width: 100vw;
height: 100vh;
}
/* 悬浮 */
.tnxuanfu{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.8rem);
}
}
/* 悬浮按钮 */
.button-shop {
width: 90rpx;
height: 90rpx;
display: flex;
flex-direction: row;
position: fixed;
/* bottom:200rpx;
right: 20rpx; */
left: 5rpx;
top: 5rpx;
z-index: 1001;
border-radius: 100px;
opacity: 0.9;
}
/* 按钮 */
.wechat {
bottom: 300rpx;
right: 75rpx;
position: fixed;
z-index: 9999;
}
.pa,
.pa0 {
position: absolute
}
.pa0 {
left: 0;
top: 0
}
.bg0 {
width: 100rpx;
height: 100rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bg1 {
width: 100%;
height: 100%;
}
.hx-box {
top: 50%;
left: 50%;
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
}
.hx-box .pr {
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
animation: hxz 20s linear infinite;
}
@keyframes hxz {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
.hx-box .pr .pa0 {
width: 100rpx;
height: 100rpx;
/* border: 4px solid #5ec0ff; */
border-radius: 1000px;
}
.hx-box .pr .pa0 .span {
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png) no-repeat center center;
background-size: 100% 100%;
animation: hx 4s linear infinite;
}
@keyframes hx {
to {
transform: rotate(360deg);
}
}
.hx-k1 {
transform: rotateX(-60deg) rotateZ(-60deg)
}
.hx-k2 {
transform: rotateX(-30deg) rotateZ(-30deg)
}
.hx-k3 {
transform: rotateX(0deg) rotateZ(0deg)
}
.hx-k4 {
transform: rotateX(30deg) rotateZ(30deg)
}
.hx-k5 {
transform: rotateX(60deg) rotateZ(60deg)
}
.hx-k6 {
transform: rotateX(90deg) rotateZ(90deg)
}
</style>

122
templatePage/animate/wave/wave.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<view class="template-wave">
<!-- 顶部自定义导航 -->
<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="">
</view>
<view class="tnwave waveAnimation">
<view class="waveWrapperInner bgTop">
<view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgMiddle">
<view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgBottom">
<view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
</view>
</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: 'TemplateWave',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-wave{
background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
width: 100vw;
height: 100vh;
}
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.tnwave {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.bgTop {
opacity: 0.4;
}
.waveTop {
background-size: 50% 45px;
}
.waveAnimation .waveTop {
animation: move_wave 4s linear infinite;
}
.bgMiddle {
opacity: 0.6;
}
.waveMiddle {
background-size: 50% 40px;
}
.waveAnimation .waveMiddle {
animation: move_wave 3.5s linear infinite;
}
.bgBottom {
opacity: 0.95;
}
.waveBottom {
background-size: 50% 35px;
}
.waveAnimation .waveBottom {
animation: move_wave 2s linear infinite;
}
</style>