|
@@ -9,8 +9,12 @@
|
|
|
<body style="background-color: blanchedalmond;display: flex;flex-direction: column;">
|
|
<body style="background-color: blanchedalmond;display: flex;flex-direction: column;">
|
|
|
<!-- 说明：将网页更改为https访问才行 否者报错：NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). -->
|
|
<!-- 说明：将网页更改为https访问才行 否者报错：NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). -->
|
|
|
<!-- video用于显示媒体设备的视频流，自动播放；属性：https://zhuanlan.zhihu.com/p/535917105 -->
|
|
<!-- video用于显示媒体设备的视频流，自动播放；属性：https://zhuanlan.zhihu.com/p/535917105 -->
|
|
|
- <video id="video" autoplay webkit-playsinline="true" playsinline="true"></video>
|
|
|
|
|
- <img class="face-mark" src="../images/face-mark.png" alt="" />
|
|
|
|
|
|
|
+ <div class="video-wrap">
|
|
|
|
|
+ <video id="video" autoplay webkit-playsinline="true" playsinline="true"></video>
|
|
|
|
|
+ <div class="face-mark"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- <img class="face-mark" src="../images/face-mark.png" alt="" /> -->
|
|
|
<!-- transform: rotateY(180deg); 镜像解决 -->
|
|
<!-- transform: rotateY(180deg); 镜像解决 -->
|
|
|
<!-- 可以通过画布canvas渲染，获取使用默认的video也行 -->
|
|
<!-- 可以通过画布canvas渲染，获取使用默认的video也行 -->
|
|
|
<!-- <canvas id="canvas" width="500" height="400" style="transform: rotateY(180deg);"></canvas> -->
|
|
<!-- <canvas id="canvas" width="500" height="400" style="transform: rotateY(180deg);"></canvas> -->
|
|
@@ -240,9 +244,23 @@
|
|
|
</script>
|
|
</script>
|
|
|
</body>
|
|
</body>
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
|
|
+ @keyframes changeColor {
|
|
|
|
|
+ 0% {
|
|
|
|
|
+ border-color: #FFF;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ 50% {
|
|
|
|
|
+ border-color: #00FF00;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ 100% {
|
|
|
|
|
+ border-color: #FFF;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
video {
|
|
video {
|
|
|
- /* transform: rotateY(180deg); */
|
|
|
|
|
- /* display: none; */
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 400px;
|
|
|
transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
|
-o-transform: scaleX(-1);
|
|
-o-transform: scaleX(-1);
|
|
|
-webkit-transform: scaleX(-1);
|
|
-webkit-transform: scaleX(-1);
|
|
@@ -250,12 +268,24 @@
|
|
|
-ms-filter: fliph;
|
|
-ms-filter: fliph;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ .video-wrap {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.face-mark {
|
|
.face-mark {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- top: 5%;
|
|
|
|
|
|
|
+ top: 50%;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
|
|
- width: 80%;
|
|
|
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
|
+ width: 14rem;
|
|
|
|
|
+ height: 14rem;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ border: 3px dashed #fff;
|
|
|
|
|
+ box-shadow: 0 0 0 9999em rgba(0, 0, 0, .86);
|
|
|
|
|
+ animation: changeColor 1.2s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%) infinite;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.box {
|
|
.box {
|
