盒子悬浮倾斜动画特效-html代码-BFW代码库

盒子悬浮倾斜动画特效

代码语言：html

所属分类：悬停

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Box skew hover</title>
<style>
    

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Lato", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #001628;
}

.container {
    margin: 20px;
  position: relative;
  width: 90%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 70px;
}

.container .box::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fff;
  z-index: -1;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  transform: skew(2deg, 3deg);
  transition: .5s;
}

.container .box:hover:before {
  transform: skew(-2deg, -3deg);
}

.container .box {
  position: relative;
  color: #fff;
  height: 400px;
/*   border: 1px solid #fff; */
  display: flex;
  align-content: center;
  align-items: center;
  background-color: #001628;
}

.container .box:nth-child(1):before {
  background: linear-gradient(to right, #00c3ff, #ffff1c);
}

.container .box:nth-child(2):before {
  background: linear-gradient(to right, #ef32d9, #89fffd);
}

.container .box:nth-child(3):before {
  background: linear-gradient(to right, #e96443, #904e95);
}


.content {
  padding: 0 40px;
  position: relati.........完整代码请登录后点击上方下载按钮下载查看