js+css实现鼠标跟随图片圆圈内变清晰效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现鼠标跟随图片圆圈内变清晰效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; } body { /* 100%窗口宽高 */ height: 100vh; /* 弹性布局 水平+垂直居中 */ display: flex; justify-content: center; align-items: center; /* 溢出隐藏 */ overflow: hidden; background-color: #000; } .container { width: 100%; height: 100%; position: relative; overflow: hidden; } .image { width: 100%; height: 100%; /* 背景图像 */ background-image: url('//repo.bfw.wiki/bfwrepo/image/5fb34b65ae8bb.png'); /* 不平铺 */ background-repeat: no-repeat; /* 保持图像比例,裁切长边 */ background-size: cover; /* 图像定位正中 */ background-position: center; /* 固定背景图像 */ background-attachment: fixed; /* 模糊 */ filter: blur(6px); /* 溢出隐藏 */ overflow: hidden; } /* 半透明白色蒙版 */ .image::before { content: ""; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.4); position: absolute; } /* 高清圆 */ .cursor { width: 300px; height: 300px; border-radius: 50%; border: 10px solid rgb.........完整代码请登录后点击上方下载按钮下载查看
网友评论0