cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="canvas canvas--state1">
  <div class="point point--active point--first">
    <div class="point__icon">
      <svg width="21px" height="21px" viewBox="23 0 21 21">
    <path d="M42.1146109,14.0057545 L38.067627,14.0005816 C37.7711779,13.9576969 37.469975,14.0363717 37.2323661,14.2187536 C37.0507078,14.4724062 36.9672417,14.78335 36.9974584,15.0938758 L36.9974584,19.194718 C36.9974584,20.1319143 36.4278379,20.5031414 35.4230904,20.7946459 C34.7895942,20.926494 34.1440358,20.9916617 33.4969696,20.9890837 C32.840825,20.9903234 32.1866685,20.9169248 31.5471145,20.7703032 C30.6071797,20.5430027 29.9970893,20.1313057 29.9970893,19.1944138 L29.9970893,14.9837249 C29.9950726,14.7173426 29.8908293,14.4619084 29.705889,14.2701777 C29.519821,14.0979103 29.2782817,13.9978625 29.0249003,13.988106 L24.7953457,14.0021031 C23.8581495,14.0021031 23.4869224,13.445871 23.1951136,12.4417322 C23.0629743,11.8078597 22.9976021,11.1618885 23.0000672,10.5143941 C22.9988038,9.85824823 23.0722028,9.20408913 23.2188477,8.56453906 C23.6436289,7.23146867 29.9231481,0.676267695 31.5808901,0.194889617 C32.2143873,0.0630481865 32.859945,-0.00211949153 33.507011,0.000451821519 C34.1308389,-0.0065107472 34.7529594,0.0670228112 35.3579736,0.219232377 C36.2979084,0.446228613 37.0114555,0.858229825 37.0114555,1.7951218 L36.9953285,5.92243675 C36.9523579,6.21884418 37.0309218,6.52004268 37.2131962,6.7576977 C37.4668608,6.93933055 37.7777948,7.02279407 38.0883184,6.99260533 L42.2055919,6.99260533 C43.1424839,6.99260533 43.4227299,7.57500587 43.7133216,8.58005757 C43.9056782,9.20381381 44.0023224,9.85313586 43.9999576,10.5058742 C44.0016911,11.1619604 43.928803,11.8161155 43.7826985,12.4557292 C43.5557023,13.3956641 43.0524157,14.0057545 42.1146109,14.0057545 Z" id="4gamer" stroke="none" fill-rule="evenodd"></path>
</svg></div>
    <div class="point__title">Фогеймер</div>
  </div>
  <div class="point point--second">
    <div class="point__icon">
      <svg width="25px" height="18px" viewBox="103 11 25 18">
      <path d="M103,24.9058183 C103.074093,24.6072027 103.057129,24.296862 103.105775,23.9965001 C103.271423,22.9756688 103.422852,21.9535901 103.625172,20.9387461 C103.965948,19.2306249 104.367595,17.5394676 104.951604,15.8967076 C105.409631,14.6081949 105.936262,13.3506166 106.806414,12.2751513 C107.228267,11.7535095 107.712489,11.2924889 108.382565,11.1028917 C108.748039,10.9993617 109.129478,11.055243 109.503683,11.0375306 C110.062247,11.0113362 110.556197,11.1951956 111.042664,11.4199681 C111.57628,11.666694 112.121372,11.874752 112.689166,12.0271781 C113.718729,12.3038404 114.768998,12.3272906 115.824755,12.3213033 C116.410261,12.3178107 116.98978,12.2726566 117.566804,12.1850927 C118.431467,12.0538714 119.242244,11.7565032 120.031568,11.392277 C120.763762,11.0544945 121.534375,10.9090535 122.328188,11.0587355 C123.177384,11.2186458 123.784844,11.7602452 124.291767,12.4333153 C125.057141,13.4504046 125.557328,14.6002119 125.98966,15.7846955 C126.537247,17.2860061 126.927917,18.8312234 127.251479,20.3936541 C127.516666,21.6749321 127.750669,22.9616984 127.900351,24.2641814 C127.924799,24.4762309 127.881391,24.7032486 127.986667,24.9058183 L127.986667,26.2721656 C127.938021,26.3253027 127.944756,26.3919112 127.939518,26.4562744 C127.894613,27.0021148 127.782351,27.5322386 127.518662,28.015961 C127.27019,28.4709943 126.924674,28.8389626 126.391806,28.9362559 C125.998142,29.0078538 125.602981,28.9429916 125.218299,28.8172587 C124.244617,28.4996833 123.468765,27.8750104 122.743556,27.1884689 C121.98866,26.4742363 121.273429,25.7175937 120.527514,24.9933823 C120.12437,24.6017143 119.670834,24.2699192 119.110275,24.1357043 C118.225155,23.9231559 117.318082,23.8677735 116.414751,23.8413297 C115.638151,23.8188774 114.858807,23.8121417 114.078714,23.8700188 C113.359492,23.922657 112.64027,23.9610753 111.93876,24.1292181 C111.400154,24.2589425 110.880009,24.479474 110.487843,24.8723893 C110.251594,25.1086374 110.026323,25.3650926 109.796561,25.6130658 C109.078836,26.3869218 108.34714,27.146059 107.524887,27.8101482 C106.93539,28.286137 106.301985,28.6950184 105.552078,28.8753852 C104.964327,29.0170842 104.396533,29.0328008 103.906824,28.5845032 C103.533616,28.2424798 103.32456,27.8098988 103.200574,27.3336605 C103.114257,27.0016159 103.065611,26.6590936 103,26.3213112 L103,24.9058183 Z" stroke="none" fill-rule="evenodd"></path>
</svg></div>
    <div class="point__title">Игры</div>
  </div>
  <div class="point point--third">
    <div class="point__icon">
      <svg width="22px" height="22px" viewBox="187 9 22 22">
      <path d="M198,31 C204.075132,31 209,26.0751322 209,20 C209,13.9248678 204.075132,9 198,9 C191.924868,9 187,13.9248678 187,20 C187,26.0751322 191.924868,31 198,31 Z M199.000056,24.9780273 C199.000056,24.9780273 200.03863,24.5036315 200.03863,24 C200.03863,23.4963685 199.000056,22.9780273 199.000056,22.9780273 L197.009333,22.9780273 L197.009333,21.9780273 L199.03863,21.9780273 C201.487361,21.9780273 203.000056,20.2163086 203.000056,18 C203.000056,15.7587891 201.437556,14 199.03863,14 C199.03863,14 198.018611,14 197.009334,14 C196.000056,14 195.03863,15 195.03863,16 C195.03863,17 195.03863,19.9890137 195.03863,19.9890137 L194.000056,19.9890137 C194.000056,19.9890137 192.991341,20.4870937 193.000056,20.9890137 C193.008772,21.4909336 194.034594,21.9780273 194.034594,21.9780273 L195.03863,21.9780273 L195.03863,22.9780273 L194.000056,22.9780273 C194.000056,22.9780273 193.000056,23.5038178 193.000056,24 C193.000056,24.4961822 194.000056,24.9780273 194.000056,24.9780273 L195.03863,24.9780273 L195.03863,26 C195.03863,26 195.499536,26.9780273 196.000056,26.9780273 C196.500577,26.9780273 197.009333,26 197.009333,26 L197.009333,24.9780273 L199.000056,24.9780273 Z M197.009333,19 C197.009333,18 197.009334,18.0078125 197.009333,17 C197.009333,15.9921875 197.009333,15.9921875 198.605623,15.9921875 C200.201912,15.9921875 201.000056,16.7564267 201.000056,17.9916505 C201.000056,19.2357608 200.165632,20 198.587483,20 C197.009333,20 197.009333,20 197.009333,19 Z" id="Combined-Shape" stroke="none" fill-rule="evenodd"></path>
</svg></div>
    <div class="point__title">Бонусы</div>
  </div>
  <div class="point point--fourth">
    <div class="point__icon">
      <svg width="16px" height="21px" viewBox="272 9 16 21">
      <path d="M279.998252,9 C282.943127,9 285.33042,11.4520809 285.33042,14.4768759 C285.33042,17.5016709 282.943127,19.9537518 279.998252,19.9537518 C277.053377,19.9537518 274.666084,17.5016709 274.666084,14.4768759 C274.666084,11.4520809 277.053377,9 279.998252,9 L279.998252,9 Z M279.882867,22.3636364 C281.314685,22.3636364 283.633457,21.4090909 283.633457,21.4090909 C286.418182,21.4090909 287.996503,24.1450453 287.996503,27.1358399 C287.996503,30.1266346 286.694122,29.9992144 285.087806,29.9992144 L274.908698,29.9992144 C273.302382,29.9992144 272,30.0235531 272,27.1358399 C272,24.2481267 273.482343,21.4090909 276.363046,21.4090909 C276.363046,21.4090909 278.451049,22.3636364 279.882867,22.3636364 Z" stroke="none" fill-rule="evenodd"></path>
</svg></div>
    <div class="point__title">Профиль</div>
  </div>
</div>
            
          
!
            
              body
  background #000
  color white
  fill white
  font-family Arial
  display flex
  justify-content center
  margin-top 50px

.canvas
  position relative
  background black
  width 360px
  height 56px
  display flex
  transition background .2s ease-in-out
  
  &--state1
    background #1B1A20
    
  &--state2
    background #1B1A20
  
  &--state3
    background #0D3646
    
  &--state4
    background #1B1A20

.point
  width 25%
  display flex
  justify-content center
  flex-direction column
  text-align center
  transition width .2s ease-in-out
  
  &__icon svg
      opacity .3
      transform translate(0,10px)
      transition transform .2s ease-in-out
  
  &__title
    opacity 0
    margin-top 5px
    font-size 14px
    transform scals(.3)
    // transition opacity .1s ease-in-out, transform .1s ease-in-out
    
  &--active
    width 40%
  
  &--active &__icon svg
        opacity 1
        fill #fc0
        transform translate(0,0)
  
  &--active &__title
    color #fc0
    opacity 1
    transform scals(1)
    transition opacity .2s ease-in-out, transform .2s ease-in-out
            
          
!
            
              $('.point').click(function() {
  
   if(!$(this).hasClass('point--active')) { 
      $(this).siblings().removeClass('point--active');
      $(this).addClass('point--active')
    }
  
  if  ($(this).hasClass('point--first')) {
    goClass(1)
  }
  
  if  ($(this).hasClass('point--second')) {
    goClass(2)
  }
  
  if  ($(this).hasClass('point--third')) {
    goClass(3)
  }
  
  if  ($(this).hasClass('point--fourth')) {
    goClass(4)
  }

})

function goClass(number) {
  
  for (var i = 1; i < 5; i++) {
      if  (i != number) {
        $('.canvas').removeClass('canvas--state' + i);
      }
  }
  
  $('.canvas').addClass('canvas--state' + number)
}

            
          
!
999px
Loading ..................

Console