纯css布局小熊敲代码动画效果-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  .content {
  position: relative;
}

.container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#bongo-cat {
  position: absolute;
  height: 80vh;
  width: 80vw;
  top: 100vh;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.typing-animation {
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1200ms;
          animation-duration: 1200ms;
}

path#f1-l1 {
  -webkit-animation-name: typing-f1-l1;
          animation-name: typing-f1-l1;
}

path#f1-l2 {
  -webkit-animation-name: typing-f1-l2;
          animation-name: typing-f1-l2;
}

path#f1-l3 {
  -webkit-animation-name: typing-f1-l3;
          animation-name: typing-f1-l3;
}

path#f2-l4 {
  -webkit-animation-name: typing-f2-l4;
          animation-name: typing-f2-l4;
}

path#f2-l5 {
  -webkit-animation-name: typing-f2-l5;
          animation-name: typing-f2-l5;
}

path#f2-l6 {
  -webkit-animation-name: typing-f2-l6;
          animation-name: typing-f2-l6;
}

path#f3-l7 {
  -webkit-animation-name: typing-f3-l7;
          animation-name: typing-f3-l7;
}

path#f3-l8 {
  -webkit-animation-name: typing-f3-l8;
          animation-name: typing-f3-l8;
}

path#f3-l9 {
  -webkit-animation-name: typing-f3-l9;
          animation-name: typing-f3-l9;
}

@-webkit-keyframes typing-f3-l9 {
  0% {
    d: path("M8,25L8,25");
  }
  82% {
    d: path("M8,25L8,25");
  }
  92% {
    d: path("M8,25L96,25");
  }
  100% {
    d: path("M8,25L96,25");
  }
}

@keyframes typing-f3-l9 {
  0% {
    d: path("M8,25L8,25");
  }
  82% {
    d: path("M8,25L8,25");
  }
  92% {
    d: path("M8,25L96,25");
  }
  100% {
    d: path("M8,25L96,25");
  }
}
@-webkit-keyframes typing-f3-l8 {
  0% {
    d: path("M8,13L8,13");
  }
  68% {
    d: path("M8,13L8,13");
  }
  82% {
    d: path("M8,13L146,13");
  }
  100% {
    d: path("M8,13L146,13");
  }
}
@keyframes typing-f3-l8 {
  0% {
    d: path("M8,13L8,13");
  }
  68% {
    d: path("M8,13L8,13");
  }
  82% {
    d: path("M8,13L146,13");
  }
  100% {
    d: path("M8,13L146,13");
  }
}
@-webkit-keyframes typing-f3-l7 {
  0% {
    d: path("M0,1L0,1");
  }
  60% {
    d: path("M0,1L0,1");
  }
  68% {
    d: path("M0,1L96,1");
  }
  100% {
    d: path("M0,1L96,1");
  }
}
@keyframes typing-f3-l7 {
  0% {
    d: path("M0,1L0,1");
  }
  60% {
    d: path("M0,1L0,1");
  }
  68% {
    d: path("M0,1L96,1");
  }
  100% {
    d: path("M0,1L96,1");
  }
}
@-webkit-keyframes typing-f2-l6 {
  0% {
    d: path("M8,25L8,25");
  }
  54% {
    d: path("M8,25L8,25");
  }
  60% {
    d: path("M8,25L69,25");
  }
  100% {
    d: path("M8,25L69,25");
  }
}
@keyframes typing-f2-l6 {
  0% {
    d: path("M8,25L8,25");
  }
  54% {
    d: path("M8,25L8,25");
  }
  60% {
    d: path("M8,25L69,25");
  }
  100% {
    d: path("M8,25L69,25");
  }
}
@-webkit-keyframes typing-f2-l5 {
  0% {
    d: path("M8,13L8,13");
  }
  44% {
    d: path("M8,13L8,13");
  }
  54% {
    d: path("M8,13L114,13");
  }
  100% {
    d: path("M8,13L114,13");
  }
}
@keyframes typing-f2-l5 {
  0% {
    d: path("M8,13L8,13");
  }
  44% {
    d: path("M8,13L8,13");
  }
  54% {
    d: path("M8,13L114,13");
  }
  100% {
    d: path("M8,13L114,13");
  }
}
@-webkit-keyframes typing-f2-l4 {
  0% {
    d: path("M0,1L0,1");
  }
  30% {
    d: path("M0,1L0,1");
  }
  44% {
    d: path("M0,1L136,1");
  }
  100% {
    d: path("M0,1L136,1");
  }
}
@keyframes typing-f2-l4 {
  0% {
    d: path("M0,1L0,1");
  }
  30% {
    d: path("M0,1L0,1");
  }
  44% {
    d: path("M0,1L136,1");
  }
  100% {
    d: path("M0,1L136,1");
  }
}
@-webkit-keyframes typing-f1-l3 {
  0% {
    d: path("M8,25L8,25");
  }
  24% {
    d: path("M8,25L8,25");
  }
  30% {
    d: path("M8,25L61,25");
  }
  100% {
    d: path("M8,25L61,25");
  }
}
@keyframes typing-f1-l3 {
  0% {
    d: path("M8,25L8,25");
  }
  24% {
    d: path("M8,25L8,25");
  }
  30% {
    d: path("M8,25L61,25");
  }
  100% {
    d: path("M8,25L61,25");
  }
}
@-webkit-keyframes typing-f1-l2 {
  0% {
    d: path("M8,13L8,13");
  }
  14% {
    d: path("M8,13L8,13");
  }
  24% {
    d: path("M8,13L124,13");
  }
  100% {
    d: path("M8,13L124,13");
  }
}
@keyframes typing-f1-l2 {
  0% {
    d: path("M8,13L8,13");
  }
  14% {
    d: path("M8,13L8,13");
  }
  24% {
    d: path("M8,13L124,13");
  }
  100% {
    d: path("M8,13L124,13");
  }
}
@-webkit-keyframes typing-f1-l1 {
  0% {
    d: path("M0,1L0,1");
  }
  14% {
    d: path("M0,1L160,1");
  }
  100% {
    d: path("M0,1L160,1");
  }
}
@keyframes typing-f1-l1 {
  0% {
    d: path("M0,1L0,1");
  }
  14% {
    d: path("M0,1L160,1");
  }
  100% {
    d: path("M0,1L160,1");
  }
}
#paw-right--up,
#paw-right--down,
#paw-left--up,
#paw-left--down {
  -webkit-animation: blink 300ms infinite;
          animation: blink 300ms infinite;
}

#paw-right--up,
#paw-left--down {
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
#laptop__code {
  -webkit-transform: rotateX(-37deg) rotateY(-46deg) rotateZ(-23deg) translateX(8px) translateY(20px) translateZ(-50px);
          transform: rotateX(-37deg) rotateY(-46deg) rotateZ(-23deg) translateX(8px) translateY(20px) translateZ(-50px);
}
</style>

</head>
<body translate="no">
<div class="content">
<div class="container">
<svg id="bongo-cat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 787.3 433.8">
<defs>
<symbol id="eye" data-name="eye" viewBox="0 0 19.2 18.7">
<circle cx="9.4" cy="9.1" r="8"></circle>
<path d="M16.3,5.1a1.3,1.3,0,0,1-1.4-.3,7.2,7.2,0,0,0-4.5-2.6A7.2,7.2,0,0,0,5.5,3.5,6.8,6.8,0,0,0,2.8,7.8a6.8,6.8,0,0,0,1,4.8,6.2,6.2,0,0,0,4,2.7,6.1,6.1,0,0,0,4.6-.7,6.7,6.7,0,0,0,2.9-3.7,6.4,6.4,0,0,0-.5-4.5c-.1-.2.8-1,1.5-1.3s2.2,0,2.3.5a9.4,9.4,0,0,1-.2,7.2,9.4,9.4,0,0,1-5.1,5.1,9,9,0,0,1-7,.2A9.6,9.6,0,0,1,1,13.5,9.2,9.2,0,0,1,.4,6.6,8.9,8.9,0,0,1,4.6,1.3,9,9,0,0,1,11.2.2,9.3,9.3,0,0,1,16.7,4C16.9,4.3,17,4.8,16.3,5.1Z"></path>
</symbol>
<symbol id="paw-pads" data-name="paw-pads" viewBox="0 0 31.4 33.9">
<path d="M6.8,16a3.7,3.7,0,0,1,1.1,2.8,3.2,3.2,0,0,1-1.6,2.6L5,21.8H4.4a2.8,2.8,0,0,1-1.8.3A4.2,4.2,0,0,1,.2,19.1,7.7,7.7,0,0,1,0,17.6a2.8,2.8,0,0,1,.6-2,3.2,3.2,0,0,1,2.1-.8H4A5,5,0,0,1,6.8,16Zm7.3-4.8a1.8,1.8,0,0,0,.7-.5l.7-.4a3.5,3.5,0,0,0,1.1-1,3.2,3.2,0,0,0,.3-1.4,1.4,1.4,0,0,0-.2-.6,3.4,3.4,0,0,0-.3-2.4,3.2,3.2,0,0,0-2.1-1.5H13.1a4.7,4.7,0,0,0-1.6.4,2,2,0,0,0-.9.9l-.4.6v.4a6.1,6.1,0,0,0-.5,1.2,4.3,4.3,0,0,0,0,1.6,3.5,3.5,0,0,0,.5,2l.7.6a3.3,3.3,0,0,0,1.7.7A3,3,0,0,0,14.1,11.2ZM22.7,7l.6.2h.3A2.3,2.3,0,0,0,25,6.8l.4-.3.6-.3a7.5,7.5,0,0,0,1.5-.9,4.2,4.2,0,0,0,.8-1.2,1.9,1.9,0,0,0,.1-1.5A2.6,2.6,0,0,0,27.5,1,3.5,3.5,0,0,0,23.6.3a3.8,3.8,0,0,0-2,1.5,4.8,4.8,0,0,0-.7,2,3.6,3.6,0,0,0,.9,2.6ZM31,24.1a13.5,13.5,0,0,0-2.2-4.7,36.6,36.6,0,0,0-3.2-3.9,5.3,5.3,0,0,0-5-1.9,10.5,10.5,0,0,0-4.5,2.2A5.6,5.6,0,0,0,13.5,20a15.1,15.1,0,0,0,1.2,6.3c.8,2,1.7,4,2.6,5.9a1.6,1.6,0,0,0,1.5.8,1.7,1.7,0,0,0,1.9.9,17.1,17.1,0,0,0,8.7-4.8,8.2,8.2,0,0,0,1.7-2C31.6,26.3,31.3,25,31,24.1Z" fill="#ef97b0"></path>
</symbol>
</defs>
<g id="head">
 <g id="head__outline">
<path d="M303.2,186.3c4-7,14.8-20.2,20-26,17-19,34.6-34.9,43-41l12-8s16.6-32,21-33c9-2,33,22,33,22s20-9,79,7c41,11.1,47,14,57,22,7.5,6,18,16,18,16s33.7-19.5,41-15-2,66-2,66,5.9,12.9,11,22c9.1,16.2,13.6,20.2,19,31,3.6,7.2,8.4,28.5,10.5,43.5l-385-62Z" fill="#fff"></path>
<path d="M302.9,186.9c-1.2,3-5.9,12.6-9.........完整代码请登录后点击上方下载按钮下载查看
纯css布局小熊敲代码动画效果

网友评论0

css+div布局实现自适应大气高科技蓝色企业官网布局代码

css实现立体渐变按钮效果代码

svg+css实现立体书签checkbox点击开关效果代码

css+js实现老式大屁股电视机屏幕无信号闪屏动画效果代码

css布局逼真键盘按键效果代码

css+js实现3d翻转数字时钟显示时间代码

js+css实现炫酷科幻密码输入框破解锁定ui动态界面代码

HTMLElement自定义标签实现盲文密码效果代码

css实现服务器500故障灭火交互动画页面代码

css+js实现平滑折叠堆积下拉菜单效果代码
