偷鼠标 特效,点击按钮试试
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Click the button!</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,700&display=swap" rel="stylesheet">
<link rel='stylesheet' href='https://unpkg.com/backpack.css'>
<style>
html {
font-size: 18px;
}
@media (min-width: 900px) {
html {
font-size: 24px;
}
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
line-height: 1.45;
color: #0F1108;
}
h1 {
font-size: 2.2rem;
margin: 0;
font-weight: 600;
line-height: 1.15;
}
@media (min-width: 900px) {
h1 {
font-size: 2.488rem;
}
}
h2 {
font-size: 1.4rem;
margin: 0.5rem 0;
line-height: 1.15;
font-weight: 200;
}
@media (min-width: 900px) {
h2 {
margin: 1rem 0;
font-size: 1.44rem;
}
}
p {
margin-top: 0.25rem;
}
@media (min-width: 900px) {
p {
margin-top: 0.5rem;
}
}
a {
color: #0F1108;
text-decoration: none;
border-bottom: currentcolor1px solid;
}
.container {
max-width: 520px;
margin: 0 auto;
padding: 0 1rem 100px 1rem;
}
@media (min-width: 900px) {
.container {
max-width: 650px;
padding: 0 1rem 90px 1rem;
}
}
.app {
position: relative;
background: #F2E9DE;
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 2rem);
margin: 1rem;
overflow: hidden;
}
.app--debug .grab-zone {
background: rgba(0, 0, 0, 0.15);
}
.app--debug .grab-zone__debug {
display: block;
}
.app-.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0