【代码分享】捕捉一只耿鬼（可复制源代码）-交流学习-云星日记

【代码分享】捕捉一只耿鬼（可复制源代码）

admin

发布于 3月前 1216 8

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>耿鬼</title>
    <style>
      body{background:#fff;font-family:'Comfortaa',sans-serif;}*{box-sizing:border-box;}*:before,*:after{content:'';position:absolute;}main{width:400px;height:400px;margin:auto;text-align:center;}.gengar{background:#9179c6;margin:3em auto 5em;width:310px;height:350px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;margin:auto;position:relative;}.gengar .ear{width:150px;height:150px;background:#9179c6;border-radius:10px;position:relative;transform:rotate(-120deg) skewX(-40deg) scale(1,0.866);position:absolute;top:0;}.gengar .ear.right{position:absolute;background:#9179c6;transform:rotate(110deg) skewX(40deg) scale(1,0.866);right:0;}.gengar .hair{width:0;height:0;position:absolute;top:-45px;left:50%;margin-left:-45px;transform:rotate(10deg);border-bottom:100px solid #9179c6;border-left:70px solid transparent;border-right:70px solid transparent;}.gengar .hair.two,.gengar .hair.two:before,.gengar .hair.two:after{transform:rotate(-30deg);margin-left:-60px;top:-35px;border-bottom:80px solid #9179c6;border-left:30px solid transparent;border-right:30px solid transparent;}.gengar .hair.two:before{transform:rotate(60deg) translate(130px,-50px);}.gengar .hair.two:after{transform:rotate(-15deg) translate(-10px,48px);border-bottom:40px solid #9179c6;}.gengar .eye{width:100px;height:50px;background:#f6b392;border-radius:0 0 200px 200px;position:absolute;top:33%;overflow:hidden;transition:0.3s ease;}.gengar .eye:before{width:20px;height:35px;background:black;border-radius:100%;transform:rotate(-35deg);}.gengar .eye:after{width:8px;height:8px;border-radius:50%;background:white;left:43%;top:10px;}.gengar .eye.one{left:50%;transform:rotate(35deg);margin-left:-120px;}.gengar .eye.two{transform:rotate(-35deg) scaleX(-1);right:50%;margin-right:-120px;}.gengar .mouth{position:absolute;left:50%;margin-left:-125px;top:7%;width:250px;height:190px;border-radius:50%;box-shadow:0 75px 0 -10px white;transition:0.3s ease;}.gengar .leg{position:absolute;width:320px;height:130px;border-top-left-radius:200px;border-top-right-radius:200px;border:80px solid #7a63ad;border-bottom:0;top:75%;left:0;right:0;margin:auto;z-index:-1;}.gengar .leg:before,.gengar .leg:after{height:20px;border-radius:10px;width:85px;bottom:-5px;background:#7a63ad;}.gengar .leg:before{left:-84.5px;}.gengar .leg:after{right:-84.5px;}.gengar .hand{position:absolute;width:85px;height:140px;background:#9179c6;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;transform:rotate(59deg);top:31%;left:-40px;}.gengar .hand.two{transform:rotate(-59deg);left:auto;right:-40px;}input[type='checkbox']{height:0;width:0;visibility:hidden;}label{background:#eee;width:160px;height:75px;border-radius:80px;display:inline-block;margin:4em auto;position:relative;cursor:pointer;}label span{position:absolute;top:5px;left:5px;width:65px;height:65px;background:#333;border-radius:50%;transition:0.5s;border:3px solid #222;background:radial-gradient(
            #fff,#fff 15%,#333 15%,#333 24%,transparent 24%
          ),linear-gradient(
            to bottom,#d02222,#d02222 45%,#222 45%,#222 52%,#fff 52%
          );}input:checked + label span{left:90px;transform:rotate(360deg);background:#f38dcb;border-radius:200% 320% 150% 150%;border-radius:50%;background-repeat:no-repeat;background-image:radial-gradient(ellipse,black 50%,transparent 50%),radial-gradient(ellipse,black 50%,transparent 50%),linear-gradient(#333,#333);background-size:6px 6px,6px 6px,25px 2px;background-position:28% 50%,80% 50%,55% 64%;}input:checked ~ .gengar .eye{background:black;width:16px;height:16px;border-radius:50%;}input:checked ~ .gengar .eye.one{margin-left:-60px;}input:checked ~ .gengar .eye.two{margin-right:-60px;}input:checked ~ .gengar .eye:before,input:checked ~ .gengar .eye:after{content:none;}input:checked ~ .gengar .mouth{margin-left:-100px;top:35%;width:210px;height:50px;border-radius:50%;box-shadow:0 15px 0 -10px #131313;}</style>
  </head>
  <body>
    <main>
      <input type="checkbox" id="ditto-me" />
      <label for="ditto-me"><span></span></label>
      <div class="gengar">
        <div class="ear left"></div>
        <div class="ear right"></div>
        <div class="hair"></div>
        <div class="hair two"></div>
        <div class="hand"></div>
        <div class="hand two"></div>
        <div class="mouth"></div>
        <div class="eye one"></div>
        <div class="eye two"></div>
        <div class="leg"></div>
      </div>
    </main>
  </body>
</html>

重要声明 本帖标题：【代码分享】捕捉一只耿鬼（可复制源代码）
1、本论坛是以即时上载留言的方式运作，论坛对所有留言的真实性、完整性及立场等，不负任何法律责任。
2、一切留言之言论只代表留言者个人意见，并非本网站之立场，读者及用户不应信赖内容，并应自行判断内容之真实性。
3、用户切勿撰写粗言秽语、诽谤、渲染色情暴力或人身攻击的言论，敬请自律。本网站保留一切法律权利。
4.版权归原作者及网站所有。若有内容侵犯了您的权益，请联系我们，我们将在三日内删除。
5.最终解释权归云星论坛所有
除非注明，本帖由admin在本站《交流学习》分类版块发布，转载请注明出处！

最新回复 (8)