整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
省地勘院自主研发的管道地质灾害监测预警系统融合了HTML5、三维倾斜摄影、大数据自学习自修正模型等多项先进技术，开发了地质灾害监测设备管理、监测数据管理、预警预报、业务应用管理等多个功能子项，系统界面美观、表达直观，系统运行稳定，与传统的灾害监测预警系统相比，主要有如下特色:
地质灾害监测预警系统布局设计人性化、表达直观
省地勘院研发的地质灾害监测预警系统基于HTML5技术，采用扁平化设计及响应式布局,提高了系统可用性、表达上更形象直观，改进用户的友好体验。
与传统地灾预警系统对比
监测信息管理页
系统界面首页包含了：监测区域/点位列表、预警信息统计、现场情况上报、监测数据、监测数据分析、灾害趋势预测预报几大子项，囊括了地质灾害监测预警的主要工作内容，通过首页可以清楚的判读地质灾害点的当前变化信息。
地质灾害三维实景场景表达，监测预警信息表达更加形象直观
单体化建模
地质灾害三维实景场景及监测信息展示
采用“无人机倾斜摄影技术”对地质灾害监测现场进行航飞，构建监测现场的三维实景场景，利用3Dmax软件实现监测设备的单体化建模，通过坐标统一实现地图窗口的二三维联动，监测预警信息可以直观清晰的在三维实景场景中表达，通过点击三维场景中的监测站就可以显示该站监测数据信息，使得监测预警信息表达更加形象直观。
地质灾害预警阈值的动态设置，大量减少错报误报
大数据分析模型
预警阈值的动态设置
传统的地质灾害监测预警阈值多为人为设定固定值的方式，为了从方法上规避人为设置固定阈值造成的大量误报错报现象发生，我院基于大数据自学习自修正模型，采用动态设置预警阈值，使监测预警更加科学、准确，大量减少错报误报频率。
基于数值分析模型的灾害发展趋势预测分析
地质灾害趋势预测分析
根据监测的历史数据，利用数据分析方法，分析预测灾害未来一周的发展变化趋势，提前预测预报，使得地质灾害监测预警工作更加有意义。
研发“地质灾害监测预警APP”，实现互动互通
研发的“地质灾害监测预警APP”实现“现场+后台”的互动，通过该系统可以实现监测数据查看、预警信息发布、现场信息反馈上报，同时还支持“地质医生”专家在线服务，对灾害信息答疑解难。
实时监测与专家审核
监测预警级详情
预警情况上传
该系统的研发为业主搭建了地质灾害风险管控的信息化管理平台，它可以为各管道分公司提供第一手监测数据，对加强管道地质灾害风险控制，减少地质灾害对管道危害等方面有着十分重要的意义。同时，也为我院在今后该领域的发展起到很好的参考作用，为下一步山区管道地质灾害预警预报与动态力学技术研究、管道监测预警工程建设打下了坚实的基础、积累了丰富的经验。
7 月份，245 个国家气象站日最高气温突破 7 月历史极值；同时，疫情防控形势向好，企业加快复工达产节奏，电力负荷屡创新高。煤电作为我国最主要的电源，用不足 50% 的装机占比，生产了全国约 60% 的电量，满足了超 70% 的高峰负荷需求。
煤电作为火力发电的一种，通过煤在燃烧时产生的热能，将发电动力装置转换成电能。采用图扑软件的 2D、3D 和 GIS 可视化技术结合倾斜摄影和数字孪生技术，搭建出火电厂不同机组区域、输煤区域、化学水处理区域、公用系统区域、生活办公区域、主变及升压站区域的三维可视化系统。利用泛在感知、自适应、智能融合与互动化，让火电厂在工程设计、生产调度、过程监控、故障诊断、运营管控、可视化运维等不同环节实现智慧管理。
HT for Web GIS 支持对不同地图瓦片服务或数据、航拍倾斜摄影实景的 3DTiles 格式数据以及城市建筑群等不同的 GIS 数据的加载，同时，结合 BIM 数据轻量化、三维视频融合以及 2D 和 3D 的无缝融合等技术优势，在 GIS 系统中对海量的 POI 数据、交通流量数据、规划数据，现状数据等进行多样化展示。
基于 HT for Web 和 GIS 技术的智慧火电厂通过获取三维场景数据实现火电厂的数字孪生。基于数字孪生的三维技术，将物联网、人工智能、大数据等新 ICT 技术进行整合，对火电厂安全模块、环保模块、生产模块进行全方位的数字化建设，建设成新一代科技、高效、安全、绿色、健康的火电厂。基于天气数据进行气象仿真，根据具体的需求，展现雨、雪等不同的气象数据三维仿真效果。也可接入气象数据，在恶劣气候来临前做好应对措施。
火电厂三维场景数据获取主要有航拍建模和人工建模两种方式。
航拍建模，也称倾斜摄影实景三维。通过从一个垂直、四个倾斜、五个不同的视角同步采集影像，以大范围、高精度、高清晰的方式全面感知复杂场景，获取到丰富的建筑物顶面及侧视的高分辨率纹理。不仅能真实反映地物信息，还能通过定位、融合、建模等技术，生成具有地理坐标系信息的三维厂区模型。航拍建模可以准确的和GIS 匹配，OSGB 模型数据具有多细节层次（Level of Detail, LOD），系统可以根据用户浏览时和场景的距离显示不同精度的 LOD 层级模型。
人工建模，使用 3dsMax、Maya、C4D 等建模软件，基于影像数据、CAD 平面图或者拍摄图片估算建筑物轮廓与高度等信息进行人工建模。但建筑纹理与实际效果偏差较大，生产过程也需要大量人工参与；数据制作周期较长，时效性较低。人工建模要和 GIS 匹配需要人工进行空间矫正配准。
点击查看航拍 VS 人工建模区别
实际应用中，用户可根据自身需求选择合适的方式，也可以两者相结合实现。例如本次案例则采用倾斜摄影+人工建模+ BIM 模型三种做法叠加对火电厂进行全方位展示。
透视效果
通过人工建模的方式，运用图扑软件虚拟仿真技术，按照智慧火电厂机组区域的内部布局，1：1 制作 3D 可视化仿真互动模型，内部设备和建筑一览无余，便于运维查看。
对于智慧火电厂而言，仿真建模展示远不能满足需求。利用图扑软件结合 GIS 进行人员、车辆、设备的定位、监控管理，分析各类监控点位的布控合理性，全面监控厂区的生产状态，才是厂区智能化转型的重点。在安全方面，对厂区、消防设备等进行数字孪生；在环保方面，对 NO2、汞、PM2.5 等有毒有害物质排放情况进行分析，指导火电厂的环境治理工作，促进厂区的绿色化转型。
漫游巡检
火电厂电力巡检人员需要对运行的机器、工艺设备、管道、仪器仪表等进行规范的检查，去发现和专业识别隐患，处理隐患，上报隐患，让设备的故障消失在萌芽状态。通过巡检模拟人或者巡检车巡检的过程，经过设备时可以停留查看设备信息。漫游巡检功能根据增设的多类型巡检内容和多条巡检路径，可选用第一人称视角漫游或者无人机视角漫游进行全时段自动巡视，巡视速度可自由选择。
第一人称视角漫游可带来沉浸式体验。无人机视角漫游从空中漫游查看，展示火电厂的宏大，带来震撼观感。满足不同类型资产的运维管理特性。
安全模块
安全管理是企业平稳正常运行的根本，利用云计算、大数据、虚拟仿真、北斗定位等技术提升安全管理水平，提高安全管理效率是现代化电厂的管理重点。通过在地图上显示各种图标对应于标签绑定的人或物，对标签进行实时监控，并在地图中显示标签的当前位置，进行实时管控。
在图扑软件 2D 面板展示累计安全运行时间，厂区综合信息，如火灾监测点位、门禁点位、厂区人员、厂区车辆、电子围栏、摄像头信息。点击底部菜单的火灾监测点位可查看整个火电厂的火灾监测点分布情况，结合北斗、UWB 等系统，精准定位起火点，有效缩短救援时间。
火灾预演
通过动态箭头标示逃生路线，指向逃生出口方向，可模拟多条疏散路线并预测时间，测算出最佳逃生路线。
火电厂内人员密集度高，地形复杂，因此疏散难度较大。但疏散时间的长短直接关系到人员的安全，通过将 HT for Web 和 BIM 结合，借助传感设备和射频识别技术确定人员逃生数据，以 Hightopo 的三维可视化特点，将真实的疏散环境和疏散情况进行还原，与厂区真实情况切合度高。因此，在火灾逃生中，就能够有效提高员工逃生效率。
人员管理
采用图扑可视化管理厂区总人数，汽机、输煤、锅炉房人员信息分别统计，通过 3D 场景内的人员快捷导航功能快速定位人员。人员定位有助于管理者调动各区域员工，加强全局管理，提升企业的智能化水平和运行效率。
可基于 UWB 定位基站或其他定位硬件基础，在三维场景中实现厂内员工实时定位可视化功能。在集控中心部署图扑软件可视化管理系统，管理人员可以实时监控厂区在岗人员的位置，通过场景交互查看员工信息、行动轨迹等数据。员工可随身携带定位卡装置，如遇危险可手动发出 SOS 信息。集控中心运维在图扑软件可视化系统内看到求救信息可第一时间做出反应。
门禁管理
门禁安全管理集图扑可视化技术、AI 人脸识别技术、微机自动识别技术、现代安全管理措施为一体，它涉及电子，机械，光学，计算机技术，通讯技术，生物技术等诸多新技术，能有效识别记录通行人员和车辆信息。在图扑可视化大屏可查看门禁分布区域、当日通过门禁的人数、拦截人数、拦截原因，构建网格化社会治安防控体系，提高对各类事故、案件和突发事件防范和应急处理能力。
门禁系统还可集成其他专业系统楼宇自动化、闭路监控、防盗及消防报警等其他系统协调联动，从而使安防整体性和安全性得到提升，例如：
摄像头管理
摄像头是厂区实现主动式防御的关键，列表显示在线、离线摄像头数量，可根据名称搜索查看摄像头位置。图扑软件查询界面采用事件机制进行界面局部更新，避免 FPS 的游戏方式，过多进行无意义的界面刷新，避免桌面卡顿和手机发烫等问题。
点击 3D 场景底部摄像头图标可查看厂区智能摄像头分布，把摄像头叠加 AI 的算法，能够进行人员行为和物体的识别，让普通摄像头会思考。可视化界面接入监控系统，显示当前厂区场景。
图扑软件产品 HT for Web 作为基于 HTML5 标准的组件库，可以无缝结合 HTML5 各项多媒体功能，支持集成各类视频资源形成统一的视频流，可在 2D、3D 态势地图上标注摄像头对象并关联其视频信号源，通过场景交互来调取相应监控视频，满足运维人员对场景进行实时态势感知、历史数据回溯比对、应急处理预案等监测需求。
图扑软件还支持视频融合，将 2D 视频图像融合到场景的 3D 模型中，为用户提供直观的视频图像和简单的视图控制。通过室内监控视频与三维场景叠加展示，可如临其境查看现场情况。并可实现关键路径自动视频巡检，重点区域关注目标快速锁定等高级功能，为日常管理和突发事件的处理提供直观准确的协助。
电子围栏
火电厂的 3D 界面内用黄色表示厂区的各个电子围栏位置，并在人员入侵时弹出提示框，提醒集控中心运维及时通知入侵者离开。利用图扑软件 2D 面板显示违规记录，如违规时间、事件、处理状态，后续有针对性地加强管理。点击面板中电子围栏后的小眼睛可将镜头拉近查看，也可根据需要手动绘制电子围栏区域。
电子围栏是目前较为先进的周界防护报警系统，采用了先进的“阻挡为主，报警为辅”的周界安防理念，集“威慑、阻挡、报警、安全”于一身，可对人流态势风险进行分析研判。围栏分为永久性围栏和临时性围栏，永久性围栏在火电厂项目中出现在汽轮机、变压器、升压站等区域；临时性围栏出现在厂区内临时施工或者“两票”维修区。
车辆管理
火电厂作为一个密集多径场所，可采用 UWB、Wi-Fi、蓝牙、红外线、超宽带、RFID、ZigBee、动作捕捉、超声波等技术配合北斗卫星导航系统，收集车辆运行轨迹。将图扑可视化系统和路网系统结合，达到缩短车辆旅行时间、降低行车延误、减少车辆空驶和乱停、保障行车安全、提高场内道路通行能力的目的。
厂区车辆定位管控系统具备车辆基础信息查询、车辆实时定位跟踪、车辆实时位置查找、车辆安全状态查询、车辆实时巡查盘点、车辆异常报警联动等功能，可实现厂内车辆实时监测和安全预警智能化，提车辆智能化管理效率。
在定位范围内车辆发生故障，通过报警按钮能够及时向地面调度室发送报警信息；根据实际情况，预告确定地点和行动轨迹路线等。
安全四色图
结合火电厂自身实际绘制企业安全风险分布图，从组织、制度、技术、应急等方面对不同等级的安全风险采取有针对性的管控措施，确保安全风险始终处于受控范围内。在图扑软件数字孪生体内将火电厂安全风险等级从高到低划分为重大风险、较大风险、一般风险和低风险，分别用红、橙、黄、蓝四种颜色标示。通过厂区安全四色图分析，对重点安全防范区域的消防设备和监控设备的布控具有重要的指导意义。
环保模块
火电厂对环境的污染主要包括空气污染、废水污染、工业固废污染、工业噪声污染、电磁污染。锅炉的烟气通过高烟囱排入大气，通过图扑可视化系统统计监测点位的烟尘、NO2、汞排放、PM10、PM2.5、SO2 正常和异常指标数据，加强指标异常区域的环境管理，构建绿色厂区。
图扑软件运用图形化的手段清晰有效地将数据信息进行解读和传达，分别利用柱状图、面积图、折线图等统计每月 NO2、PM10、PM2.5、SO2 的排放量，帮助我们发现其中的规律和特征，挖掘数据背后的价值。通过各种不同数据源之间的数据传递、转换、净化、集成等功能，实现环境数据的统一存储、统一展现。
点击底部菜单的每类排放物，会在 3D 场景内相应分布区域出现图标，双击 3D 场景内相应的小图标可弹出 2D 面板查看各种有毒有害物质的每小时变化情况。通过数据层面的整理提炼，将分散在各个“信息孤岛”中的有效信息资源进行全面整合，全面支持数据共享、统一管理和分析决策。
AQI 云图
用绿、黄、橙、红、紫表示空气污染的轻重程度，加强重污染区域的环境治理和人员准入，保障员工身体健康。
通过跨平台的标准数据协议，将各个独立分散的数据库或信息系统中的有价值的数据抽取到图扑可视化系统，实现多业务处理以及管理决策层的数据共享。
生产模块
火力发电的原理是在燃烧时加热水生成蒸汽，将燃料的化学能转变成热能，蒸汽压力推动汽轮机旋转，热能转换成机械能，然后汽轮机带动发电机旋转，将机械能转变成电能。图扑软件采用轻量化三维建模技术，数字孪生火电厂的发电流程，带来沉浸式观感。
三维工艺流程
采用三维组态的方式实现电厂关键工艺流程上的设备连接，一方面可监控重要设备的运行信息；另一方面，用三维组态展示出燃煤发电厂的主要发电工艺：输煤栈桥→筛煤机→碎煤机→输煤皮带→给煤机→磨煤机→锅炉→汽轮机→发电机→主变→升压站→电网……
相较于 InTouch/IFix/WinCC 这些传统组态软件，图扑基于 Web 的平台更适合 C/S 向 B/S 转型的大趋势，支持快捷的数据绑定方式，丰富的可视化组件可用于快速创建和部署。同传统界面相比，图扑满足工业物联网现代化的、高性能的、跨平台（桌面 Mouse /移动 Touch /虚拟现实 VR）的图形展示效果及交互体验。
设备预警
通过列表显示一级、二级、三级设备预警信息，可分类查看，防范设备高温暴晒运行带来的爆炸、倾覆、滞留风险。相较于人工预警，通过图扑可视化平台预警，精简流程，监测数据一旦触发设定的预警指标，集控中心运维可实时收到预警提示，为转移危险区域人员争取宝贵时间。同时，加强在役机组运行管理，减少非计划停机、受阻情况，保障机组稳发满发。
在高温天气可使用 “温度传感器+Zigbee”温度监测系统，准确地采集关键设备及设备关键部位的温度信号，通过智能网关，接入光纤网络，实现网络及数据共享。通过控制中心的无线测温监测系统，超温部位及设备精准定位，超温报警，保证关键设备寿命及生产连续性，减少及避免潜在事故的风险。
地下管网
采用透视效果呈现火电厂三维地下管网在厂区分布情况，了解管道布局和走向，避免地下作业时损坏管子。结合各种信息传感器、射频识别技术、红外感应器、激光扫描器等监测管道健康状况，避免爆管、管裂等情况的发生。
升压站建设流程
图扑软件支持将 BIM 建筑数据叠加到 3D 场景中，也支持将 BIM 模型叠加到地图场景中，实现 BIM + GIS 的结合展示。将 BIM 技术应用到升压站建设中，涵盖：规划、设计、施工及运维管理等各个阶段。结合 BIM 技术，对升压站的建筑结构、基础设施系统内设备进行三维模拟呈现，直观逼真。
通过 HT 引擎进行渲染，仿真还原升压站建设流程：地基建筑→围墙→变压器区→刀闸区→开关区→钢塔→线缆，实现智能施工管控。可依据需要选择正常速度、2 倍速、4 倍速等不同播放速度查看建设过程，查找不合理环节。结合图扑软件还能实现对一次设备（变压器、断路器、隔离开关等直接用于生产和使用电能的设备）运行工况的监视、测量、控制及调节等。
图扑软件还提供了 BIM 模型转 HT 图元的功能，可对 BIM 文件做轻量化处理，确保场景在 Web 中高效流畅地加载运行，降低开发成本。
机组数据监测
点击底部菜单的机组数据监测，可在三维场景内查看机组负荷、汽机转速、给水流量等机组主要参数的实时数据，进行电力设备状态检修、厂站智能运行、作业机器人替代、大数据辅助决策等，开展火电厂的数字化、无人化管理。
图扑软件将 2D 和 3D 无缝融合，通过图表的数据绑定，利用不同样式的图表统计方式统计安全运行天数、厂区面积、总装机容量、机组实时功率；日发电量、月发电量、总发电量数据；供电煤机、发电煤耗、负荷率等生产指标；锅炉机组和汽轮发电机组等设备运行效率。采用柱状图和折线图结合的方式展示日煤耗、月煤耗、总煤耗，了解厂区基本运行状况，保证火电厂运行的安全性、经济性和电能的质量。
火电厂设备设施、工艺流程的智能化升级，提高了电力系统灵活感知和高效生产运行能力。但是，通过火电厂实现电力系统削峰填谷，满足 5% 的峰值负荷需要投资 4000 亿，而通过虚拟电厂，在建设、运营、激励等环节投资仅需 500-600 亿元。
虚拟电厂是满足新型电力系统需求侧互动响应能力的重要工具，其提供的新能源电力与传统能源和储能装置集成的模式，能对大电网呈现出稳定的电力输出特性。挖掘了各品类电源顶峰发电潜力，优化跨区域电网间的开机备用、错峰支援、余缺调剂。
新能源系统分散化、扁平化、去中心化的趋势特征日益明显，分布式能源快速发展，系统模式由大基地大网络为主逐步向与微电网、智能微网并行转变，推动新能源利用效率提升和经济成本下降。
《中国电力发展报告 2022》建议，通过多能互补形式，推进新能源基地化开发，探索建立新能源基地有效供给和有效替代新模式。推广应用多时间尺度功率预测、智慧调控等技术，有效提升新能源可靠支撑能力和消纳水平。2022 年上半年，水电、核电、风电和太阳能发电等清洁能源发电量超 1.2 万亿千瓦时。
智慧电网要求建设智能调度体系，实现源网荷储互动、风光一体等多能协同互补及用能需求智能调控，合理布局“新能源+储能”一体化友好型新能源电站。
更多行业应用实例可以参考图扑软件官网案例链接：https://www.hightopo.com/demos/index.html
TML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
CSS 是一种描述 HTML 文档样式的语言。
CSS 描述应该如何显示 HTML 元素。
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3 被拆分为"模块"。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。
要实现如下效果：
HTML5:
<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。使用说明 | |
line-break | 用于指定如何（或是否）断行。除了Firefox，其它浏览器都支持。取值包括： |
word-wrap | 允许长单词或URL地址换行到下一行。所有浏览器都支持。取值包括： |
word-break | 定义文本自动换行。Chrome和Safari浏览器支持不够友好。取值包括： |
white-space | 设置如何处理元素中的空格。所有浏览器都支持。取值包括： |
要实现的效果：
CSS3：
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
}要实现的效果：
CSS3：
p {
text-align: center;
font:bold 60px helvetica, arial, sans-serif;
color: red;
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}要实现的效果：
CSS3：
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background: #CCC;
text-shadow: -1px -1px white,
1px 1px #333;
}要实现的效果：
CSS3：
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background: #CCC;
text-shadow: 1px 1px white,
-1px -1px #333;
}要实现的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}要实现的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}要实现的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}要实现的效果：
CSS3：
#demo {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}要实现的效果：
CSS3和HTML5：
<style type="text/css">
.bubble {
width: 200px; /*定义框大小，可忽略，让消息框自由收缩*/
height: 50px;
background:hsla(93,96%,62%,1); /*定义背景色，必须与下面箭头背景色一致*/
padding: 12px; /*增加补白，防止消息文本跑到框外*/
position: relative; /*定义定位包含框，方便定位箭头*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*圆角*/
}
.bubble:before {
content: ""; /*不显示任何内容*/
width: 0; /*定义箭头内容区大小*/
height: 0;
position: absolute; /*绝对定位*/
z-index:-1; /*显示在消息框下面*/
}
.bubble.bubble-left:before {
right: 90%;
top: 50%;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
transform: rotate(-25deg); /*定位箭头倾斜角度*/
/*定义箭头长短、粗细*/
border-top: 20px solid transparent;
border-right: 80px solid hsla(93,96%,62%,1);
border-bottom: 20px solid transparent;
}
div {
margin:50px;
}
<div class="bubble bubble-left">左侧消息提示框<br>class="bubble bubble-left"</div>要实现的效果：
CSS3：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
background-size: 100% 30px;
position: relative;
}
body:before {
content: "";
display: inline-block;
height: 100%;
width: 4px;
border-left: 4px double #FCA1A1;
position: absolute;
left: 30px;
}需要实现的效果：
CSS3：
.box {
background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
color: #fff;
padding: 12px 24px;
}<script>
function setTab(cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById("tab_"+i);
var con=document.getElementById("con_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
<div id="tab">
<div class="Menubox">
<ul>
<li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
<li id="tab_2" onclick="setTab(2,4)">搞笑</li>
<li id="tab_3" onclick="setTab(3,4)">美女</li>
<li id="tab_4" onclick="setTab(4,4)">摄影</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_1" class="hover" ><img src="images/1.png" /></div>
<div id="con_2" class="hide"><img src="images/2.png" /></div>
<div id="con_3" class="hide"><img src="images/3.png" /></div>
<div id="con_4" class="hide"><img src="images/4.png" /></div>
</div>
</div>
</body>CSS3：
tbody tr:nth-child(2n) {
background-color: #f5fafe;
}圆角表格的CSS3：
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}单线表格的CSS3：
table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
width: 100%;
}设计图片翘边阴影效果：
CSS3：
.box {
width: 980px;
clear: both;
overflow: hidden;
height: auto;
margin: 20px auto;
}
.box li {
background: #fff;
float: left;
position: relative;
margin: 20px 10px;
border: 2px solid #efefef;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
width: 290px;
height: 200px;
margin: 5px;
}
.box li:before {
content: "";
position: absolute;
width: 90%;
height: 80%;
bottom: 13px;
left: 21px;
background: transparent; /*透明背景*/
z-index: -2; /*显示在照片的下面*/
box-shadow: 0 8px 20px rgba(0,0,0,0.8); /*添加阴影*/
-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
-o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
transform: skew(-12deg) rotate(-6deg); /*变形并旋转阴影，让其翘起*/
-webkit-transform: skew(-12deg) rotate(-6deg);
-moz-transform: skew(-12deg) rotate(-6deg);
-os-transform: skew(-12deg) rotate(-6deg);
-o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左侧添加翘边阴影*/
content: "";
position: absolute;
width: 90%;
height: 80%;
bottom: 13px;
right: 21px;
z-index: -2;
background: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.8);
transform: skew(12deg) rotate(6deg);
-webkit-transform: skew(12deg) rotate(6deg);
-moz-transform: skew(12deg) rotate(6deg);
-os-transform: skew(12deg) rotate(6deg);
-o-transform: skew(12deg) rotate(6deg);
}
<ul class="box">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
</ul>ref
《HTML5+CSS3+JavaScript从入门到精通（实例版）》
-End-
*请认真填写需求信息，我们会在24小时内与您取得联系。
