
波紋が広がるアニメーションの丸ボタン
2014年5月26日CSSテクニック
CSS3で波紋が広がるアニメーションの丸ボタンを作ります。地図及び案内図上で施設や設備を紹介したい時に役立ちます。
HTML
<div id="bg"> <div class="btn"> <a href="javascript:void(0);"> <span class="mainLight"></span> <span class="ripple"></span> </a> </div> <div class="btn"> <a href="javascript:void(0);"> <span class="mainLight"></span> <span class="ripple"></span> </a> </div> <div class="btn"> <a href="javascript:void(0);"> <span class="mainLight"></span> <span class="ripple"></span> </a> </div> <div class="btn"> <a href="javascript:void(0);"> <span class="mainLight"></span> <span class="ripple"></span> </a> </div> <div class="btn"> <a href="javascript:void(0);"> <span class="mainLight"></span> <span class="ripple"></span> </a> </div> </div>
CSS
#bg { width: 100%; background-color: #000000; padding: 200px 0; text-align: center; } .btn { display: inline-block; position: relative; z-index: 0; width: 20px; height: 20px; margin: 0 20px; } .mainLight { display: block; position: absolute; top: 0; z-index: 2; width: 20px; height: 20px; background-color: #ffffff; border-radius: 50%; transition: .2s linear; -webkit-transition: .2s linear; -moz-transition: .2s linear; -o-transition: .2s linear; box-shadow: 0 0 5px rgba(255,255,255,1); } a:hover .mainLight { background-color: #52d3ff; box-shadow: 0 0 10px rgba(82,211,255,1); } .ripple { display: block; position: absolute; top: 0; z-index: 1; width: 20px; height: 20px; background-color: #52d3ff; border-radius: 50%; box-shadow: 0 0 5px rgba(82,211,255,1); animation-name: rippleAnimation; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-duration: 2s; -webkit-animation-name: rippleAnimation; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 2s; -moz-animation-name: rippleAnimation; -moz-animation-timing-function: ease-out; -moz-animation-iteration-count: infinite; -moz-animation-duration: 2s; } @keyframes rippleAnimation { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(2.5, 2.5); opacity: 0; } } @-webkit-keyframes rippleAnimation { 0% { -webkit-transform: scale(1, 1); opacity: 1; } 100% { -webkit-transform: scale(2.5, 2.5); opacity: 0; } } @-moz-keyframes rippleAnimation { 0% { -moz-transform: scale(1, 1); opacity: 1; } 100% { -moz-transform: scale(2.5, 2.5); opacity: 0; } }