Skip to content

visualcloud / Vmatrix-device-start

Go to a project
Commit 6c3b02f2 by hank
Options

bug

parent 643b3ca6
Showing with 585 additions and 573 deletions
postcss.config.js
module.exports = { module.exports = {
plugins: { plugins: {
autoprefixer: {}, autoprefixer: {},
'postcss-pxtorem': { // 'postcss-pxtorem': {
rootValue: 192.0,//136 // rootValue: 192.0,//136
propList: ['*'] // propList: ['*']
} // }
} }
} }
src/App.vue
...@@ -20,6 +20,10 @@ export default { ...@@ -20,6 +20,10 @@ export default {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
* { * {
margin: 0; margin: 0;
......
src/views/Home.vue
<template> <template>
<div class="home" ref="home"> <div class="home" ref="home">
<img class="logo" src="../assets/Vmatrix.png" alt /> <img class="logo" src="../assets/Vmatrix.png" alt />
<div ref="lunzi"> <div ref="lunzi">
<!-- <img class="lunzi" src="../assets/图形2.png" alt /> --> <!-- <img class="lunzi" src="../assets/图形2.png" alt /> -->
<div class="lunzi" v-if="true"> <div class="lunzi" v-if="true">
<turntable /> <turntable />
</div> </div>
</div> </div>
<div class="mainstandby" ref='mainstandby'> <div class="mainstandby" ref="mainstandby">
<div class="mainstandby1"> <div class="mainstandby1">
<div class="title">Vmatrix-可视化云平台</div> <div class="title">Vmatrix-可视化云平台</div>
<div class="description"> <div class="description">
<span>一个提供高质量的视觉、交互与创意效果的平台</span> <span>一个提供高质量的视觉、交互与创意效果的平台</span>
</div> </div>
</div> </div>
</div> </div>
<div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div> <div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div>
<div class="title" v-show="state === 'LAUNCH'">启动页</div> <div class="title" v-show="state === 'LAUNCH'">启动页</div>
<div class="content-container"> <div class="content-container">
<div class="maininitqrcode" ref="maininitqrcode"> <div class="maininitqrcode" ref="maininitqrcode">
<div class="maininitqrcode1"> <div class="maininitqrcode1">
<div class="title">扫描二维码添加该设备</div> <div class="title">扫描二维码添加该设备</div>
<div class="description"> <div class="description">
<span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span> <span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span>
</div> </div>
<div class="icon"> <div class="icon">
<div class="code"> <div class="code">
<img :src="connectIdCode" alt /> <img :src="connectIdCode" alt />
</div> </div>
<!-- <img :src="connectIdCode" alt=""> --> <!-- <img :src="connectIdCode" alt=""> -->
</div> </div>
</div> </div>
</div> </div>
<div class="mainbonding" ref='mainbonding'> <div class="mainbonding" ref="mainbonding">
<div class="mainbonding1" ref='mainbonding1'> <div class="mainbonding1" ref="mainbonding1">
<div class="title">正在配置网络</div> <div class="title">正在配置网络</div>
<div class="description"> <div class="description">
<span>配置网络时请您保持网络稳定</span> <span>配置网络时请您保持网络稳定</span>
</div> </div>
<div class="icon"> <div class="icon">
<div class="phone"> <div class="phone">
<img src="../assets/phone.gif" alt /> <img src="../assets/phone.gif" alt />
</div> </div>
<!-- <img :src="connectIdCode" alt=""> --> <!-- <img :src="connectIdCode" alt=""> -->
</div> </div>
</div> </div>
</div>
</div> </div>
</div> <div class="bottom-tips">
<div class="bottom-tips"> <div class="bottom-tips-item" v-show="state == 'SHOW'">
<div class="bottom-tips-item" v-show="state == 'SHOW'"> <loading></loading>启动中，请稍后...
<loading></loading>启动中，请稍后... </div>
</div> <div class="bottom-tips-item" v-show="state == 'MAIN_BONDING'">
<div class="bottom-tips-item" v-show="state == 'MAIN_BONDING'"> <loading></loading>正在绑定，请稍后...
<loading></loading>正在绑定，请稍后... </div>
</div> <div class="bottom-tips-item" v-show="state == 'MAIN_INIT_QRCODE'">初始化二维码页</div>
<div class="bottom-tips-item" v-show="state == 'MAIN_INIT_QRCODE'">初始化二维码页</div> <div class="bottom-tips-item" v-show="state == 'MAIN_STANDBY'">待机页面</div>
<div class="bottom-tips-item" v-show="state == 'MAIN_STANDBY'">待机页面</div> <div class="bottom-tips-item" v-show="isConnected">蓝牙已连接</div>
<div class="bottom-tips-item" v-show="isConnected">蓝牙已连接</div> </div>
</div> <div class="progress-container">
<div class="progress-container"> <div class="progress" v-show="isLoading">
<div class="progress" v-show="isLoading"> <div class="progress2" ref="progress"></div>
<div class="progress2" ref="progress"></div> </div>
</div> <div class="progress" v-show="state == 'MAIN_BONDING' || state == 'MAIN_INIT_QRCODE'">
<div class="progress" v-show="state == 'MAIN_BONDING' || state == 'MAIN_INIT_QRCODE'"> <div class="progress3"></div>
<div class="progress3"></div> <div class="progress4" v-show="state == 'MAIN_BONDING'"></div>
<div class="progress4" v-show="state == 'MAIN_BONDING'"></div> </div>
</div> </div>
</div> <div class="bottom-code">
<div class="bottom-code"> <div v-if="state == 'MAIN_STANDBY' || state == 'MAIN_USELESS'">
<div v-if="state == 'MAIN_STANDBY' || state == 'MAIN_USELESS'"> <img :src="qrcode" alt />
<img :src="qrcode" alt /> <div class="more">扫描了解更多</div>
<div class="more">扫描了解更多</div> </div>
</div> </div>
</div> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> </div>
</div>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import loading from "@/components/loading.vue"; import loading from "@/components/loading.vue";
import turntable from "@/components/turntable.vue"; import turntable from "@/components/turntable.vue";
const QRCode = require("qrcode");
import anime from "animejs/lib/anime.es.js";
// LAUNCH, // 启动页（预留）
// MAIN_INIT_QRCODE, // 初始化二维码页
// MAIN_BONDING, // 正在绑定
// MAIN_STANDBY, // 待机页
// SHOW; // 模版展示页
export default {
// name: 'Home',
components: {
// HelloWorld
loading,
turntable
},
data() {
return {
qrcode: "http://www.maxrocky.com/",
link: "http://www.maxrocky.com/",
state: "",
loadingState: "",
connectIdCode: "",
isLoading: false,
isConnected: false
};
},
methods: {
toQRcode() {
QRCode.toDataURL(this.link, {
width: 500,
height: 500,
type: "image/png",
background: "#ffff",
color: {
// dark: "#ffff", // Blue dots
// light: "#0000" // Transparent background
}
})
.then(url => {
this.qrcode = url;
})
.catch(err => {
console.error(err);
});
},
showLoading() {
this.isLoading = true;
anime({
targets: this.$refs["progress"],
width: [
"10%",
"20%",
"30%",
"40%",
"50%",
"60%",
"70%",
"80%",
"90%",
"98%"
],
duration: 10000
});
},
loadingFinished() {
anime({
targets: this.$refs["progress"],
width: "100%",
duration: 200
});
},
closeLoading() {
this.isLoading = false;
anime({
targets: this.$refs["progress"],
width: [0],
duration: 0
});
},
MAIN_STANDBY() {
anime({
targets: this.$refs["lunzi"],
translateX: ["-50%", 0],
scale: [0, 0.5, 1],
translateZ: [-1000, 0],
// rotateY: [0, 360],
duration: 3000
});
},
MAIN_INIT_QRCODE() {
anime({
targets: this.$refs["lunzi"],
translateX: "-50%",
translateY: "-20%",
translateZ: [-1000, 0],
// rotateY: [0, 360],
duration: 3000,
scale: [0, 1.3]
});
}, const QRCode = require("qrcode");
MAIN_BONDING() { import anime from "animejs/lib/anime.es.js";
anime({ // LAUNCH, // 启动页（预留）
targets: this.$refs["lunzi"], // MAIN_INIT_QRCODE, // 初始化二维码页
translateX: "-50%", // MAIN_BONDING, // 正在绑定
translateY: "-20%", // MAIN_STANDBY, // 待机页
// rotateY: [0, 360], // SHOW; // 模版展示页
duration: 3000, export default {
}); // name: 'Home',
components: {
}, // HelloWorld
showTitle() { loading,
anime({ turntable
targets: this.$refs["maininitqrcode"], },
width: 1920, data() {
easing: 'linear' return {
}); qrcode: "http://www.maxrocky.com/",
/*anime({ link: "http://www.maxrocky.com/",
state: "",
loadingState: "",
connectIdCode: "",
isLoading: false,
isConnected: false
};
},
methods: {
toQRcode() {
QRCode.toDataURL(this.link, {
width: 500,
height: 500,
type: "image/png",
background: "#ffff",
color: {
// dark: "#ffff", // Blue dots
// light: "#0000" // Transparent background
}
})
.then(url => {
this.qrcode = url;
})
.catch(err => {
console.error(err);
});
},
showLoading() {
this.isLoading = true;
anime({
targets: this.$refs["progress"],
width: [
"10%",
"20%",
"30%",
"40%",
"50%",
"60%",
"70%",
"80%",
"90%",
"98%"
],
duration: 10000
});
},
loadingFinished() {
anime({
targets: this.$refs["progress"],
width: "100%",
duration: 200
});
},
closeLoading() {
this.isLoading = false;
anime({
targets: this.$refs["progress"],
width: [0],
duration: 0
});
},
MAIN_STANDBY() {
anime({
targets: this.$refs["lunzi"],
translateX: ["-50%", 0],
scale: [0, 0.5, 1],
translateZ: [-1000, 0],
// rotateY: [0, 360],
duration: 3000
});
},
MAIN_INIT_QRCODE() {
anime({
targets: this.$refs["lunzi"],
translateX: "-50%",
translateY: "-20%",
translateZ: [-1000, 0],
// rotateY: [0, 360],
duration: 3000,
scale: [0, 1.3]
});
},
MAIN_BONDING() {
anime({
targets: this.$refs["lunzi"],
translateX: "-50%",
translateY: "-20%",
// rotateY: [0, 360],
duration: 3000
});
},
showTitle() {
anime({
targets: this.$refs["maininitqrcode"],
width: 1920,
easing: "linear"
});
/*anime({
targets: this.$refs["mainbonding"], targets: this.$refs["mainbonding"],
width: 0, width: 0,
easing: 'linear' easing: 'linear'
...@@ -211,378 +207,389 @@ ...@@ -211,378 +207,389 @@
width: 0, width: 0,
easing: 'linear' easing: 'linear'
});*/ });*/
}, },
showTitle2() { showTitle2() {
anime({ anime({
targets: this.$refs["maininitqrcode"], targets: this.$refs["maininitqrcode"],
width: 0, width: 0,
// easing: 'linear' // easing: 'linear'
duration: 3000 duration: 3000
}); });
anime({ anime({
targets: this.$refs["mainbonding"], targets: this.$refs["mainbonding"],
width: 1920, width: 1920,
easing: 'linear' easing: "linear"
}); });
}, },
showTitle3() { showTitle3() {
anime({ anime({
targets: this.$refs["mainbonding"], targets: this.$refs["mainbonding"],
left: 0, left: 0,
duration: 0 duration: 0
}); });
anime({ anime({
targets: this.$refs["mainbonding1"], targets: this.$refs["mainbonding1"],
left: 0, left: 0,
duration: 0 duration: 0
}); });
anime({ anime({
targets: this.$refs["mainbonding"], targets: this.$refs["mainbonding"],
width: 0, width: 0,
duration: 3000 duration: 3000
}); });
anime({ anime({
targets: this.$refs["mainstandby"], targets: this.$refs["mainstandby"],
width: 1920, width: 1920,
easing: 'linear' easing: "linear"
}); });
}, }
}, },
watch: { watch: {
isConnected: function(value) { isConnected: function(value) {
console.log(value); console.log(value);
// if (value) { // if (value) {
// alert(value); // alert(value);
// } else { // } else {
// alert(value); // alert(value);
// } // }
}, },
loadingState: function(value) { loadingState: function(value) {
switch(value) { switch (value) {
case "LOADING": case "LOADING":
this.showLoading(); this.showLoading();
break; break;
case "SUCCESS": case "SUCCESS":
this.loadingFinished(); this.loadingFinished();
break; break;
case "FAILED": case "FAILED":
this.closeLoading(); this.closeLoading();
break; break;
case "DOWNLOADING": case "DOWNLOADING":
this.showLoading(); this.showLoading();
break; break;
} }
}, },
state: function(value) { state: function(value) {
switch(value) { switch (value) {
case "MAIN_INIT_QRCODE": case "MAIN_INIT_QRCODE":
this.MAIN_INIT_QRCODE(); this.MAIN_INIT_QRCODE();
this.showTitle(); this.showTitle();
this.closeLoading(); this.closeLoading();
break; break;
case "MAIN_BONDING": case "MAIN_BONDING":
this.showTitle2(); this.showTitle2();
this.closeLoading(); this.closeLoading();
this.MAIN_BONDING(); this.MAIN_BONDING();
break; break;
case "MAIN_STANDBY": case "MAIN_STANDBY":
this.MAIN_STANDBY(); this.MAIN_STANDBY();
this.showTitle3(); this.showTitle3();
break; break;
} }
}
},
mounted() {
this.MAIN_INIT_QRCODE();
window.addEventListener("resize", () => {
setZoom()
}, true);
const setZoom = () => {
var width = window.innerWidth;
var height = window.innerHeight;
let zoom = height / 1080;
if (width / height <= 16 / 9) {
zoom = width / 1920;
}
if (width / height >= 16 / 9) {
zoom = height / 1080;
} }
}, console.log(zoom)
mounted() { this.$refs["home"].style.zoom = zoom;
this.MAIN_INIT_QRCODE(); };
window.addEventListener("resize", () => { // document.body.style.zoom = window.innerWidth / 1920;
// document.body.style.zoom = window.innerWidth / 1920; // alert(window.innerWidth)
// this.$refs["home"].style.zoom = window.innerWidth/1920; // alert(window.innerHeight)
}); setZoom();
// document.body.style.zoom = window.innerWidth / 1920; // this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
// alert(window.innerWidth) },
// alert(window.innerHeight) created() {
// this.$refs["home"].style.zoom = window.innerWidth/1920; window.test = this;
// this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`; this.toQRcode();
}, new Promise((resolve, reject) => {
created() { if (!window.jsbridge) {
window.test = this; reject();
this.toQRcode(); }
new Promise((resolve, reject) => { window.jsbridge.init();
if(!window.jsbridge) { window.jsbridge.onInited = success => {
reject(); success ? resolve() : reject();
} };
window.jsbridge.init(); }).then(() => {
window.jsbridge.onInited = success => { QRCode.toDataURL(window.$jssdk("ble.connectId"), {
success ? resolve() : reject(); errorCorrectionLevel: "H",
}; width: 500,
}).then(() => { height: 500
QRCode.toDataURL(window.$jssdk("ble.connectId"), { })
errorCorrectionLevel: "H", .then(url => {
width: 500, this.connectIdCode = url;
height: 500 })
}) .catch(err => {
.then(url => { console.error(err);
this.connectIdCode = url; });
}) this.state = window.$jssdk("app.page");
.catch(err => { this.isConnected = window.$jssdk("ble.isConnected");
console.error(err); window.$observer("ble.onConnectionStateChange", isConnected => {
}); this.isConnected = isConnected;
this.state = window.$jssdk("app.page"); });
this.isConnected = window.$jssdk("ble.isConnected"); window.$observer("app.onPageChange", state => {
window.$observer("ble.onConnectionStateChange", isConnected => { this.state = state.new;
this.isConnected = isConnected; });
}); window.$observer("app.onFilmLoadStateChange", state => {
window.$observer("app.onPageChange", state => { this.loadingState = state;
this.state = state.new; });
}); });
window.$observer("app.onFilmLoadStateChange", state => { // LAUNCH, // 启动页（预留）
this.loadingState = state; // MAIN_INIT_QRCODE, // 初始化二维码页
}); // MAIN_BONDING, // 正在绑定
}); // MAIN_STANDBY, // 待机页
// LAUNCH, // 启动页（预留） // SHOW; // 模版展示页
// MAIN_INIT_QRCODE, // 初始化二维码页 }
// MAIN_BONDING, // 正在绑定 };
// MAIN_STANDBY, // 待机页
// SHOW; // 模版展示页
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
height: 1080px; height: 1080px;
width: 1920px; width: 1920px;
margin: 0 auto; margin: 0 auto;
background: url("../assets/01_启动页1.jpg") no-repeat center; background: url("../assets/01_启动页1.jpg") no-repeat center;
background-size: cover; background-size: cover;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
perspective: 800px; perspective: 800px;
.lunzi { .lunzi {
width: 700px; width: 700px;
height: auto; height: auto;
height: 700px; height: 700px;
position: absolute; position: absolute;
top: 210px; top: 210px;
left: calc(50% - 350px); left: calc(50% - 350px);
// transform-origin: 51.875% 45.73%; // transform-origin: 51.875% 45.73%;
// transform: rotate(0deg); // transform: rotate(0deg);
// animation: rotate 4s infinite forwards ease-in-out; // animation: rotate 4s infinite forwards ease-in-out;
} }
.logo { .logo {
top: 56px; top: 56px;
left: 101px; left: 101px;
position: absolute; position: absolute;
width: 157px; width: 157px;
height: 41px; height: 41px;
z-index: 1000; z-index: 1000;
} }
.content-container { .content-container {
.title { .title {
font-size: 79px; font-size: 79px;
letter-spacing: 20px; letter-spacing: 20px;
} }
.description { .description {
font-size: 30px; font-size: 30px;
} }
.icon { .icon {
width: 1920px; width: 1920px;
height: 200px; height: 200px;
position: absolute; position: absolute;
.code { .code {
position: absolute; position: absolute;
top: 230px; top: 230px;
left: 50%; left: 50%;
margin-left: -99px; margin-left: -99px;
background: white; background: white;
display: inline; display: inline;
img { img {
display: block; display: block;
width: 198px; width: 198px;
height: 198px; height: 198px;
background: white; background: white;
} }
} }
.phone { .phone {
position: absolute; position: absolute;
top: 230px; top: 230px;
left: 50%; left: 50%;
margin-left: -76px; margin-left: -76px;
display: inline; display: inline;
img { img {
height: 86px; height: 86px;
} }
} }
} }
} }
.title { .title {
font-size: 110px; font-size: 110px;
font-family: SourceHanSansCN; font-family: SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
position: absolute; position: absolute;
width: 1920px; width: 1920px;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
} }
.maininitqrcode { .maininitqrcode {
width: 0; width: 0;
height: 500px; height: 500px;
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -160px; margin-top: -160px;
overflow: hidden; overflow: hidden;
} }
.maininitqrcode1 { .maininitqrcode1 {
position: absolute; position: absolute;
height: 500px; height: 500px;
width: 1920px; width: 1920px;
text-align: center; text-align: center;
} }
.mainbonding { .mainbonding {
width: 0; width: 0;
height: 500px; height: 500px;
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -150px; margin-top: -150px;
overflow: hidden; overflow: hidden;
right: 0; right: 0;
}
} .mainbonding1 {
.mainbonding1 { position: absolute;
position: absolute; height: 500px;
height: 500px; width: 1920px;
width: 1920px; text-align: center;
text-align: center; right: 0;
right: 0; }
} .mainstandby {
.mainstandby { width: 0;
width: 0; height: 500px;
height: 500px; position: absolute;
position: absolute; top: 50%;
top: 50%; margin-top: -180px;
margin-top: -180px; overflow: hidden;
overflow: hidden; right: 0;
right: 0; }
} .mainstandby1 {
.mainstandby1 { position: absolute;
position: absolute; height: 500px;
height: 500px; width: 1920px;
width: 1920px; text-align: center;
text-align: center; right: 0;
right: 0; }
} .description {
.description { width: 689px;
width: 689px; height: 31px;
height: 31px; font-size: 33px;
font-size: 33px; font-family: SourceHanSansCN;
font-family: SourceHanSansCN; font-weight: 400;
font-weight: 400; position: absolute;
position: absolute; width: 1920px;
width: 1920px; top: 159px;
top: 159px; color: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1); white-space: nowrap;
white-space: nowrap; text-align: center;
text-align: center; }
} .bottom-tips {
.bottom-tips { position: absolute;
position: absolute; bottom: 34px;
bottom: 34px; right: 63px;
right: 63px; font-weight: 400;
font-weight: 400; color: rgba(255, 255, 255, 0.8);
color: rgba(255, 255, 255, 0.8); .bottom-tips-item {
.bottom-tips-item { display: flex;
display: flex; // align-items: top;
// align-items: top; }
} }
} .bottom-code {
.bottom-code { position: absolute;
position: absolute; bottom: 41px;
bottom: 41px; left: 109px;
left: 109px; img {
img { width: 131px;
width: 131px; height: 131px;
height: 131px; // width: 262px;
// width: 262px; // height: 262px;
// height: 262px; display: block;
display: block; background-color: white;
background-color: white; }
} .more {
.more { padding-top: 5px;
padding-top: 5px; font-size: 19px;
font-size: 19px; font-family: SourceHanSansCN;
font-family: SourceHanSansCN; font-weight: 400;
font-weight: 400; color: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1); }
} }
} }
}
.progress-container {
.progress-container { position: absolute;
position: absolute; top: 0;
top: 0; left: 0;
left: 0; right: 0;
right: 0; bottom: 0;
bottom: 0; height: 100%;
height: 100%; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: center;
justify-content: center; width: 100%;
width: 100%; .progress {
.progress { height: 2px;
height: 2px; width: 100%;
width: 100%; position: relative;
position: relative; background-color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.5); border-radius: 2px;
border-radius: 2px; margin-top: -60px;
margin-top: -60px; .progress2 {
.progress2 { content: "";
content: ""; position: absolute;
position: absolute; top: -1.5px;
top: -1.5px; left: 0;
left: 0; height: 5px;
height: 5px; background: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.9); border-radius: 3px;
border-radius: 3px; width: 0;
width: 0; }
} .progress3 {
.progress3 { content: "";
content: ""; position: absolute;
position: absolute; top: -1.5px;
top: -1.5px; left: 0;
left: 0; height: 5px;
height: 5px; background: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.9); border-radius: 3px;
border-radius: 3px; width: 49%;
width: 49%; }
} .progress4 {
.progress4 { content: "";
content: ""; position: absolute;
position: absolute; top: -1.5px;
top: -1.5px; left: 50%;
left: 50%; height: 5px;
height: 5px; background: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.9); border-radius: 3px;
border-radius: 3px; width: 50%;
width: 50%; }
} }
} }
}
@keyframes rotate {
@keyframes rotate { from {
from { transform: rotate(0deg);
transform: rotate(0deg); }
} to {
to { transform: rotate(360deg);
transform: rotate(360deg); }
} }
}
@keyframes rotate {
@keyframes rotate { from {
from { transform: rotate(0deg);
transform: rotate(0deg); }
} to {
to { transform: rotate(360deg);
transform: rotate(360deg); }
} }
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment