LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
      
CSS
      html {
        positon:relative;
        height: 100%;
        width:100%;
        background-color:#666;
      }
      html:before {
        content:'';
        height:100%;
        vertical-align:middle;
        width:50%;
        display:inline-block;
      }
      body {
        display:inline-block;
        position:relative;
        font-size:12px;
        line-height:20px;
        width:75vmin;
        height:75vmin;
        background-color:#003;
        padding:0;
        margin:0 0 0 -37.5vmin;
        vertical-align:middle;
        box-shadow: 1px 1px 3px #ddd, -2px -2px 5px #333;
        border-radius:.66vmin;
      }
      .positioner {
        position:absolute;
        height:10%;
        width:10%;
      }
      .ball {
        position:absolute;
        background-color:rgb(150,150,255);
        width:10%;
        height:10%;
        border-radius:50%;
        top:45%;
        left:45%;
        -webkit-transition:left .66s ease-out, top  .66s ease-out;
        transition:left 1s ease-out, top 1s ease-out;
        box-shadow: -1px -1px 3px #fff, 2px 2px 5px #000;
      }
      
      [id^="row-1"],
      [id^="row-1"]:hover  ~ .ball {
        left: 0;
      }
      [id^="row-2"],
      [id^="row-2"]:hover  ~ .ball {
        left: 10%;
      }
      [id^="row-3"],
      [id^="row-3"]:hover  ~ .ball {
        left: 20%;
      }
      [id^="row-4"],
      [id^="row-4"]:hover  ~ .ball {
        left: 30%;
      }
      [id^="row-5"],
      [id^="row-5"]:hover  ~ .ball {
        left: 40%;
      }
      [id^="row-6"],
      [id^="row-6"]:hover  ~ .ball {
        left: 50%;
      }
      [id^="row-7"],
      [id^="row-7"]:hover  ~ .ball {
        left: 60%;
      }
      [id^="row-8"],
      [id^="row-8"]:hover  ~ .ball {
        left: 70%;
      }
      [id^="row-9"],
      [id^="row-9"]:hover  ~ .ball {
        left: 80%;
      }
      [id^="row-10"],
      [id^="row-10"]:hover  ~ .ball {
        left: 90%;
      }
      [id$="col-1"],
      [id$="col-1"]:hover  ~ .ball {
        top: 0;
      }
      [id$="col-2"],
      [id$="col-2"]:hover  ~ .ball {
        top: 10%;
      }
      [id$="col-3"],
      [id$="col-3"]:hover  ~ .ball {
        top: 20%;
      }
      [id$="col-4"],
      [id$="col-4"]:hover  ~ .ball {
        top: 30%;
      }
      [id$="col-5"],
      [id$="col-5"]:hover  ~ .ball {
        top: 40%;
      }
      [id$="col-6"],
      [id$="col-6"]:hover  ~ .ball {
        top: 50%;
      }
      [id$="col-7"],
      [id$="col-7"]:hover  ~ .ball {
        top: 60%;
      }
      [id$="col-8"],
      [id$="col-8"]:hover  ~ .ball {
        top: 70%;
      }
      [id$="col-9"],
      [id$="col-9"]:hover  ~ .ball {
        top: 80%;
      }
      [id$="col-10"],
      [id$="col-10"]:hover  ~ .ball {
        top: 90%;
      }

Description

Use the :hover pseudo element, CSS transition animations and the adjacent sibling selector ( ~ ) to make an element follow around the user's pointer
Term
Mon, 11/27/2017 - 21:22

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv