Иконка трансформер

In this example below you will see how to do a Иконка трансформер with some HTML / CSS and Javascript

Не работает без js

Thumbnail
This awesome code was written by SharovAlex, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SharovAlex ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Иконка трансформер</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<html lang="ru">
    <head>
        <title>Иконка-трансформер, шаг 4</title>
        <meta charset="utf-8">
        <base href="/assets/course84/">
        <link href="material.css" rel="stylesheet">
    </head>
    <body class="blue-theme">
        <section class="card card-bordered">
            <div class="menu-icon">
                <span></span>
            </div>
        </section>
    </body> 
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/SharovAlex/andx418andx43aandx43eandx43dandx43aandx430-andx442andx440andx430andx43dandx441andx444andx43eandx440andx43candx435andx440-aBaBMm */
/*-----COMMON-----*/

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  src: local('Roboto Regular'), local('Roboto-Regular'), url('/assets/course84/font/roboto.woff') format('woff');
}
@font-face {
  font-family: 'icomoon';
  font-weight: normal;
  font-style: normal;
  src: url('/assets/course84/font/icomoon.woff?thm8m3') format('woff');
}
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
}
button::-moz-focus-inner {
  border: 0;
}
input:focus {
  outline: none;
}
input:invalid {
  box-shadow: none;
}
.btn {
  font-family: 'icomoon';
  font-size: 50px;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  position: relative;
  top: 150px;
  display: inline-block;
  width: 120px;
  height: 120px;
  cursor: pointer;
  text-transform: none;
  color: #555;
  border: none;
  border-radius: 50%;
  outline: none;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
  speak: none;
  /* Better Font Rendering =========== */

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*-----QUIZ-----*/

.theory-theme {
  text-align: center;
  background-color: #f5f5f5;
}
.purple-theme {
  background-color: #b388ff;
}
.yellow-theme {
  background-color: #ffff8d;
}
.green-theme {
  background-color: #b9f6ca;
}
.blue-theme {
  background-color: #84ffff;
}
.purple-theme .question {
  background-color: #7e57c2;
}
.purple-theme .question,
.blue-theme .question {
  color: #fff;
}
.yellow-theme .question {
  background-color: #ffeb3b;
}
.green-theme .question {
  background-color: #1de9b6;
}
.blue-theme .question {
  background-color: #03a9f4;
}
.card,
.fab {
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.card {
  width: 80%;
  min-height: 210px;
  margin: 50px auto;
  padding: 0;
  background-color: #fff;
}
.card-bordered {
  border: 1px solid #fff;
}
.quiz-result-true .fab {
  color: #fff;
  background-color: #00e676;
}
.quiz-result-false .fab {
  color: #fff;
  background-color: #ff5252;
}
.quiz-result-true,
.quiz-result-false {
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
  -webkit-transform: translateY(-500px);
  -ms-transform: translateY(-500px);
  transform: translateY(-500px);
}
.question {
  font-size: 18px;
  font-weight: normal;
  line-height: 26px;
  display: table;
  width: 100%;
  height: 142px;
  margin: 0;
  color: #616161;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.question span {
  display: table-cell;
  padding: 0 24px;
  vertical-align: middle;
}
.answers {
  position: relative;
  padding: 40px 24px 48px;
}
.answers > div {
  position: relative;
  padding: 14px 44px;
}
.answers .fab {
  position: absolute;
  top: -28px;
  right: 24px;
}
.fab {
  font-family: 'icomoon';
  font-size: 27px;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  width: 56px;
  height: 56px;
  cursor: pointer;
  -webkit-transition: all .3s;
  transition: all .3s;
  color: #555;
  border: none;
  border-radius: 50%;
  outline: none;
  background: #fff;
}
.fab-play {
  position: relative;
  top: 50px;
}
.fab:active,
.fab-play:active {
  background: #f5f5f5;
}
.fab-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  height: 40%;
  margin: auto;
}
.squares {
  position: relative;
  top: 150px;
  text-align: center;
}
.square {
  position: relative;
  display: inline-block;
  width: 20vw;
  height: 20vw;
  margin-left: 10px;
  background-color: #4285f6;
}
.square-experimental {
  background-color: #ff5252;
}
.row {
  margin-top: 25px;
  text-align: left;
}
.row:first-of-type {
  margin-top: 100px;
}
.yes-no-selector {
  margin: 0 auto;
  text-align: center;
}
.menu-icon {
  width: 85px;
  margin: 50px auto;
  padding: 40px 20px;
  cursor: pointer;
}

.menu-icon span {
    display: block;
    width: 100%;
    height: 12px;
    background-color: #40d47e;
    transition-duration: 0.7s;
    transition-timing-function: ease-in-out;
}

.menu-icon span::before,
.menu-icon span::after {
    content: "";
    display: block;
    width: 100%;
    height: 12px;
    background-color: #40d47e;
    transition-duration: 0.7s;
    transition-timing-function: ease-in-out;
}

.menu-icon span::before {
    transform: translate(0, -24px);
}

.menu-icon span::after {
    transform: translate(0, 12px);
}

.menu-icon-open span {
    transform: rotate(180deg);
}

.menu-icon-open span::before,
.menu-icon-open span::after {
    width: 60%;
}

.menu-icon-open span::before {
    transform: translate(45px, -14px) rotate(45deg);
}

.menu-icon-open span::after {
    transform: translate(45px, 2px) rotate(-45deg);
}

Comments