| | |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <body class="claro jimu-main-font"> |
|---|
| | | <style> |
|---|
| | | .qhdiv { |
|---|
| | | z-index:10000; |
|---|
| | | position: fixed; |
|---|
| | | top: calc(40% - 90px); |
|---|
| | | transform: translate(0, -50%); |
|---|
| | | right: 20px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column;margin: 0; |
|---|
| | | width: 55px; |
|---|
| | | height: 100px; |
|---|
| | | text-align: center |
|---|
| | | } |
|---|
| | | .qhbtn { |
|---|
| | | border: 0; |
|---|
| | | width: 50px; |
|---|
| | | height: 50px; |
|---|
| | | background: url('images/qh001.jpg'); |
|---|
| | | background-size: 100%; |
|---|
| | | border-radius: 50%; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .qhbtn:before, .qhbtn:after { |
|---|
| | | opacity: 0; /*透明度为完全透明*/ |
|---|
| | | position: absolute; |
|---|
| | | z-index: 100000; /*设为最上层*/ |
|---|
| | | /*鼠标放上元素上时的动画，鼠标放上后效果在.tip-*:hover:before, .tip-*:hover:after中设置; |
|---|
| | | 0.3s:规定完成过渡效果需要多少秒或毫秒,ease:规定慢速开始，然后变快，然后慢速结束的过渡效果*/ |
|---|
| | | transition: 0.3s ease; |
|---|
| | | -webkit-transition: 0.3s ease; |
|---|
| | | -moz-transition: 0.3s ease; |
|---|
| | | } |
|---|
| | | .qhbtn:before { |
|---|
| | | content: '切换2D'; |
|---|
| | | border: 6px solid transparent; |
|---|
| | | white-space: nowrap; /*强制不换行*/ |
|---|
| | | background-color: #000000; |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .qhbtn:after { |
|---|
| | | content: '切换2D'; /*获取要提示的文本*/ |
|---|
| | | padding: 5px; |
|---|
| | | white-space: nowrap; /*强制不换行*/ |
|---|
| | | background-color: #000000; |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .qhbtn:hover:before, .tip:hover:after { |
|---|
| | | opacity: 1; /*鼠标放上时透明度为完全显示*/ |
|---|
| | | z-index: 1000; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tip-left:before { |
|---|
| | | top: 50%; |
|---|
| | | left: 0%; |
|---|
| | | border-left-color: rgba(0, 0, 0, 0.8); |
|---|
| | | margin-left: 0px; |
|---|
| | | margin-top: -3px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tip-left:after { |
|---|
| | | top: 50%; |
|---|
| | | right: 100%; |
|---|
| | | margin-right: 0px; |
|---|
| | | margin-top: -6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tip-left:hover:before { |
|---|
| | | margin-left: -6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tip-left:hover:after { |
|---|
| | | margin-right: 6px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <div class="qhdiv" onclick="javascript:window.location='http://localhost:63342/hsyj/index.html'"> |
|---|
| | | <button type="button" class="qhbtn tip-left" data-tip="我是上边提示"><span style="color:dodgerblue;"></span></button> |
|---|
| | | </div> |
|---|
| | | <div id="main-loading"> |
|---|
| | | <div id="app-loading"></div> |
|---|
| | | <div id="loading-gif"></div> |
|---|
