gsap实现鼠标悬浮摇晃星级评分打分效果代码
代码语言：html
所属分类：星级评分
代码描述：gsap实现鼠标悬浮摇晃星级评分打分效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html {
height: 100%;
background-color: #2e3139;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3vh;
height: 100%;
}
.rating-set {
display: flex;
}
.rating-unit {
padding: min(5vw, 4vh);
position: relative;
cursor: pointer;
}
.dot {
width: 20%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-color: #666;
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4);
position: absolute;
translate: -50% -50%;
z-index: -1; /* Prevents overlap with star on iOS */
}
.star {
rotate: y -90deg;
width: 100%;
transform-origin: 50% 50%;
position: absolute;
translate: -50% -50% !important; /* Important is here so that GSAP doesn't override the translate value */
filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
transition: filter 1s;
}
.star.hover {
filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)) brightness(150%);
transition: filter 1s;
}
/* Define SVG graphic */
.star {
aspect-ratio: 64 / 61;
background-size: contain;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNjQnIGhlaWdodD0nNjEnIHZpZXdCb3g9JzAgMCA2NCA2MScgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMjguMzI2MiAyLjUzMDk3QzI5LjcxNDUgLTAuNjkyODg5IDM0LjI4NTUgLTAuNjkyODgzIDM1LjY3MzggMi41MzA5N0w0MS42MDU0IDE2LjMwNDhDNDIuMTg0NSAxNy42NDk1IDQzLjQ1MiAxOC41NzA0IDQ0LjkwOTkgMTguNzA1Nkw1OS44NDI1IDIwLjA5MDVDNjMuMzM3NiAyMC40MTQ3IDY0Ljc1MDEgMjQuNzYxOSA2Mi4xMTMgMjcuMDc4Nkw1MC44NDYzIDM2Ljk3NjJDNDkuNzQ2NCAzNy45NDI1IDQ5LjI2MjMgMzkuNDMyNSA0OS41ODQyIDQwLjg2MDhMNTIuODgxNCA1NS40OTA2QzUzLjY1MzIgNTguOTE0NyA0OS45NTUyIDYxLjYwMTUgNDYuOTM3MSA1OS44MDk0TDM0LjA0MjIgNTIuMTUyNkMzMi43ODMzIDUxLjQwNTEgMzEuMjE2NyA1MS40MDUxIDI5Ljk1NzggNTIuMTUyNkwxNy4wNjI5IDU5LjgwOTRDMTQuMDQ0OCA2MS42MDE1IDEwLjM0NjggNTguOTE0NyAxMS4xMTg2IDU1LjQ5MDZMMTQuNDE1OCA0MC44NjA4QzE0LjczNzcgMzkuNDMyNSAxNC4yNTM2IDM3Ljk0MjUgMTMuMTUzNyAzNi45NzYyTDEuODg2OTYgMjcuMDc4NkMtMC43NTAwOTIgMjQuNzYxOSAwLjY2MjQxNCAyMC40MTQ3IDQuMTU3NSAyMC4wOTA1TDE5LjA5MDIgMTguNzA1NkMyMC41NDggMTguNTcwNCAyMS44MTU1IDE3LjY0OTUgMjIuMzk0NiAxNi4zMDQ4TDI4LjMyNjIgMi41MzA5N1onIGZpbGw9JyNGRkQ2MDAnLz48L3N2Zz4=");
}
</style>
</head>
<body>
<div class="rating-set">
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
</div>
<div class="rating-set">
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
</div>
<div class="rating-set">
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
</div>
<div class="rating-set">
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
</div>
<div class="rating-set">
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
</div>
</div>
<div class="rating-unit">
<div class="dot"></div>
<div class="star">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0