茶杯咖啡动画波纹效果-html代码-BFW代码库

茶杯咖啡动画波纹效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>


body {
	font-family: "Montserrat", sans-serif;
	min-height: 100vh;
  background: #fde7c5;
}

* {
	font-family: "Montserrat", sans-serif !important;  
}

.coffee-cup {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 150px;
  height: 180px;
  border: 6px solid #fde7c5;
  border-top: 2px solid transparent;
  border-radius: 15px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: url("http://repo.bfw.wiki/bfwrepo/image/5e4c9948c01aa.png");
  background-repeat: repeat-x;
  -webkit-animation: animate 10s linear infinite;
          animation: animate 10s linear infinite;
  box-shadow: 0 0 0 6px #000, 0 10px 20px rgba(1,1,1,1);
}

.coffee-cup:before {
  position: absolute;
  content: ''.........完整代码请登录后点击上方下载按钮下载查看