Pure CSS3 Tape Animation Effects

Pure CSS3 Tape Animation Effects: BY Michael18 Dec,2020; Tags:
CSS3 Animation Tape Animation

Introduction

This is a tape special effect drawn by pure CSS3. It uses CSS3 features to draw the tape, and at the same time uses CSS3 animation properties to achieve the tape rolling.

Instructions

HTML Body Code

<div class="container">
  <div class="mixtape-container">
    <div class="mixtape-inner">
      <div class="mixtape-inner-middle">
        <div class="mixtape-inner-tape">
          <div class="mixtape-inner-tape-ring">
            <span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>
        <div class="mixtape-inner-tape">
          <div class="mixtape-inner-tape-ring">
            <span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="mixtape-bottom">
      <div class="mixtape-bottom-circle"></div>
      <div class="mixtape-bottom-circle"></div>
      <div class="mixtape-bottom-circle"></div>
      <div class="mixtape-bottom-circle"></div>
    </div>
    <div class="mixtape-detail">
      <div class="screw"></div>
      <div class="screw"></div>
      <div class="screw"></div>
      <div class="screw"></div>
      <span class="tape-hole"></span><span class="tape-hole"></span><span class="tape-hole"></span>
    </div>
  </div>
</div>

Css Code

html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

.container {
  background-color: #3C3C3C;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-item: center;
  height: 100%;
}

.mixtape-container {
  background: black;
  width: 350px;
  height: 175px;
  transform: rotate(-3deg);
  border-radius: 10px;
  padding: 15px;
  position: relative;
  border: 1px solid #101010;
  box-shadow: 0 10px 38px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.22);
  border-bottom: 4px solid #111;
}
.mixtape-container:hover {
  transform: rotate(0deg);
}
.mixtape-inner {
  background: #101010;
  display: flex;
  width: 100%;
  height: 65%;
  border-radius: 30px/5px;
  justify-content: center;
  align-items: flex-end;
}

VIEW NOW