css实现图片悬浮三维倾斜闪光动画效果代码

代码语言:html

所属分类:悬停

代码描述:css实现图片悬浮三维倾斜闪光动画效果代码

代码标签: css 图片 悬浮 三维 倾斜 闪光 动画

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

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

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

  
  
  
<style>
img {
  --a: 8deg; /* control the angle of rotation (the smaller, the better) */
  width: 250px;
  aspect-ratio: 1;
  border-radius: 20px;
  transform: perspective(400px) rotate3d(var(--i,1,-1),0,var(--a));
  -webkit-mask: 
    linear-gradient(135deg,#000c 40%,#000,#000c 60%)
    100% 100%/240% 240%;
  transition: .4s;
  cursor: pointer;
}
.alt {
  --i: 1,1;
  -webkit-mask: 
    linear-gradient(45deg,#000c 40%,#000,#000c 60%)
    0 100%/240% 240%;
}
img:hover {
  --i:-1,1;
  -webkit-mask-position: 0 0;
}
.alt:hover {
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0