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%;
  }
}
html {
  min-height: 100%;
  overflow-y: scroll;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
}

ul li,
ol li {
  padding: 0;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  width: 100%;
  height: 100%;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  scroll-behavior: smooth;
}

body {
  background-color: #080808;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 320px;
  font-size: 18px;
  color: #fff;
}

section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content-size-sm {
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
}

.content-size-m {
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
}

.content-size-sl {
  max-width: 1224px;
  margin: 0 auto;
  width: 100%;
}

.content-size-l {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.infobox-container,
.trademark {
  display: none;
}

@media screen and (min-width: 1024px) {
  .trademark {
    display: block;
    position: absolute;
    z-index: 99;
    left: 50px;
    top: 50px;
    max-width: 70px;
    transition: all 0.3s ease-in-out;
  }

  .trademark svg {
    width: 100%;
  }

  .trademark:hover {
    transform: translate(0, -2px);
  }

  .infobox-container {
    display: block;
    position: absolute;
    right: 50px;
    bottom: 50px;
    z-index: 99;
  }

  .infobox-container .social-media-links {
    display: flex;
    flex-direction: row;
  }

  .infobox-container .social-media-links a {
    margin: 0 15px;
    transition: all 0.3s ease-in-out;
  }
  .infobox-container .social-media-links a svg,
.infobox-container .social-media-links a svg path {
    transition: all 0.3s ease-in-out;
  }

  .infobox-container .social-media-links a:hover {
    transform: translate(0, -2px);
  }

  .infobox-container .social-media-links a:hover svg path {
    fill: #323232;
  }
}
</style>

  
</head>

<body>
  <section>
  <div class="content-size-sl">
    <div class="flex-col">
      <div class="col xs-12 m-6">
        <div class="teaser-element-container">
          <div class="icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.01208 12.991L5.00001 13" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M5 10H7" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M13.1813 16.5H7" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M16.5378 11.3867H13.0801C12.544 11.3867 12.0865 10.9991 11.9983 10.4703L11.4199 7" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M16.1731 16.5H16.9038C17.5092 16.5 18 16.0092 18 15.4038V13.3003C18 13.0095 17.8845 12.7307 17.6789 12.5251L16.5385 11.3847L14.8511 8.00991C14.5416 7.39098 13.909 7.00001 13.217 7H7" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M3 7C3 4.79086 4.79086 3 7 3H17C19.2091 3 21 4.79086 21 7V17C21 19.2091 19.2091 21 17 21H7C4.79086 21 3 19.2091 3 17" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M14.6767 15.0091C15.5026 15.009 16.1722 15.6785 16.1722 16.5045C16.1723 17.3304 15.5027 18 14.6768 18C13.8509 18 13.1813 17.3305 13.1813 16.5046V16.5045C13.1813 15.6786 13.8508 15.0091 14.6767 15.0091V15.0091" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <h3>Ipsum adipisicing Ipsum</h3>
          <p>
            Do veniam fugiat dolore adipisicing et do non.
            Sit veniam elit sint excepteur exercitation consectetur ipsum eiusmod in voluptate sunt ipsum sint.
            Consequat esse duis incididunt est anim aliqua do nostrud laboris.
          </p>
        </div>
      </div>
      <div class="col xs-12 m-6">
        <div class="teaser-element-container">
          <div class="icon">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.62534 19.3576C9.50404 22.2445 13.9632 22.8368 17.4957 20.8015C21.0282 18.7663 22.7524 14.6115 21.6988 10.6731C20.6452 6.73481 17.0768 3.99583 13 3.99625" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M4.72756 16.3764C4.69993 16.3764 4.67754 16.3988 4.67754 16.4264C4.67754 16.454 4.69993 16.4764 4.72756 16.4764C4.74543 16.4764 4.76194 16.4669 4.77088 16.4514C4.77981 16.436 4.77981 16.4169 4.77088 16.4014C4.76194 16.3859 4.74543 16.3764 4.72756 16.3764" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M4.04627 12.95C4.01864 12.95 3.99625 12.9724 3.99625 13C3.99625 13.0276 4.01864 13.05 4.04627 13.05C4.07389 13.05 4.09629 13.0276 4.09629 13C4.09629 12.9724 4.07389 12.95 4.04627 12.95" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M4.72756 9.52355C4.71429 9.52355 4.70157 9.52882 4.69219 9.5382C4.68281 9.54758 4.67754 9.56031 4.67754 9.57357C4.67754 9.6012 4.69993 9.62359 4.72756 9.62359C4.74543 9.62359 4.76194 9.61406 4.77088 9.59858C4.77981 9.58311 4.77981 9.56404 4.77088 9.54856C4.76194 9.53309 4.74543 9.52355 4.72756 9.52355" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M6.66836 6.61834C6.64096 6.61887 6.61887 6.64096 6.61834 6.66836C6.61834 6.69599 6.64073 6.71838 6.66836 6.71838C6.69599 6.71838 6.71838 6.69599 6.71838 6.66836C6.71838 6.64073 6.69599 6.61834 6.66836 6.61834" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M9.57357 4.67753C9.54595 4.67753 9.52355 4.69992 9.52355 4.72755C9.52355 4.75517 9.54595 4.77757 9.57357 4.77757C9.6012 4.77757 9.62359 4.75517 9.62359 4.72755C9.62359 4.69992 9.6012 4.67753 9.57357 4.67753" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.30546 14.4716V11.5314C9.30623 11.1561 9.50825 10.8101 9.83468 10.625L12.4908 9.13238C12.8069 8.95429 13.1931 8.95429 13.5092 9.13238L16.1653 10.625C16.4922 10.8097 16.6944 11.1559 16.6945 11.5314V14.4716C16.6922 14.8449 16.4903 15.1884 16.1653 15.372L13.5082 16.8646C13.1918 17.0417 12.8062 17.0417 12.4898 16.8646L9.83368 15.376C9.5075 15.1917 9.30569 14.8462 9.30546 14.4716V14.4716Z" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M13 13V17.0017" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M9.44752 11.0062L13 13L16.5525 11.0052" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <h3>Ipsum adipisicing Ipsum</h3>
          <p>
            Do veniam fugiat dolore adipisicing et do non.
            Sit veniam elit sint.
          </p>
        </div>
      </div>
      <div class="col xs-12 m-6">
        <div class="teaser-element-container">
          <div class="icon">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.62534 19.3576C9.50404 22.2445 13.9632 22.8368 17.4957 20.8015C21.0282 18.7663 22.7524 14.6115 21.6988 10.6731C20.6452 6.73481 17.0768 3.99583 13 3.99625" stroke="var(--teaser__icon__color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M4.72756 16.3764C4.69993 16.3764 4.67754 16.3988 4.67754 16.4264C4.67754 16.454 4.........完整代码请登录后点击上方下载按钮下载查看