* { margin: 0; padding: 0; } body{ background: #f5f5f5; font-family: arial; } #wrap { text-align: center; margin: 0 auto; padding: 10px; } .list01 li { cursor: pointer; padding: 8px; position: relative; margin-bottom: 1px; list-style: none; } .list01 li span { border: solid 1px #8EC5E6; background-color: #E7F2FA; display: block; z-index: -1; width: 100%; position: absolute; left: 0; top: 0; border-radius: 3px; animation: buller 0.2s linear; -webkit-animation: buller 0.2s linear; } @keyframes buller { 0%{box-shadow: 0px 3px 2px #afbed6, 0px -3px 2px #afbed6;} 100%{box-shadow: 0px 0px 0px #afbed6, 0px 0px 0px #afbed6;} } @-webkit-keyframes buller { 0%{-webkit-box-shadow: 0px 3px 2px #a9ccd6, 0px -3px 2px #a9ccd6;} 100%{-webkit-box-shadow: 0px 0px 0px #a9ccd6, 0px 0px 0px #a9ccd6;} }
<div id="wrap"> <ul class="list01"> <li>List 01</li> <li>List 02</li> <li>List 03</li> <li>List 04</li> <li>List 05</li> <li>List 06</li> </ul> </div>