API tools faq
paste
Advertisement
AbdulMuttaqin

[HTML] Create Cute Monster With CSS

AbdulMuttaqin
Aug 14th, 2018
492
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.09 KB | None | 0 0
raw download clone embed print report
  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
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!