|
|
@@ -10,12 +10,33 @@
|
|
|
}
|
|
|
.bgimg{
|
|
|
position:absolute;
|
|
|
- background-image:url(http://iotkit-img.oss-cn-shenzhen.aliyuncs.com/product/KdJYpTp5ywNhmrmC/cover.png?Expires=1968261336&OSSAccessKeyId=LTAI5t8UFEH5eGrBUS5zSiof&Signature=df%2F6JEcxBlXitSNIENPMYJlRE8Y%3D);
|
|
|
- background-size: 100% 100%;
|
|
|
- width:60%;
|
|
|
- height:60%;
|
|
|
- margin-top:10%;
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
}
|
|
|
+ .bgimg::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 60%;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 80%;
|
|
|
+ -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='1200' height='770' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg%3E%3Cpath id='svg_1' d='M58.4 47.77C104.6 59.51 135.26 67.37 162.11 78.04C188.97 88.72 226.33 102.69 265.92 123.55C305.51 144.4 366.96 167.09 441.43 121.52C515.9 75.95 546.48 61.01 577.69 46.27C608.9 31.53 625.86 23.69 680.26 12.28C734.65 0.87 837.29 10.7 867.29 21.8C897.29 32.9 935.51 51.9 962.21 95.45C988.9 139.01 972.91 177.36 951.37 221.39C929.83 265.43 883.49 306 890.44 337.33C897.4 368.66 974.73 412.18 974.73 411.47C974.73 412.18 1066.36 457.62 1106.36 491.06C1146.36 524.5 1178.8 563.36 1184.03 579.63C1189.26 595.9 1200.4 622.49 1181.55 676.88C1162.71 731.26 1127.16 764.32 1115.31 778.64C1103.45 792.96 5.34 783.61 4.32 784.63C3.3 785.65 -172.34 2.38 1.13 35.04L58.4 47.77L58.4 47.77Z' fill='%23409eff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
|
+ background: #2e72f08f;
|
|
|
+ transition: all .3s ease;
|
|
|
+ }
|
|
|
+ .bgimg::after {
|
|
|
+ content: "";
|
|
|
+ width: 150px;
|
|
|
+ height: 300px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='150' height='300' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg%3E%3Cpath id='svg_1' d='M-0.56 -0.28C41.94 36.17 67.73 18.94 93.33 33.96C118.93 48.98 107.58 73.56 101.94 89.76C96.29 105.96 50.09 217.83 47.87 231.18C45.64 244.52 46.02 255.2 64.4 270.05C82.79 284.91 121.99 292.31 111.98 289.81C101.97 287.32 153.96 301.48 151.83 299.9C149.69 298.32 149.98 -1.36 149.71 -1.18C149.98 -1.36 -43.06 -36.74 -0.56 -0.28L-0.56 -0.28Z' fill='%23409eff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
|
+ background: #330b4e8c;
|
|
|
+ transition: all .3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
*{margin: 0px; padding: 0px;}
|
|
|
.login-box{
|
|
|
position: absolute;
|
|
|
@@ -30,13 +51,24 @@
|
|
|
}
|
|
|
.login-box .title{color:#333;font-size:22px;text-align:center;margin:20px 20px}
|
|
|
.login-box button{padding: 5px 15px; cursor: pointer; }
|
|
|
+
|
|
|
+ #loginImg{
|
|
|
+ -webkit-animation:bounce 3s 1s infinite linear normal;
|
|
|
+ -moz-animation:bounce 3s 1s infinite linear normal;}
|
|
|
+ @-webkit-keyframes bounce{
|
|
|
+ 40%{-webkit-transform:translateY(-20px)}
|
|
|
+ 60%{-webkit-transform:translateY(-10px)}
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="bgimg">
|
|
|
+ <div style="position:absolute;top:40px;left:100px;font-size:30px;color:#FFF">©奇特物联</div>
|
|
|
+ <img id="loginImg" src="http://iotkit-img.oss-cn-shenzhen.aliyuncs.com/product/KdJYpTp5ywNhmrmC/cover.png?Expires=1970997977&OSSAccessKeyId=LTAI5t8UFEH5eGrBUS5zSiof&Signature=0YV5y27iIYYL5XQ2qMeBV%2FloYFU%3D" style="position: absolute;left:100px;bottom: -20px;"/>
|
|
|
</div>
|
|
|
<div class="login-box">
|
|
|
- <div class="title">奇特物联授权确认</div> <br>
|
|
|
+ <div class="title">授权确认</div> <br>
|
|
|
<div>
|
|
|
正在确认授权...
|
|
|
</div>
|
xiwa