jquery+css实现炫酷星星粒子发射动画的星级评分打分效果代码
代码语言:html
所属分类:星级评分
代码描述:jquery+css实现炫酷星星粒子发射动画的星级评分打分效果代码
代码标签: jquery css 炫酷 星星 粒子 发射 动画 星级 评分 打分
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Orbit&display=swap"); body { background: #ECE5F0; margin: 0; padding: 0; font-family: "Orbit"; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw; } h1 { margin: 0; padding: 0; font-weight: normal; } main { background: #1B1B1E; color: white; min-width: 50%; margin: auto; border-radius: 10px; padding: 3em 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px solid #FF5E5B; box-shadow: 0 10px 30px #FF5E5B; } ul { list-style-type: none; display: flex; padding: 0; } li { font-size: 300%; position: relative; transition: 0.2s ease-in all; } li.off { opacity: 0.25; } li.off:after { animation: fade-down 1s forwards; } li:before { content: "⭐"; } li:after { content: "⭐"; position: absolute; top: 0; left: 0; } li:hover { opacity: 0.7; cursor: pointer; transform: scale(1.05) rotate(5deg); } li span { position: absolute; top: 0; left: 0; font-size: 10%; opacity: 0; animation: pew 1s forwards; animation-delay: var(--d, 0ms); } @keyframes pew { from { left: 50%; top: 50%; opacity: 0; font-size: 10%; } 10% { opacity: 1; } 50% { opacity: 0.7; } 80% { opacity: 0; } 99% { left: var(--l, 150%); top: var(--t, 150%); opacity: 0; font-size: 50%; } to { opacity: 0; font-size: 100%; } } @keyframes fade-down { to { transform: translateY(100px) scale(1.5) rotate(90deg); opacity: 0; } } </style> </head> <body> <main> <div&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0