imgbox.css 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. .yyz-iv {
  2. --time: .5s;
  3. width: 100%;
  4. height: 100%;
  5. transition: background var(--time),opacity var(--time);
  6. position: absolute;
  7. top: 0;
  8. left: 0
  9. }
  10. .yyz-iv_img-box {
  11. width: 100%;
  12. height: 100%;
  13. position: relative
  14. }
  15. .yyz-iv_img {
  16. --img-time: 0s;
  17. cursor: pointer;
  18. position: absolute;
  19. -webkit-user-drag: none;
  20. transform: rotate(0);
  21. transition: all var(--img-time);
  22. user-select: none
  23. }
  24. .yyz-iv_operation {
  25. z-index: 9999;
  26. --operation-height: 50px;
  27. position: absolute;
  28. bottom: 20px;
  29. left: 50%;
  30. transform: translate(-50%);
  31. height: var(--operation-height);
  32. border-radius: calc(var(--operation-height) / 2);
  33. background-color: #0000001a;
  34. display: flex
  35. }
  36. .yyz-iv_operation-close {
  37. width: var(--operation-height);
  38. height: var(--operation-height);
  39. transform: scale(1.2);
  40. position: absolute;
  41. top: 30px;
  42. right: 30px;
  43. left: auto
  44. }
  45. .yyz-iv_operation-btn {
  46. border-radius: 50%;
  47. height: var(--operation-height);
  48. width: var(--operation-height);
  49. font-size: 30px;
  50. text-align: center;
  51. line-height: var(--operation-height);
  52. color: #fff;
  53. cursor: pointer;
  54. vertical-align: middle;
  55. position: relative;
  56. display: flex;
  57. align-items: center;
  58. justify-content: center;
  59. padding: 10px;
  60. box-sizing: border-box
  61. }
  62. .yyz-iv_operation-btn:hover {
  63. background-color: #0000001a
  64. }
  65. .yyz-iv_operation-btn > svg {
  66. width: 100%;
  67. height: 100%
  68. }
  69. .yyz-iv_tip {
  70. height: 30px;
  71. line-height: 30px;
  72. padding: 0 10px;
  73. background-color: #00000054;
  74. position: absolute;
  75. top: 50%;
  76. left: 50%;
  77. border-radius: 15px;
  78. color: #fff;
  79. transform: translate(-50%) translateY(-50%)
  80. }
  81. .yyz-iv-public-body-hidden {
  82. overflow: hidden
  83. }