位置: IT常识 - 正文

分享一个CSS的垂帘效果(css垂直导航栏)

编辑:rootadmin
分享一个CSS的垂帘效果

推荐整理分享分享一个CSS的垂帘效果(css垂直导航栏),希望有所帮助,仅作参考,欢迎阅读内容。

分享一个CSS的垂帘效果(css垂直导航栏)

文章相关热门搜索词:css实现垂直居中的方法,css垂直定位,css垂直导航栏,css div垂直居中的几种方法,css设置垂直位移一半,css垂直定位,css垂直对齐方式怎么设置,css 垂直,内容如对您有帮助,希望把文章链接给更多的朋友!

先上效果图: 再上代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html, body, canvas { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; display: flex; align-items: center; justify-content: center; background: #191919; } .asset-img { display: none; } </style></head><body><canvas></canvas><img class="asset-img" id="light-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACnVBMVEUAAAD40ED40D740Dv40En40Dr40FH40Df40D/40D340Dn40Dz40Dj40AD40Ff40Db40DT40EH40EL40ED40ED40Dv40D/4zz/4zz74zz/4zz/40D74zz/4zz/4zz/40UH40kD40UL40kH4zz/4zz340D34zz740kH41UT410f410j410j410f40D/40D/4zz/40ED40EH400T410f42Er4103410/411D41UT40kH40D/4z0D4zz/41UX410j42E7411L42Ff42Vv42Vz42En41kb40UH4zz/40Dz40ED41UT42Ej4107411b42l743WT432r4323432r410/42En4zz340Dn400H410f42mD432v44nf45IP45Yn45IT44nj432r411b400L40D/4zz/41UT42Er411P432v44oD46Zv47q/48Lj46Zr432n40UH410f42Ff44nf48r/499T4997499T48r744nf43WP40D741EH42Vv4+O34+PP4+O347q745IL432j40UD432345Yj48LX49934+PP4+Pj4993477T45Ib432z411D400D40D/40UH432n45IP47a7432j42Vv410/400H40Dr4zz340UD410b410346Zj48r343WP42Ff410f40D/41kT42Er42l744nv46Zf42l3411L410r41kX40ED410f42E7411b421/45IL45Ib432n421740UH40D340Dz4zz741EP410j410743WT432f432v43mj43GT42Ej41kT4zz740ED41EX411P42Ff42Fv411f410j41kX400P41034107411D42E340D740UH410j41kb41ET400H40D/40ED4z0D4zz74zz340D////+WdN8lAAAA3nRSTlMAAAAAAAAAAAAAAAAAAAAAAAAAAgMCBAcJDAkDCA0SFRsbGxMDBQscJSwwMS0SDAUFFyExQExUVyIYDQULJzlOZHeDhDonFwoDASE5VXGNpbO4tFM5BwEcMJa3zdjb2Mu2cBwDESM+Y7bU4ebo4bUUK3bL6vDy7+rKogIZgPb49ebXsBu02+jx9/jw6Nu0VRsBGbDX5q9/UhkCCRUqS+HqoHMqESI9i9Thi2E9IhEvTG+V1tq0kxsDAQchN1Ggr7SvoDghChUjYXJ/cjgnIUlSVEkFGi8qIhsFFAcICAaJi/ApAAAAAWJLR0Te6W7imwAAAAd0SU1FB+YMHBEUINvSacMAAAIKSURBVCjPY2AgBBgZmZiFRYQZgQBVnEVUTFxCUlJSSlxMlAVJjplVWkZWTl5BUUleWVZGhZkZYZKqmpy6hqaWtpaOhrqunj7MREZGA1lDI2MTUzNzM1MTYwtLK2uIFCOjiI2hrZ29g6OTs5Ojg72Lq5u7Bxs7SMZTXNfL28fXzz8gMMjfzzc4xEI3NIwVrEUyPMLeNzIqOiY2Lj4hMtE+Ikk2mYkRKCOekpqW7peRmZWdk52bmeeXnqYhJ84BkpHKLzAt9C/KKi4pLSvPragsNNXMl/JkZGCqUqvWMqsJiMkuqa2rL2tobKox06qWTOZg4EiWbNY2d25pbWvv6Ozo6u7pde7T6pf04GTgmGAzEahn0uSGsvqO+rIpjVOnTdeaoTaTmYGLfdbsOXMLKyvmzS/rKps/r2jBwrmL5KWAfmViEl+8ZGn6srzlK6Z0T1mxPG/lqtVr1oLdxp0sqbRu/YaNeUWbNm8q2rJ1w/p12yS38wDDh3PHTrldu/dsWLZ33/4DB5dt2HPosO7OMFBwM/KKHjl6bPf64yemOZ88dXz96TPyR6T5+EFByi6ganP07LrV585fmH5x6bqzs21UmZhg0XDJXe7ykjnrtK5cvXZdzv0GMycs6jiZpXdKLs532+Z2M0VSXAQ5KTAKeorcuu1uc+TO3e07hNDSCCMjNyczKz8nN8FkxgAAgH2hXtQzzA4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMTItMjhUMTc6MjA6MzIrMDA6MDA1MNVoAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTEyLTI4VDE3OjIwOjMyKzAwOjAwRG1t1AAAAABJRU5ErkJggg==" alt="base64"></body><script> class Mouse { constructor(canvas) { this.pos = new Vector(-1000, -1000) this.radius = 40 canvas.onmousemove = e => this.pos.setXY(e.clientX, e.clientY) canvas.ontouchmove = e => this.pos.setXY(e.touches[0].clientX, e.touches[0].clientY) canvas.ontouchcancel = () => this.pos.setXY(-1000, -1000) canvas.ontouchend = () => this.pos.setXY(-1000, -1000) } } class Dot { constructor(x, y) { this.pos = new Vector(x, y) this.oldPos = new Vector(x, y) this.friction = 0.97 this.gravity = new Vector(0, 0.6) this.mass = 1 this.pinned = false this.lightImg = document.querySelector('#light-img') this.lightSize = 15 } update(mouse) { if (this.pinned) return let vel = Vector.sub(this.pos, this.oldPos) this.oldPos.setXY(this.pos.x, this.pos.y) vel.mult(this.friction) vel.add(this.gravity) let { x: dx, y: dy } = Vector.sub(mouse.pos, this.pos) const dist = Math.sqrt(dx * dx + dy * dy) const direction = new Vector(dx / dist, dy / dist) const force = Math.max((mouse.radius - dist) / mouse.radius, 0) if (force > 0.6) this.pos.setXY(mouse.pos.x, mouse.pos.y) else { this.pos.add(vel) this.pos.add(direction.mult(force)) } } drawLight(ctx) { ctx.drawImage( this.lightImg, this.pos.x - this.lightSize / 2, this.pos.y - this.lightSize / 2, this.lightSize, this.lightSize ) } draw(ctx) { ctx.fillStyle = '#aaa' ctx.fillRect(this.pos.x - this.mass, this.pos.y - this.mass, this.mass * 2, this.mass * 2) } } class Stick { constructor(p1, p2) { this.startPoint = p1 this.endPoint = p2 this.length = this.startPoint.pos.dist(this.endPoint.pos) this.tension = 0.3 } update() { const dx = this.endPoint.pos.x - this.startPoint.pos.x const dy = this.endPoint.pos.y - this.startPoint.pos.y const dist = Math.sqrt(dx * dx + dy * dy) const diff = (dist - this.length) / dist const offsetX = diff * dx * this.tension const offsetY = diff * dy * this.tension const m = this.startPoint.mass + this.endPoint.mass const m1 = this.endPoint.mass / m const m2 = this.startPoint.mass / m if (!this.startPoint.pinned) { this.startPoint.pos.x += offsetX * m1 this.startPoint.pos.y += offsetY * m1 } if (!this.endPoint.pinned) { this.endPoint.pos.x -= offsetX * m2 this.endPoint.pos.y -= offsetY * m2 } } draw(ctx) { ctx.beginPath() ctx.strokeStyle = '#999' ctx.moveTo(this.startPoint.pos.x, this.startPoint.pos.y) ctx.lineTo(this.endPoint.pos.x, this.endPoint.pos.y) ctx.stroke() ctx.closePath() } } class Rope { constructor(config) { this.x = config.x this.y = config.y this.segments = config.segments || 10 this.gap = config.gap || 15 this.color = config.color || 'gray' this.dots = [] this.sticks = [] this.iterations = 10 this.create() } pin(index) { this.dots[index].pinned = true } create() { for (let i = 0; i < this.segments; i++) { this.dots.push(new Dot(this.x, this.y + i * this.gap)) } for (let i = 0; i < this.segments - 1; i++) { this.sticks.push(new Stick(this.dots[i], this.dots[i + 1])) } } update(mouse) { this.dots.forEach(dot => { dot.update(mouse) }) for (let i = 0; i < this.iterations; i++) { this.sticks.forEach(stick => { stick.update() }) } } draw(ctx) { this.dots.forEach(dot => { dot.draw(ctx) }) this.sticks.forEach(stick => { stick.draw(ctx) }) this.dots[this.dots.length - 1].drawLight(ctx) } } class App { static width = innerWidth static height = innerHeight static dpr = devicePixelRatio > 1 ? 2 : 1 static interval = 1000 / 60 constructor() { this.canvas = document.querySelector('canvas') this.ctx = this.canvas.getContext('2d') this.mouse = new Mouse(this.canvas) this.resize() window.addEventListener('resize', this.resize.bind(this)) this.createRopes() } createRopes() { this.ropes = [] const TOTAL = App.width * 0.06 for (let i = 0; i < TOTAL + 1; i++) { const x = randomNumBetween(App.width * 0.3, App.width * 0.7) const y = 0 const gap = randomNumBetween(App.height * 0.05, App.height * 0.08) const segments = 10 const rope = new Rope({ x, y, gap, segments }) rope.pin(0) this.ropes.push(rope) } } resize() { App.width = innerWidth App.height = innerHeight this.canvas.style.width = '100%' this.canvas.style.height = '100%' this.canvas.width = App.width * App.dpr this.canvas.height = App.height * App.dpr this.ctx.scale(App.dpr, App.dpr) this.createRopes() } render() { let now, delta let then = Date.now() const frame = () => { requestAnimationFrame(frame) now = Date.now() delta = now - then if (delta < App.interval) return then = now - (delta % App.interval) this.ctx.clearRect(0, 0, App.width, App.height) // draw here this.ropes.forEach(rope => { rope.update(this.mouse) rope.draw(this.ctx) }) } requestAnimationFrame(frame) } } function randomNumBetween(min, max) { return Math.random() * (max - min) + min } window.addEventListener('load', () => { const app = new App() app.render() }) class Vector { constructor(x, y) { this.x = x || 0 this.y = y || 0 } static add(v1, v2) { return new Vector(v1.x + v2.x, v1.y + v2.y) } static sub(v1, v2) { return new Vector(v1.x - v2.x, v1.y - v2.y) } add(x, y) { if (arguments.length === 1) { this.x += x.x this.y += x.y } else if (arguments.length === 2) { this.x += x this.y += y } return this } sub(x, y) { if (arguments.length === 1) { this.x -= x.x this.y -= x.y } else if (arguments.length === 2) { this.x -= x this.y -= y } return this } mult(v) { if (typeof v === 'number') { this.x *= v this.y *= v } else { this.x *= v.x this.y *= v.y } return this } setXY(x, y) { this.x = x this.y = y return this } dist(v) { const dx = this.x - v.x const dy = this.y - v.y return Math.sqrt(dx * dx + dy * dy) } }</script></html>

代码直接粘贴到html页面就能使用,顺滑的不可言说

本文链接地址:https://www.jiuchutong.com/zhishi/296029.html 转载请保留说明!

上一篇:情感计算——多模态情感识别(情感计算的应用)

下一篇:element - - - - - 你不知道的loading使用方式

  • 手机高德怎么与车载高德同步(手机高德怎么与哈弗H6车载高德同步)

    手机高德怎么与车载高德同步(手机高德怎么与哈弗H6车载高德同步)

  • 小米10用的什么屏幕(小米10用的什么处理器)

    小米10用的什么屏幕(小米10用的什么处理器)

  • 怎么拍抖音同款视频(怎么拍抖音同款背景)

    怎么拍抖音同款视频(怎么拍抖音同款背景)

  • 微信警告教育什么意思(微信警告教育会限制哪些功能)

    微信警告教育什么意思(微信警告教育会限制哪些功能)

  • 四核a55和双核a73处理器区别(四核a55和双核a73a53)

    四核a55和双核a73处理器区别(四核a55和双核a73a53)

  • docomo是什么牌子的手机(docomo是什么牌子的手表)

    docomo是什么牌子的手机(docomo是什么牌子的手表)

  • 小爱同学怎么下载音色(小爱同学怎么下载音乐)

    小爱同学怎么下载音色(小爱同学怎么下载音乐)

  • 医疗诊断属于计算机在哪方面的应用(医疗诊断属于计算机哪方面的应用)

    医疗诊断属于计算机在哪方面的应用(医疗诊断属于计算机哪方面的应用)

  • 苹果se有没有自带钢化膜(苹果se自带膜吗)

    苹果se有没有自带钢化膜(苹果se自带膜吗)

  • 苹果鼠标充电会亮灯吗(苹果鼠标充电会震动吗)

    苹果鼠标充电会亮灯吗(苹果鼠标充电会震动吗)

  • nex手机充不进去电是怎么回事(nex手机充不进电)

    nex手机充不进去电是怎么回事(nex手机充不进电)

  • 热点老是自动断开(平板连热点老是自动断)

    热点老是自动断开(平板连热点老是自动断)

  • 微信消息收到顺序错乱(微信消息收到顺序怎么改)

    微信消息收到顺序错乱(微信消息收到顺序怎么改)

  • 镜头stabilizer什么意思(镜头stf什么意思)

    镜头stabilizer什么意思(镜头stf什么意思)

  • 淘宝旺旺红包在哪里看(淘宝旺旺红包在哪里收)

    淘宝旺旺红包在哪里看(淘宝旺旺红包在哪里收)

  • 电脑怎么设置电源(电脑怎么设置电脑壁纸)

    电脑怎么设置电源(电脑怎么设置电脑壁纸)

  • OPPO k5照片水印怎么去掉(oppa5照片水印在哪设置)

    OPPO k5照片水印怎么去掉(oppa5照片水印在哪设置)

  • 怎么登录拼多多(怎么登录拼多多账号)

    怎么登录拼多多(怎么登录拼多多账号)

  • 趣步糖果交换密码是什么(趣步糖果交换密码怎么重新设置)

    趣步糖果交换密码是什么(趣步糖果交换密码怎么重新设置)

  • 电脑玩网络游戏报错怎么办?有什么办法解决吗?(电脑玩网络游戏一小时多少流量)

    电脑玩网络游戏报错怎么办?有什么办法解决吗?(电脑玩网络游戏一小时多少流量)

  • 鸿蒙怎么查看运行内存?鸿蒙查看运行内存教程(鸿蒙系统怎么看运行程序)

    鸿蒙怎么查看运行内存?鸿蒙查看运行内存教程(鸿蒙系统怎么看运行程序)

  • 精确控制 AI 图像生成的破冰方案,ControlNet 和 T2I-Adapter(精确控制 英文)

    精确控制 AI 图像生成的破冰方案,ControlNet 和 T2I-Adapter(精确控制 英文)

  • phpcms v9安装失败(安装php5.6)

    phpcms v9安装失败(安装php5.6)

  • 个体工商户营业执照需要什么材料
  • 固定资产不提折旧怎么算
  • 城市维护建设税优惠政策
  • 外商独资和中外合资的区别
  • 预收电费结转成本怎么办
  • 出口货物如果没收怎么办
  • 管理费用是负的是什么意思
  • 小微企业企业税率表
  • 混合销售行为的含义及税务处理
  • 小微企业可以抵税吗
  • 个人名义去税务局开票
  • 账表不一致的原因和根源
  • 预算会计的基本等式为
  • 销售后换回产品的账务处理怎么做?
  • 发票销货清单需要到税务局吗
  • 暑假工需要什么条件
  • 技术服务收入和产品服务收入举个例子
  • 使用ps能完成的操作有哪些
  • 印花税的计税依据是销项和进项的金额
  • 本月未认证的怎么处理
  • 在windows 7中
  • mac中的finder简介命令
  • 逾期未退保证金怎么办
  • 免税和免征增值税是一个意思么
  • 购买加油卡如何开发票
  • 旺阿雷自然保护区里的旺阿雷瀑布,新西兰北岛 (© Nathan Kavumbura/Getty Images)
  • php plates
  • magento后台无法登录解决办法的两种方法
  • 微信小程序游戏手游排行榜
  • 如何用html编写一个简单的网页
  • ci框架的优缺点
  • php查询数据是否存在
  • 购进原材料款项未付应编制什么凭证
  • 个人提供劳务需要开发票吗
  • 银行手续费发票未到怎样做账
  • 多缴所得税怎么算
  • 没有银行回单,只有银行对账单,可以入账吗
  • php安装插件
  • 企业基本养老金退休后能领多少
  • mongodb安装教程图解
  • 公允价值变动损益属于什么科目
  • 偿还银行贷款利息计算
  • 企业收到国债专项资金怎么记账
  • 成本核算分摊方法总结
  • 小规模在税务局开专票需要什么材料
  • 职工薪酬实际发生额忘记填会有风险吗
  • 中级会计需要初级会计证吗
  • 简易计税方法缴纳城建税和教育税
  • 外贸公司收取客户的费用
  • 汇算清缴预缴
  • 应付账款扣款分录
  • 最新的会计规定出台时间
  • 子公司实现利润怎么会计处理
  • 信息技术服务费可以全额抵扣吗
  • 预付账款是谁欠谁
  • 待摊费用和预提费用的区别
  • 支票有效期过期了怎么办
  • 启用账簿时应在账簿上签名或盖章的是
  • sql入门课程
  • mysql千万级分页优化
  • win2003server远程设置
  • 安装windows server 2008 r2
  • vtpwsr
  • windows 注册表命令
  • windows10x build 20279
  • 抢先体验的游戏可以退款吗
  • 王牌竞速 小米
  • 安装linux系统步骤图解
  • windows 8虚拟机
  • 和大家一起分享一下你读书以后的感受吧
  • unity shaders and effects cookbook
  • 微信小程序支付的钱怎么退款
  • bootstrap按钮的风格有哪些?
  • Fragment里onActivityResult()无回调的问题
  • python网络爬虫教程
  • js的delegate
  • 黄金税率是多少
  • 单位没有缴纳个人医保
  • 银行服务创新金点子
  • 车船税为什么有时候不用交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设