<hgroup class="sitename"> <h2> <a href="http://www.old-pine.net/" title="ホーム"> <div class="ripple site-name-anime">古松 | 情報システムにプロのサポート</div> </a> </h2> </hgroup>
.sitename a { color: #222; text-decoration: none; } .sitename { height: 24px; } .sitename:before { content: ''; position: absolute; background-color: #f44; visibility: hidden; z-index: -1; background-image: -webkit-linear-gradient( left, rgba( 243, 245, 246, 1) 25%, rgba( 255, 255, 255, 0.1) 50%, rgba( 243, 245, 246, 1) 75%); background-image: -moz-linear-gradient( left, rgba( 243, 245, 246, 1) 25%, rgba( 255, 255, 255, 0.1) 50%, rgba( 243, 245, 246, 1) 75%); background-image: -o-linear-gradient( left, rgba( 243, 245, 246, 1) 25%, rgba( 255, 255, 255, 0.1) 50%, rgba( 243, 245, 246, 1) 75%); background-image: linear-gradient(to right, rgba( 243, 245, 246, 1) 25%, rgba( 255, 0, 0, 0.1) 50%, rgba( 243, 245, 246, 1) 75%); color: white; height: 24px; width: 10%; -webkit-animation: 3s ease-out 0s infinite normal move_eye; -moz-animation: 3s ease-out 0s infinite normal move_eye; -o-animation: 3s ease-out 0s infinite normal move_eye; animation: 3s ease-out 0s infinite normal move_eye; } @-webkit-keyframes move_eye { from { margin-left: -20%; visibility: visible; } to { margin-left: 100%; background-color: #fff; } } @-moz-keyframes move_eye { from { margin-left: -20%; visibility: visible; } to { margin-left: 100%; background-color: #fff; } } @-o-keyframes move_eye { from { margin-left: -20%; visibility: visible; } to { margin-left: 100%; background-color: #fff; } } @keyframes move_eye { from { margin-left: -20%; visibility: visible; } to { margin-left: 100%; background-color: #fff; } }
実際の効果: