css实现鼠标悬停封面碟片抽出动画效果代码-html代码-BFW代码库

css实现鼠标悬停封面碟片抽出动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现鼠标悬停封面碟片抽出动画效果代码

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

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

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

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
  
<style>
.album {
  --album-size: 300px;
  /* Base size */
  --vinyl-size: 280px;
  /* Base vinyl size */
  --border-radius: 3px;
  /* Border radius */
  --cover-translate: -10px;
  /* Translation for hover */
  --cover-rotate: -2deg;
  /* Rotation for hover */
  --vinyl-translate: 50%;
  /* Vinyl translation for hover */
  --vinyl-rotate: 360deg;
  /* Vinyl rotation for hover */
  position: relative;
  width: var(--album-size);
  height: var(--album-size);
  margin: 1rem 100px;
}
.album .cover {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 2;
  transition: transform 0.5s ease-in-out;
}
.album .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.album .cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 1%, transparent 50%);
  pointer-events: none;
  z-index: 3;
}
.album .cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 4%), linear-gradient(225deg, rgba(162, 162, 162, 0.1) 0%, rgba(162, 162, 162, 0.2) 4%, rgba(255, 255, 255, 0.2) 6%, rgba(255, 255, 255, 0.6) 7%, rgba(255, 255, 255, 0.2) 7%, rgba(218, 218, 218, 0.04) 7%, transparent 6%), linear-gradient(45deg, rgba(14, 14, 14, 0.7), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 4%, rgba(14, 14, 14, 0.2) 6%, rgba(255, 255, 255, 0.3) 7%, rgba(218, 218, 218, 0.4) 7%, transparent 8%);
  pointer-events: none;
  z-index: 3;
}
.album .vinyl {
  position: absolute;
  top: 10px;
  right: 0;
  width: var(--vinyl-size);
  height: var(--vinyl-size);
  border-radius: 50%;
  background: conic-gradient(from 50deg at 50% 50%, transparent 46%, rgba(255, 255, 255, 0.1) 48%, rgba(255, 255, 255, 0.15) 51%, transparent 56%), conic-gradient(from 225deg at 50% 50%, transparent 46%, rgba(255, 255, 255, 0.1) 48%, rgba(255, 255, 255, 0.15) 51%, transparent 56%), repeating-radial-gradient(circle, rgba(120, 120, 120, 0.1) 0%, rgba(192, 192, 192, 0.01) 1px, transparent 1px, transparent 4px), black;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(0) rotate(270deg);
  transition: transform 0.5s ease-in-out;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.album .vinyl .vinyl-cover {
  width: calc(var(--vinyl-size) / 2.8);
  height: calc(var(--vinyl-size) / 2.8);
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  box-shadow: 0 0 0 5px black;
}
.album:hover .cover {
  transform: translateX(var(--cover-translate)) rotate(var(--cover-rotate));
}
.album:hover .vinyl {
  transform: translateX(var(--vinyl-translate)) rotate(var(--vinyl-rotate));
}
.album.small {
  --album-size: 150px;
  /* Reduced size */
  --vinyl-size: 130px;
  /* Reduced vinyl size */
  --border-radius: 2px;
  /* Adjusted border radius */
 .........完整代码请登录后点击上方下载按钮下载查看