div+css实现悬浮回弹的花哨的用户图像效果代码-html代码-BFW代码库

div+css实现悬浮回弹的花哨的用户图像效果代码

代码语言：html

代码描述：div+css实现悬浮回弹的花哨的用户图像效果代码

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

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

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

  
  
<style>
@property --a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.box {
  --r: 30px; /* control the rounded part*/
  --s: 80px; /* control the size of the cut and the image  */
  --a: 20deg; /* control the depth of the curvature */
  
  position: relative;
  z-index: 0;
  cursor: pointer;
  transition: .4s --a;
  color: #fff;
  font-family: system-ui,sans-serif;
  text-align: center;
  animation: --a .8s backwards cubic-bezier(0,.6,.6,1.5) .7s;
}
@keyframes --a {
  0% {--a: 90deg}
}
.box:hover {
  --a: 35deg;
}
.box img {
  height: calc(2*var(--s));
  aspect-ratio: 1;
  scale: .9;
  translate: 0 calc(-1*sin(var(--a))*var(--s) - sin(var(--a))*var(--r));
  border-radius: 50%;
  background: #D95B43;
  animation: t linear both .7s;
}
@keyframes t {
  0%{transform: translate(0,-200px)}
}
.box:before {
  content:"";
  position: absolute;
  z-index: -1;
  inset: calc(var(--s)/2 + var(--r)/4) 0 0 0;
  background: linear-gradient(45deg,#00A0B0,#88A6.........完整代码请登录后点击上方下载按钮下载查看