Doramis_Studio

3D Circle Effect

Oct 15th, 2021
965
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
  5. <style>
  6. /*Control the html behavior like
  7. user-select is set none to prevent the user to select the text*/
  8. html {
  9. overflow-x: hidden;
  10. user-select: none;
  11. -ie-user-select: none;
  12. -moz-user-select: none;
  13. -webkit-user-select: none;
  14. }
  15.  
  16. /*Yep, you guys don't know why there is a shape attribute :v
  17. */
  18. div[shape=circle] {
  19. width: 250px;
  20. height: 250px;
  21. background-image: linear-gradient(330deg, rgba(196,0,255,1) 0%, rgba(45,168,253,1) 100%);
  22. transition: 0.5s;
  23. background-size: 200% auto;
  24. box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.3), inset 0px 0px 10px 0px #FFFFFF, inset -30px -30px 20px 0px rgba(0,0,0,0.2);
  25. border-radius: 50%;
  26. }
  27.  
  28. /*The hover effect*/
  29. div[shape=circle]:hover {
  30. background-position: right center;
  31. cursor: pointer;
  32. }
  33.  
  34. /*Click effect*/
  35. div[shape=circle]:active {
  36. background-position: center center;
  37. width: 230px;
  38. height: 230px;
  39. cursor: pointer;
  40. }
  41.  
  42. /*Centerize the object*/
  43. .center {
  44. position: absolute;
  45. top: 0px;
  46. left: 0px;
  47. right: 0px;
  48. bottom: 0px;
  49. max-width: 100%;
  50. max-height: 100%;
  51. margin: auto;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56.  
  57. <div shape="circle" class="center">
  58. </div>
  59.  
  60. </body>
  61. </html>
RAW Paste Data