RealHero

web1 pictureFrame.css

Jun 2nd, 2021
833
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. #pictureHolder{
  2.   display: block;
  3.   width: 100%;
  4.   background-repeat: no-repeat;
  5.   background-size: cover;
  6.   background-position: center;
  7.   transition: background-image 0.2s ease-in-out;
  8.   position: relative;
  9. }
  10. #pictureFrame{
  11.   display: flex;
  12.   width: 100%;
  13.   margin-right: 10px;
  14.   background: #222222;
  15.   padding: 10px;
  16.   border-radius: 5px;
  17. }
  18. #pictureFrameNavigation{
  19.   display: flex;
  20.   flex-direction: column;
  21. }
  22. #pictureFrameNavigation ul{
  23.   columns: 2;
  24.   padding: 0;
  25.   list-style: none;
  26.   margin: 4px;
  27.   column-gap: 0;
  28. }
  29. #pictureFrameNavigation li{
  30.   display: block;
  31.   width: 30px;
  32.   padding-top: 30px;
  33.   position: relative;
  34. }
  35. #pictureFrameNavigation label{
  36.   position: absolute;
  37.   top: 0;
  38.   left: 0;
  39.   bottom: 0;
  40.   right: 0;
  41.   margin: 5px;
  42.   border: 1px solid #555555;
  43. }
  44. #pictureFrameNavigation span{
  45.   user-select: none;
  46.   cursor: pointer;
  47.   width: 100%;
  48.   height: 100%;
  49.   display: flex;
  50.   justify-content: center;
  51.   align-items: center;
  52.   background: black;
  53. }
  54. #pictureFrameNavigation input{
  55.   display: none;
  56. }
  57.  
  58. #pictureFrameNavigation input:checked + span{
  59.   color:dodgerblue;
  60. }
  61. #pictureHolder div{
  62.   position: absolute;
  63.   bottom: -3px;
  64.   width: 100%;
  65.   height: 3px;
  66.   background: white;
  67.   animation: mymove 8s;
  68.   animation-timing-function: linear;
  69. }
  70.  
  71. @keyframes mymove {
  72.   from {width: 100%;}
  73.   to {width: 0;}
  74. }
  75. #pictureFrameArrows{
  76.   display: flex;
  77.   flex-direction: column;
  78.   align-items: center;
  79.   height: 100%;
  80.   justify-content: center;
  81. }
  82. #pictureFrameArrows svg{
  83.   cursor: pointer;
  84. }
  85.  
RAW Paste Data