css实现图片悬浮三维倾斜闪光动画效果代码
代码语言:html
所属分类:悬停
代码描述: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