huakuai.css 863 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. user-select: none;
  5. -webkit-user-select: none;
  6. list-style: none;
  7. }
  8. #box1{
  9. width: 800px;
  10. margin: 0 auto;
  11. }
  12. .range{
  13. position: relative;
  14. height: 50px;
  15. margin: 0 30px;
  16. width: 800px;
  17. /*overflow: hidden;*/
  18. }
  19. .chunk-one,.chunk-two{
  20. position: absolute;
  21. left: 0;
  22. top: 15px;
  23. width: 20px;
  24. height: 20px;
  25. border-radius: 50%;
  26. background-color: #fff;
  27. z-index: 10;
  28. cursor: pointer;
  29. transition: all .05s linear;
  30. border: 2px solid #409eff;
  31. box-sizing: border-box;
  32. }
  33. .range .chunk-two{
  34. left: 100%;
  35. background-color: #00ffFF;
  36. }
  37. .chunk-one strong,.chunk-two strong{
  38. display: inline-block;
  39. margin-top: 18px;
  40. text-align: center;
  41. font-weight: normal;
  42. }
  43. .strip-one,.strip-two{
  44. position: absolute;
  45. left: 0;
  46. top: 25px;
  47. height: 2px;
  48. width: 100%;
  49. background-color: #999;
  50. }
  51. .strip-two{
  52. width: 100%;
  53. background-color: #409eff;
  54. }