js+css实现鼠标悬浮卡片光影效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：js+css实现鼠标悬浮卡片光影效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  
<style>
body {
  font-family: "Satoshi", sans-serif;
  padding: 0 20px;
}

.teaser-element-container {
  --teaser__icon__color: #e6e6e6;
  margin-bottom: 40px;
  width: 100%;
  height: calc(100% - 40px);
  padding: 35px 30px;
  position: relative;
  border-radius: 12px;
  background-color: #101010;
  transition: background 0.45s;
}
.teaser-element-container .icon {
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
}
.teaser-element-container .icon svg {
  width: 100%;
  height: 100%;
}
.teaser-element-container h3 {
  font-family: "Clash Display", sans-serif;
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 22px;
  color: #e6e6e6;
}
.teaser-element-container p {
  width: 85%;
  font-family: "Satoshi", sans-serif;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: #e6e6e6;
}
.teaser-element-container::before {
  content: "";
  display: block;
  height: calc(100% + 2px);
  width: calc(100% + 2px);
  border-radius: 12px;
  inset: -1px;
  position: absolute;
  z-index: -2;
  right: -1px;
  top: -1px;
  bottom: -1px;
  left: -1px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  transition: background 0.2s;
  will-change: background;
  contain: size;
  background: radial-gradient(300px circle at var(--x__mouse__coordinate) var(--y__mouse__coordinate), #fff 0, #f3fefe 50%, transparent 100%);
}
.teaser-element-container:hover {
  background-color: #1a1a1a;
}

.flex-col {
  display: flex;
  flex-wrap: wrap;
}

.box-start {
  justify-content: flex-start;
}

.box-end {
  justify-content: flex-end;
}

.box-center {
  justify-content: center;
}

.box-align-center {
  align-items: center;
}

.box-align-start {
  align-items: flex-start;
}

.box-align-end {
  align-items: flex-end;
}

@media (max-width: 767px) {
  .col {
    padding: 0 20px;
  }

  .row-inner {
    margin: -20px;
  }
}
@media (min-width: 768px) {
  .col {
    padding: 0 20px;
  }

  .row-inner {
    margin: -20px;
  }
}
.xs-1 {
  width: 8.3333333333%;
}

.xs-2 {
  width: 16.6666666667%;
}

.xs-3 {
  width: 25%;
}

.xs-4 {
  width: 33.3333333333%;
}

.xs-5 {
  width: 41.6666666667%;
}

.xs-6 {
  width: 50%;
}

.xs-7 {
  width: 58.3333333333%;
}

.xs-8 {
  width: 66.6666666667%;
}

.xs-9 {
  width: 75%;
}

.xs-10 {
  width: 83.3333333333%;
}

.xs-11 {
  width: 91.6666666667%;
}

.xs-12 {
  width: 100%;
}

@media (min-width: 420px) {
  .s-1 {
    width: 8.3333333333%;
  }

  .s-2 {
    width: 16.6666666667%;
  }

  .s-3 {
    width: 25%;
  }

  .s-4 {
    width: 33.3333333333%;
  }

  .s-5 {
    width: 41.6666666667%;
  }

  .s-6 {
    width: 50%;
  }

  .s-7 {
    width: 58.3333333333%;
  }

  .s-8 {
    width: 66.6666666667%;
  }

  .s-9 {
    width: 75%;
  }

  .s-10 {
    width: 83.3333333333%;
  }

  .s-11 {
    width: 91.6666666667%;
  }

  .s-12 {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .m-1 {
    width: 8.3333333333%;
  }

  .m-2 {
    width: 16.6666666667%;
  }

  .m-3 {
    width: 25%;
  }

  .m-4 {
    width: 33.3333333333%;
  }

  .m-5 {
    width: 41.6666666667%;
  }

  .m-6 {
    width: 50%;
  }

  .m-7 {
    width: 58.3333333333%;
  }

  .m-8 {
    width: 66.6666666667%;
  }

  .m-9 {
    width: 75%;
  }

  .m-10 {
    width: 83.3333333333%;
  }

  .m-11 {
    width: 91.6666666667%;
  }

  .m-12 {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .l-1 {
    width: 8.3333333333%;
  }

  .l-2 {
    width: 16.6666666667%;
  }

  .l-3 {
    width: 25%;
  }

  .l-4 {
    width: 33.3333333333%;
  }

  .l-5 {
    width: 41.6666666667%;
  }

  .l-6 {
    width: 50%;
  }

  .l-7 {
    width: 58.3333333333%;
  }

  .l-8 {
    width: 66.6666666667%;
  }

  .l-9 {
    width: 75%;
  }

  .l-10 {
    width: 83.3333333333%;
  }

  .l-11 {
    width: 91.6666666667%;
  }

  .l-12 {
    width: 100%;
  }
}
@media (min-width: 1220px) {
  .xl-1 {
    width: 8.3333333333%;
  }

  .xl-2 {
    width: 16.6666666667%;
  }

  .xl-3 {
    width: 25%;
  }

  .xl-4 {
    width: 33.3333333333%;
  }

  .xl-5 {
    width: 41.6666666667%;
  }

  .xl-6 {
    width: 50%;
  }

  .xl-7 {
    width: 58.3333333333%;
  }

  .xl-8 {
    width: 66.6666666667%;
  }

  .xl-9 {
    width: 75%;
  }

  .xl-10 {
    width: 83.3333333333%;
  }

  .xl-11 {
    width: 91.6666666667%;
  }

  .xl-12 {
    width: 100%;
  }
}
@media (min-width: 1660px) {
  .xxl-1 {
    width: 8.3333333333%;
  }

  .xxl-2 {
    width: 16.6666666667%;
  }

  .xxl-3 {
    width: 25%;
  }

  .xxl-4 {
    width: 33.3333333333%;
  }

  .xxl-5 {
    width: 41.6666666667%;
  }

  .xxl-6 {
    width: 50%;
  }

  .xxl-7 {
    width: 58.3333333333%;
  }

  .xxl-8 {
    width: 66.6666666667%;
  }

  .xxl-9 {
    width: 75%;
  }

  .xxl-10 {
    width: 83.3333333333%;
  }

  .xxl-11 {
    width: 91.6666666667%;
  }

  .xxl-12 {
    width: 100%;
.........完整代码请登录后点击上方下载按钮下载查看