ぬえさぶろうのAnimate放送部

必要なパーツ

動作の流れ

input要素のチェックボックスを使って、オン・オフ時の見せ方を変えます。CSSのみで実装できるので、カラーや大きさなど、簡単にカスタマイズできます。

コード

HTML

<div class="moreWrap">
    <input type="checkbox" id="read" class="moreTrigger">
        <label class="moreBtn" for="read"> 
        </label >
        <div class="more">
            <p>長いコンテンツの一部を隠して「続きを読む」</p>
            <p>このページはダミーページです。
            文章の空白やレイアウトを確認するために挿入しているモノです。
            フォントの大きさや行間などを確認してください。
            このページはダミーページです。
            文章の空白やレイアウトを確認するために挿入しているモノです。
            フォントの大きさや行間などを確認してください。
            </p>
            <p>・</p>
            <p>・</p>
            <p>・</p>
            <p>・</p>
    <!--/.more--></div>
<!--/.moreWrap--></div>

CSS

/*続きを読むを実装 */
.moreWrap {
  width: 100%;
  margin: 2em auto;
  padding: 2em;
  position: relative;
}
/*続きを読むボタン*/
.moreBtn {
  width: 10em;
  margin: auto;
  padding: 0.5em 0;
  background: #7E9374;
  border-radius: 10em;
  text-align: center;
  color: #fff;
  position: absolute;
  right: 0;
  bottom: 3em;
  left: 0;
    overflow: hidden;
  opacity: 0.6;
  transition: 0.2s ease;
  cursor: pointer;
  z-index: 2;
}
.moreBtn:hover {
  background: #0D3B2B;
  opacity: 0.8;
}
.moreBtn::after {
  content: "続きを読む";
}
.moreBtn::before {
  content: '';
  width: 130%;
  height: 100%;
  position: absolute;
  top: 0;
  right: -135%;
  z-index: -1;
  transform: skewX(-45deg);
}
/*アニメーション*/
@keyframes skew {
  100% {
  /*right -135％を、最後-10％で止まるように設定*/
    right: -10%;
  }
}
.moreBtn:hover::before {
  animation: skew 0.3s forwards;
}
.more {
  position: relative;
  overflow: hidden;
  /*通常時、表示できる高さを設定*/
  height: 16em;
}
.more::before {
  content: "";
  display: block;
  /*文字を隠す*/
  background-image: linear-gradient(rgba(229, 222, 203, 0)0%, 
      rgba(229, 222, 203, 0.8)80%);
  width: 100%;
  height: 16em;
  position: absolute;
  bottom: 0;
  top: 0;
  transition: 0.6s;
}
----------------------------------------
    チェックボタンを押されたら
    ------------------------------------------
.moreTrigger {
  display: none;
}
.moreTrigger:checked ~ .moreBtn {
  bottom: -1.5em;
}
.moreTrigger:checked ~ .moreBtn::after {
  content: '閉じる';
}
.moreTrigger:checked ~ .more {
  height: auto;
}
.moreTrigger:checked ~ .more::before {
  display: none;
}