按钮悬停动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  margin: 0;
}

.container {
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #377FBF;
  padding: 0;
  margin: 0;
}

.element {
  padding: 2rem 4rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  background-color: #377FBF;
  border-radius: 8rem;
  transition: box-shadow 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99);
}
.element:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 8px 32px 32px rgba(0, 0, 0, 0.15), 8px 64px 64px rgba(0, 0, 0, 0.15);
}
.element:active {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 8px 16px 16px rgba(0, 0, 0, 0.15), 8px 32px 32px rgba(0, 0, 0, 0.15);
}

.info {
  min-height: 20vh;
  background-color: #2c6597;
  font-family: 'Josefin Sans', sans-serif;
  color: #aaaaee;
  text-align: center;
  padding: 2rem;
  margin: 0;
}
.info a {
  color: #ddd;
  text-decoration: none;
  border-bottom: solid #ddd 1px;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg