前端入门学习案例1 – 致敬卓别林

实现效果:

 

要求:

1. 用html+css实现整体效果(致敬卓别林)

2. Hover到Laughter上是,展示其他文案

3. 点击中间的小胡子,帽子会有个掀开的动效

在线练习工具: https://www.fed123.com/code?code=fed-hw-zbl

PS:感谢作品来源 comehope  大神提供的原作,本练习基于此做了稍许改动。

代码示例:

<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>FED123 demo
    </title>
    <style>
      .chaplin {
        width: 40em;
        height: 30em;
        font-size: 10px;
        background-color: #eee;
        box-shadow: 0 0 3em rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        color: #555;
        transition: 1s linear;
      }
      .chaplin:hover {
        box-shadow: 0 0 4em 1em rgba(0, 0, 0, 0.2);
      }
      .hat {
        position: absolute;
        width: 6.4em;
        height: 4.6em;
        background-color: currentColor;
        border-radius: 2.3em 2.3em 0 0;
        top: 1.4em;
        display: flex;
        justify-content: center;
        transition: 0.5s ease-in;
      }
      .hat::before {
        content: '';
        position: absolute;
        width: 10em;
        height: 0.8em;
        background-color: currentColor;
        border-radius: 0.4em;
        top: calc(100% + 0.4em);
      }
      .hat.open {
        transform: rotate(-45deg);
        transform-origin: 0% 100%;
        
      }
      .beard {
        position: absolute;
        width: 1.5em;
        height: 0;
        top: 11.6em;
        border: solid transparent;
        border-width: 0 0.4em 1em 0.4em;
        border-bottom-color: currentColor;
      }
      .stick {
        position: absolute;
        width: 0.8em;
        height: 10.5em;
        background-color: currentColor;
        bottom: 0;
        left: calc((100% - (5.6em - 0.8em)) / 2);
      }
      .stick::before {
        content: '';
        position: absolute;
        box-sizing: border-box;
        width: 5.6em;
        height: 3em;
        border: 0.8em solid;
        border-radius: 5.6em 5.6em 0 0;
        border-bottom: none;
        top: -3em;
      }
      .stick::after {
        content: '';
        position: absolute;
        width: 0.8em;
        height: 0.8em;
        background-color: currentColor;
        border-radius: 50%;
        left: calc(5.6em - 0.8em);
        top: -0.4em;
      }
      .quote {
        position: absolute;
        left: 50%;
        bottom: 2.5em;
        font-family: sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        display: flex;
        flex-direction: column;
      }
      .quote span:nth-child(1) {
        letter-spacing: 0.05em;
      }
      .quote span:nth-child(2) {
        font-size: 1.6em;
      }
      .quote span:nth-child(1),
      .quote span:nth-child(3) {
        filter: opacity(0);
        transition: 1s ease-in;
      }
      .chaplin:hover .quote span:nth-child(1),
      .chaplin:hover .quote span:nth-child(3) {
        filter: opacity(1);
      }
    </style>
  </head>
  <body>
    <figure class="chaplin">
      <span class="hat">
      </span>
      <span class="beard">
      </span>
      <span class="stick">
      </span>
      <p class="quote">
        <span>a day without
        </span>
        <span>laughter
        </span>
        <span>is a day wasted
        </span>
      </p>
    </figure>
    <script>
      document.addEventListener("DOMContentLoaded", ()=>{
        let beard = document.querySelector(".beard");
        let hat = document.querySelector(".hat");
        beard.addEventListener("click", (e)=>{
          if(!hat.classList.contains("open"))
            hat.classList.add("open")
          else
            hat.classList.remove("open")
        });
      });
    </script>
  </body>
</html>

 

fed123版权所有,转载请保留出处:前端123学堂 » 前端入门学习案例1 – 致敬卓别林

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏