项目云台控制页面（仿遥控器）

电网智能巡视系统项目需要机器人遥控页面，在网上没有找到特别适合的组件，查资料找到了这个CSS的模板，
在原来布局不变的情况下，更改了一些样式，整理成SCSS，有需要的时候方便用
效果：一共五个按钮

项目整体demo：

HTML：

<div class="control-wrapper"><div class="control-btn control-top"><i class="fa fa-chevron-up"></i><div class="control-inner-btn control-inner"></div></div><div class="control-btn control-left"><i class="fa fa-chevron-left"></i><div class="control-inner-btn control-inner"></div></div><div class="control-btn control-bottom"><i class="fa fa-chevron-down"></i><div class="control-inner-btn control-inner"></div></div><div class="control-btn control-right"><i class="fa fa-chevron-right"></i><div class="control-inner-btn control-inner"></div></div><div class="control-round"><div class="control-round-inner"><i class="fa fa-pause-circle"></i></div></div>
</div>

CSS样式：

 .carControl {//车体控制.control-wrapper {//环形控制台position: relative;width: 120px;height: 120px;max-width: 100px;max-height: 100px;margin: 15px auto;border-radius: 100%;.control-btn {//四个方向公共按钮样式display: flex;justify-content: center;position: absolute;width: 47%;height: 47%;border-radius: 5px;border: 1px solid #78aee4;box-sizing: border-box;transition: all 0.3s linear;&:hover {background-color: rgb(4, 108, 174);}i {//字母样式font-size: 15px;color: #fff;display: flex;justify-content: center;align-items: center;}.control-inner-btn {//四个方向扇形position: absolute;width: 40%;height: 40%;background: #fafafa;}}.control-top {//上方top: -8%;left: 27%;transform: rotate(-45deg);border-radius: 5px 100% 5px 0;.control-inner {left: -1px;bottom: 0;border-top: 1px solid #78aee4;border-right: 1px solid #78aee4;border-radius: 0 100% 0 0;}.fa {transform: rotate(45deg) translateY(-7px);margin-top: 5px;}}.control-left {//左边top: 27%;left: -8%;transform: rotate(45deg);border-radius: 5px 0 5px 100%;.control-inner {right: -1px;top: -1px;border-bottom: 1px solid #78aee4;border-left: 1px solid #78aee4;border-radius: 0 0 0 100%;}.fa {transform: rotate(-45deg) translateX(-7px);margin-left: 10px;}}.control-right {//右top: 27%;right: -8%;transform: rotate(45deg);border-radius: 5px 100% 5px 0;.control-inner {left: -1px;bottom: -1px;border-top: 1px solid #78aee4;border-right: 1px solid #78aee4;border-radius: 0 100% 0 0;}.fa {transform: rotate(-45deg) translateX(7px);margin-left: -10px;}}.control-bottom {//下left: 27%;bottom: -8%;transform: rotate(45deg);border-radius: 0 5px 100% 5px;.control-inner {top: -1px;left: -1px;border-bottom: 1px solid #78aee4;border-right: 1px solid #78aee4;border-radius: 0 0 100% 0;}.fa {transform: rotate(-45deg) translateY(7px);margin-top: -10px;}}.control-round {//中间STOPposition: absolute;top: 21%;left: 21%;width: 58%;height: 58%;background: #fff;border-radius: 100%;.control-round-inner {position: absolute;left: 15%;top: 15%;display: flex;justify-content: center;align-items: center;width: 70%;height: 70%;font-size: 40px;color: #78aee4;border: 1px solid #78aee4;border-radius: 100%;transition: all 0.3s linear;.fa-pause-circle {font-size: 14px;width: 40px;}}}i {//所有文本删除倾斜样式font-style: normal;}}.carModel {width: 80px;padding: 4px 9px;text-align: center;margin: 0 auto;background-color: rgb(17, 131, 208);border: 1px solid #fff;border-radius: 5px;}}

项目云台控制页面（仿遥控器）相关推荐

Vue中实现海康威视监控的播放及云台控制
原创不易,如果觉得对你有所帮助,拜托点赞哦~~ ^_^ 最近在做一个Vue项目,其中一个需求,就是在页面中展示出海康威视的监控图像,并进行云台控制. 研究的过程还是有点儿痛苦的,这类技术文章数量不多, ...
C# USB摄像机虚拟云台控制
仅有USB连接的摄像机,通常没有云台(PTZ)控制功能.即便是带云台的摄像机,也需要红外遥控器.网络,或者RS-232(485)进行控制,仅通过USB是无法控制的. 但是在摄像机的属性菜单中,是可以进 ...
SkeyeVSS国标视频汇聚云服务使用Onvif、GB28181协议对监控摄像机设备进行PTZ云台控制
SkeyeVSS平台可在复杂的网络环境中,将分散的各类视频资源进行统一汇聚.整合.集中管理,实现视频资源的鉴权管理.按需调阅.全网分发.智能分析等.平台可支持多协议.多类型设备接入,包括国标GB281 ...
vue cli 添加html,vue-cli创建的项目,配置多页面的实现方法
vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂假设要新建的页面是rule,以下以rule为例 ...
asp.net core根据用户权限控制页面元素的显示
asp.net core根据用户权限控制页面元素的显示 Intro 在 web 应用中我们经常需要根据用户的不同允许用户访问不同的资源,显示不同的内容,之前做了一个 AccessControlHelp ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
EasyNVR网页Chrome无插件播放摄像机视频功能二次开发之云台控制接口示例代码
随着多媒体技术和网络通信技术的迅速发展,视频监控技术在电力系统.电信行业.工业监控.工地.城市交通.水利系统.社区安防等领域得到越来越广泛的应用.摄像头直播视频监控通过网络直接连接,可达到的世界任何角 ...
RTSP/Onvif安防网络摄像头无插件直播流媒体服务EasyNVR如何实现网络摄像机Onvif/RTSP接入直播与云台控制
什么是Onvif协议 ONVIF规范描述了网络视频的模型.接口.数据类型以及数据交互的模式.并复用了一些现有的标准,如WS系列标准等.ONVIF规范的目标是实现一个网络视频框架协议,使不同厂商所生产的 ...
Qt编写安防视频监控系统33-onvif云台控制
一.前言云台控制也是onvif功能中最常用的,最常用的功能排第一的是拿到视频流地址,排第二的就是云台控制了,云台控制的含义就是对带云台的摄像机进行上下左右的移动,一般云台摄像机都是带有一个小电机,一 ...
传统安防监控摄像头Onvif云台控制直播流如何转换成GB/T28181对接到国标视频平台公安内网
传统安防监控摄像头Onvif云台控制如何转换成GB/T28181 1.应用背景 2.部署流媒体服务 2.1.Onvif探测添加 2.1.1.通道编辑 2.2.视频广场播放 2.3.云台操作 3.GB/ ...

项目云台控制页面（仿遥控器）

HTML：

CSS样式：

项目云台控制页面（仿遥控器）相关推荐

最新文章

热门文章