蟹召還
蟹召還CSS
[[module css]] #header h2 span{ font-size:0px; padding: 4px; } #header h2:after{ padding: 19px 0; font-weight: bold; color: #f0f0c0; text-shadow: 1px 1px 1px #000; text-shadow: 1px 1px 1px rgba(0, 0, 0, .8); white-space: pre ; content: "🦀🦀🦀🦀🦀🦀🦀🦀"; } #login-status:before { content: "🦀"; position: absolute; z-index: -1; font-size: 2em; -webkit-animation: jump2 4s linear 0s infinite alternate; animation: jump2 4s linear 0s infinite alternate; } #container-wrap-wrap { overflow-x: hidden; } #container:after { content: "🦀"; position: absolute; top: 40px; font-size: 2em; -webkit-animation: jump 4s linear 0s infinite alternate-reverse; animation: jump 4s linear 0s infinite alternate-reverse; } #container:before { content: "🦀"; position: absolute; top: 80px; font-size: 2em; -webkit-animation: jump 4s linear 0s infinite alternate; animation: jump 4s linear 0s infinite alternate; } @-webkit-keyframes jump { 0% { transform: rotate(-10deg); left: -10vw; } 5% { transform: rotate(10deg); } 10% { transform: rotate(-10deg); } 15% { transform: rotate(10deg); } 20% { transform: rotate(-10deg); } 25% { transform: rotate(10deg); } 30% { transform: rotate(-10deg); } 35% { transform: rotate(10deg); } 40% { transform: rotate(-10deg); } 45% { transform: rotate(10deg); } 51% { transform: rotate(-10deg); } 55% { transform: rotate(10deg); } 60% { transform: rotate(-10deg); } 65% { transform: rotate(10deg); } 70% { transform: rotate(-10deg); } 76% { transform: rotate(10deg); } 80% { transform: rotate(-10deg); } 85% { transform: rotate(10deg); } 90% { transform: rotate(-10deg); } 96% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); left: 100vw; } } @keyframes jump { 0% { transform: rotate(-10deg); left: -10vw; } 5% { transform: rotate(10deg); } 10% { transform: rotate(-10deg); } 15% { transform: rotate(10deg); } 20% { transform: rotate(-10deg); } 25% { transform: rotate(10deg); } 30% { transform: rotate(-10deg); } 35% { transform: rotate(10deg); } 40% { transform: rotate(-10deg); } 45% { transform: rotate(10deg); } 51% { transform: rotate(-10deg); } 55% { transform: rotate(10deg); } 60% { transform: rotate(-10deg); } 65% { transform: rotate(10deg); } 70% { transform: rotate(-10deg); } 76% { transform: rotate(10deg); } 80% { transform: rotate(-10deg); } 85% { transform: rotate(10deg); } 90% { transform: rotate(-10deg); } 96% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); left: 100vw; } } @-webkit-keyframes jump2 { 0% { transform: rotate(-10deg); left: -10%; } 5% { transform: rotate(10deg); } 10% { transform: rotate(-10deg); } 15% { transform: rotate(10deg); } 20% { transform: rotate(-10deg); } 25% { transform: rotate(10deg); } 30% { transform: rotate(-10deg); } 35% { transform: rotate(10deg); } 40% { transform: rotate(-10deg); } 45% { transform: rotate(10deg); } 51% { transform: rotate(-10deg); } 55% { transform: rotate(10deg); } 60% { transform: rotate(-10deg); } 65% { transform: rotate(10deg); } 70% { transform: rotate(-10deg); } 76% { transform: rotate(10deg); } 80% { transform: rotate(-10deg); } 85% { transform: rotate(10deg); } 90% { transform: rotate(-10deg); } 96% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); left: 100%; } } @keyframes jump2 { 0% { transform: rotate(-10deg); left: -10%; } 5% { transform: rotate(10deg); } 10% { transform: rotate(-10deg); } 15% { transform: rotate(10deg); } 20% { transform: rotate(-10deg); } 25% { transform: rotate(10deg); } 30% { transform: rotate(-10deg); } 35% { transform: rotate(10deg); } 40% { transform: rotate(-10deg); } 45% { transform: rotate(10deg); } 51% { transform: rotate(-10deg); } 55% { transform: rotate(10deg); } 60% { transform: rotate(-10deg); } 65% { transform: rotate(10deg); } 70% { transform: rotate(-10deg); } 76% { transform: rotate(10deg); } 80% { transform: rotate(-10deg); } 85% { transform: rotate(10deg); } 90% { transform: rotate(-10deg); } 96% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); left: 100%; } } [[/module]]
ページリビジョン: 2, 最終更新日時: 01 Apr 2018 08:45