Advertisement
AbdulMuttaqin

[HTML] Create Cute Monster With CSS

Aug 14th, 2018
455
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.09 KB | None | 0 0
  1. <html>
  2. <head>
  3. <style>
  4. body {
  5.     background: #667db6;
  6.     background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
  7.     overflow: hidden;
  8.   }
  9.   .ufo {
  10.     font-size: 25vmin;
  11.     position:absolute;
  12.     width: 100%;
  13.     height:100%;
  14.     cursor: pointer;
  15.   }
  16.  
  17.   .monster {
  18.     font-size: 0.7em;
  19.     margin: 0 auto;
  20.     width: 1em;
  21.     height: 1.3em;
  22.     border-radius: 0.5em 0.5em 0em 0em / 0.6em 0.6em 0em 0em;
  23.     box-sizing: content-box;
  24.     border: 0.07em solid transparent;
  25.     position: relative;
  26.     top: 2em;
  27.     user-select: none;
  28.     cursor: grab;
  29.   }
  30.  
  31.   .monster.small {
  32.     font-size: 4rem;
  33.   }
  34.  
  35.   .body {
  36.     width: 100%;
  37.     height: 100%;
  38.     background-color: currentColor;
  39.     border-radius: inherit;
  40.     position: relative;
  41.     transform-origin: bottom center;
  42.     animation: bouncebody alternate infinite 400ms 40ms ease-in-out;
  43.   }
  44.   .eyes, .eye-lid {
  45.     text-align: center;
  46.     display: flex;
  47.     font-size: 0.65em;
  48.     width: 1em;
  49.     height: 1em;
  50.     position: absolute;
  51.     left: 0.25em;
  52.     top: 0.3em;
  53.   }
  54.  
  55.   .eye {
  56.     position: relative;
  57.     display: inline-block;
  58.     border-radius: 50%;
  59.     width: 75%;
  60.     height: 75%;
  61.     background-color: black;
  62.     border-radius: 50%;
  63.     transform-origin: 20px 23px;
  64.   }
  65.   .eye-lid{
  66.     background-color: white;
  67.     border-radius: 0.5em 0.5em 0.5em 0.5em / 0.6em 0.6em 0.4em 0.4em;
  68.     box-shadow: 0.03em 0.14em rgba(0,0,0,0.1);
  69.     animation-name: blink;
  70.     animation-duration: 20s;
  71.     animation-iteration-count: infinite;
  72.   }
  73.   .eye:after { /*pupil*/
  74.     --pupil-size: 0.2em;
  75.     position: absolute;
  76.     top: 0.05em;
  77.     left: 0.3em;
  78.     width: var(--pupil-size);
  79.     height: var(--pupil-size);
  80.     background: white;
  81.     border-radius: 50%;
  82.     content: " ";
  83.   }
  84.  
  85.   .mouth {
  86.     font-size: 0.2em;
  87.     width: 1em;
  88.     height: 0.3em;
  89.     background: black;
  90.     border-radius: 1.5em 1.5em 0.5em 0.5em;
  91.     position: absolute;
  92.     bottom: 0.8em;
  93.     left: 50%;
  94.     transform: translateX(-50%);
  95.   }
  96.  
  97.   .mouth::before {
  98.     width: 50%;
  99.     height: 30%;
  100.     display: block;
  101.     content: ' ';
  102.     background-color: #ff8800;
  103.     border-radius: 50% / 100% 100% 50% 50%;
  104.     position:absolute;
  105.     top: 50%;
  106.     left: 50%;
  107.     transform: translateY(-10%) translateX(-50%);
  108.   }
  109.  
  110.   .vampi-mouth {
  111.     position: absolute;
  112. background: black;
  113.     overflow: hidden;
  114.     font-size: 0.3em;
  115.     width: 1em;
  116.     height: 0.7em;
  117.     left: 50%;
  118.     bottom: 0.3em;
  119.     transform: translateX(-50%);
  120.     border-radius: 0.7em 0.7em 1.2em 1.2em;
  121.   }
  122.     .vampi-tooth::before,
  123.   .vampi-tooth::after,
  124.   .vampi-tooth {
  125.     --teeth-size: 0.25em;
  126.     display: block;
  127.     width: 0;
  128.     height: 0;
  129.     font-size: inherit;
  130.     border-left: calc(var(--teeth-size) / 2) solid transparent;
  131.     border-right: calc(var(--teeth-size) / 2) solid transparent;
  132.     border-top: var(--teeth-size) solid #fff;
  133.     position: absolute;
  134.     top: 0;
  135.     left: 50%;
  136.     transform: translateX(-50%);
  137.   }
  138.  
  139.   .vampi-tooth:before {
  140.     content: '';
  141.     transform: translateX(-150%) translateY(-100%);
  142.   }
  143.   .vampi-mouth::before {
  144.     content: '';
  145.     display: block;
  146.     background: #ff8800;
  147.     width: 100%;
  148.     height: 0.2em;
  149.     position: absolute;
  150.     bottom: 0;
  151.     border-radius: 50% 50% 0 0;
  152.   }
  153.   .vampi-tooth:after {
  154.     content: '';
  155.     transform: translateX(50%) translateY(-100%);
  156.   }
  157.  
  158.   .ear {
  159.     position: absolute;
  160.     top: -1.2em;
  161.     transform-origin: bottom center;
  162.     font-size: 0.3em;
  163.     width: .8em;
  164.     height: 1.5em;
  165.     left: 18%;
  166.     transform: rotate(-10deg);
  167.     animation: antena_e 5s infinite;
  168.   }
  169.   .ear + .ear {
  170.     left: auto;
  171.     right: 18%;
  172.     transform: rotate(10deg);
  173.     animation: antena_d 5s infinite;
  174.   }
  175.  
  176.   .ear:before {
  177.     content: '';
  178.     display: block;
  179.     width: .8em;
  180.     height: .8em;
  181.     position: absolute;
  182.     z-index: 2;
  183.     left: 0;
  184.     border-radius: 50%;
  185.     background: currentColor;
  186.     box-shadow: inset -.1em -.08em rgba(0,0,0,.1);
  187.   }
  188.  
  189.   .ear:after {
  190.     content: '';
  191.     display: block;
  192.     width: 0.3em;
  193.     height: 100%;
  194.     position: absolute;
  195.     top: .2em;
  196.     left: .3em;
  197.     background: currentColor;
  198.   }
  199.   @keyframes blink {
  200.     0%, 2%, 34%, 36%, 60%, 62%, 79%, 81%, 100% { transform: scaleX(1) scaleY(1); }
  201.     1%, 35%, 61%, 80% { transform: scaleX(1.3) scaleY(0.1); }
  202.   }
  203.  
  204.   @keyframes bounce {
  205.     to { transform: translateY(4%); }
  206.   }
  207.  
  208.   @keyframes bouncebody {
  209.     to { transform: scaleX(1.03) scaleY(0.97); }
  210.   }
  211.  
  212.   @keyframes antena_d { 50% {transform: rotate(20deg);} }
  213.   @keyframes antena_e { 50% {transform: rotate(-20deg);} }
  214. </style>
  215.     <title>Alien</title>
  216.     <link rel=stylesheet href="style.css"/>
  217. </head>
  218.  
  219. <body>
  220.     <div class="ufo">
  221.         <div class="monster" style="color: #7cb342">
  222.           <div class="body">
  223.             <div class="ear"></div>
  224.             <div class="ear"></div>
  225.             <div class="vampi-mouth">
  226.               <div class="vampi-tooth"></div>
  227.             </div>
  228.           </div>
  229.           <div class="eye-lid">
  230.             <div class="eyes">
  231.               <div class="eye"></div>
  232.             </div>
  233.           </div>
  234.         </div>
  235.       </div>
  236.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  237.     <script src="script.js"></script>  
  238.    <script>$(document).on('mousemove', function(e){
  239.         var eye_x = $('.eye').offset().left - $('.eye').width()/2;
  240.         var eye_y = $('.eye').offset().top - $('.eye').height()/2;
  241.    
  242.         var theta = (Math.atan2((e.pageY - eye_y),(e.pageX - eye_x)) *(180/Math.PI))+85;
  243.         var mousex_constrained = constrain(e.pageX);
  244.         var mousey_constrained = constrain(e.pageY);
  245.         var transformString = "rotateZ("+theta+"deg)" + " translateX("+mousex_constrained+"px)" + " translateY("+mousey_constrained+"px)";
  246.        
  247.         $('.eye').css("transform", transformString);
  248.  
  249.         console.log(transformString);
  250.      });
  251.  
  252.      function constrain (n) {
  253.          return -n/150;
  254.      }
  255. </script>
  256. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement