はてなブログのカスタムCSSで遊びませう

はてなブログのカスタムCSSで遊びませう

はてなブログの装いを編み出すことは、諸兄もご承知のとおりでございましょう。しかしながら、カスタムCSSを自在にいじくり回すことができた経験をお持ちの方は、そう多くはあるまいかと申し上げたく存じます。

こちらに示すようなカスタムCSSの手法を取り入れれば、現在の拙者のブログのような、風変わりで面白い趣向を取り入れることもできるのでございます。

/* <system section="theme" selected="smooth"> */
@import "/css/theme/smooth/smooth.css";
/* </system> */

<style>
  html {
    height: 100%;
    overflow: hidden;
    background-color: #000;
  }

  html:before,
  html:after,
  body:before,
  body:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-image: url("https://pbs.twimg.com/profile_images/1243175796685983745/efRnTYKv_400x400.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    animation: rollingIcon 8s linear infinite;
    opacity: 0;
    border-radius: 50%;
  }

  @keyframes rollingIcon {
    0% {
      opacity: 1;
      top: 4%;
      left: 0;
      transform: ranslateX(0%) rotate(0deg);
    }
    5% {
      top: 4%;
      left: 20%;
      transform: translateX(-20%) rotate(-90deg);
    }
    10% {
      top: 4%;
      left: 40%;
      transform: translateX(-40%) rotate(-180deg);
    }
    15% {
      top: 4%;
      left: 60%;
      transform: translateX(-60%) rotate(-270deg);
    }
    20% {
      top: 4%;
      left: 80%;
      transform: translateX(-80%) rotate(-360deg);
    }
    25% {
      top: 4%;
      left: 100%;
      transform: translate(-100%, 0%) rotate(-450deg);
    }
    30% {
      top: 23.2%;
      left: 100%;
      transform: translate(-100%, -20%) rotate(-540deg);
    }
    35% {
      top: 42.4%;
      left: 100%;
      transform: translate(-100%, -40%) rotate(-630deg);
    }
    40% {
      top: 61.6%;
      left: 100%;
      transform: translate(-100%, -60%) rotate(-720deg);
    }
    45% {
      top: 80.8%;
      left: 100%;
      transform: translate(-100%, -80%) rotate(-810deg);
    }
    50% {
      top: 100%;
      left: 100%;
      transform: translate(-100%, -100%) rotate(-900deg);
    }
    55% {
      top: 100%;
      left: 80%;
      transform: translate(-80%, -100%) rotate(-990deg);
    }
    60% {
      top: 100%;
      left: 60%;
      transform: translate(-60%, -100%) rotate(-1080deg);
    }
    65% {
      top: 100%;
      left: 40%;
      transform: translate(-40%, -100%) rotate(-1170deg);
    }
    70% {
      top: 100%;
      left: 20%;
      transform: translate(-20%, -100%) rotate(-1260deg);
    }
    75% {
      top: 100%;
      left: 0;
      transform: translateY(-100%) rotate(-1350deg);
    }
    80% {
      top: 80%;
      left: 0;
      transform: translateY(-80%) rotate(-1440deg);
    }
    85% {
      top: 60%;
      left: 0;
      transform: translateY(-60%) rotate(-1530deg);
    }
    90% {
      top: 40%;
      left: 0;
      transform: translateY(-40%) rotate(-1620deg);
    }
    95% {
      top: 20%;
      left: 0;
      transform: translateY(-20%) rotate(-1710deg);
    }
    100% {
      opacity: 1;
      top: 4%;
      left: 0;
      transform: rotate(-360deg);
    }
  }

  html:after {
    animation-delay: 2s;
  }
  body:before {
    animation-delay: 4s;
  }
  body:after {
    animation-delay: 6s;
  }
</style>