css+js实现卡通爱心小人点击跳跃动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现卡通爱心小人点击跳跃动画效果代码
代码标签: css js 卡通 爱心 小人 点击 跳跃 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { font-size: 20px; } body { display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } .heart { position: relative; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; } .heart__wrapper { position: relative; } .heart__sun { position: absolute; top: -2.5rem; left: -0.5rem; z-index: -1; height: -1rem; width: 2rem; height: 2rem; background-color: transparent; border-radius: 50%; transition: background-color 0.5s ease; } .heart__shadow { position: absolute; bottom: 2rem; left: 1rem; z-index: -1; width: 3rem; height: 0.5rem; border-radius: 50%; box-shadow: 0 1.4rem 0 0 #bbb; transition: box-shadow 0.5s ease; } .heart__lines { position: absolute; top: -0.6rem; right: 0.2rem; width: 0.2rem; height: 0.8rem; border-radius: 0.5rem; background-color: #bbb; opacity: 0; transition: all 0.5s ease; } .heart__lines:before, .heart__lines:after { content: ""; position: absolute; width: 0.2rem; height: 0.8rem; border-radius: 0.5rem; background-color: #bbb; transform-origin: 0.1rem 0.7rem; transition: height 0.5s ease; } .heart__lines:before { top: 0.25rem; left: 0.5rem; transform: rotate(30deg); } .heart__lines:after { top: 0.5rem; left: 1rem; transform: rotate(60deg); } .heart__icon path { position: relative; } .heart__eyes { position: absolute; top: 1.5rem; left: 1rem; display: flex; justify-content: space-between; align-items: center; width: 3rem; height: 1rem; transition: all 0.1s ease; } .heart__eyes:before, .heart__eyes:after { content: ""; width: 1rem; height: 0.2rem; background-color: #bbb; transition: all 0.1s ease; } .heart__mouth { position: absolute; top: 3rem; left: 2rem; width: 1rem; height: 0.2rem; background-color: #bbb; transition: all 0.2s ease; } .heart__arms { position: absolute; top: 2rem; left: 0.4rem; display: flex; justify-content: space-between; align-items: flex-start; width: 4.2rem; height: 1.5rem; } .heart__arms:before, .heart__arms:after { content: ""; width: 0.2rem; height: 0; border-radius: 0 0 0.2rem 0.2rem; transform-origin: 0.1rem 0.2rem; } .heart__legs { position: absolute; top: 3.6rem; left: 1.5rem; display: flex; justify-content: space-between; align-items: flex-start; width: 2rem; height: 1rem; } .heart__legs:before, .heart__legs:after { content: ""; width: 0.2rem; height: 0; border-radius: 0 0 0.2rem 0.2rem; transform-origin: 0.1rem 0rem; } .heart:not(.heart--active):hover { transform-origin: center bottom; animation: swing; animation-duration: 1s; } @keyframes swing { 0%, 100% { transform: rotate(0); } 33% { transform: rotate(5deg); } 66% { transform: rotate(-2deg); } } .heart__wrapper--active .heart__sun { background-color: #f5fccd; } .heart__wrapper--active .heart__shadow { animation: shadow; animation-duration: 1.5s; } @keyframes shadow { 40%, 85% { box-shadow: 0 1.4rem 0 -0.1rem #bbb; } } .heart--active { animation: leap; animation-duration: 1.5s; pointer-events: none; } @keyframes leap { 40%, 85% { transform: translate(0.2rem, -3rem) rotate(-25deg); } } .heart--active .heart__lines { animation: lines; animation-duration: 1.3s; animation-delay: 0.2s; background-color: #000038; } @keyframes lines { 20%, 80% { opacity: 0; } 40%, 60% { opacity: 1; } } .heart--active .heart__lines:before, .heart--active .heart__lines:after { background-color: #000038; } .heart--active .heart__icon path { fill: url(#RadialGradient); stroke: #ff7d66; } @supports (-webkit-hyphens: none) { .heart--active .heart__icon path { fill: #ff7d66; } } .heart--active .heart__eyes { width: 2.5rem; padding: 0 0.25rem; } .heart--active .heart__eyes:before, .heart--active .heart__eyes:after { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: radial-gradient(circle at 70% 30%, #fff 15%, #000038 15%, #000038); } .heart--active .heart__blush { posi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0