企业官网建设流程全解析

播放器网站怎么做,深圳企业建站平台,上海网站建设哪家口碑好,大型门户网站建设是什么TML新手别慌#xff01;用纯HTMLCSS实现天窗扬起合上特效#xff08;附细节踩坑指南#xff09; HTML菜鸟先别急着划走#xff0c;今天咱们玩个骚的先搞明白我们要造的是个啥玩意儿HTML结构真的就三行#xff0c;多一行算我输让窗户动起来#xff0c;关键在那根虚拟…TML新手别慌用纯HTMLCSS实现天窗扬起合上特效附细节踩坑指南HTML菜鸟先别急着划走今天咱们玩个骚的先搞明白我们要造的是个啥玩意儿HTML结构真的就三行多一行算我输让窗户动起来关键在那根虚拟铰链性能这玩意儿平时不用管出事就是大事那些让你想砸键盘的魔鬼细节能偷的懒一定要偷毕竟工资是按时间算的遇到bug别硬刚先问自己这三个土问题最后教你个骚的星空磨砂玻璃效果HTML新手别慌用纯HTMLCSS实现天窗扬起合上特效附细节踩坑指南HTML菜鸟先别急着划走今天咱们玩个骚的说实话啊每次看到那种纯CSS实现某某特效的教程我第一反应都是又来不会又是那种复制粘贴都跑不通的半成品代码吧但那天半夜三点我盯着家里的斜屋顶天窗发呆突然就想——这玩意儿要是能在网页里整出来岂不是很有电影感你可能会说现在谁还写纯HTMLCSS啊Vue不香吗React不香吗但问题是很多时候你就想在静态页面上塞个小彩蛋或者给落地页加点动效这时候杀鸡用牛刀地架个框架纯属吃饱了撑的。而且讲真把最基础的CSS3特性玩出花来那种成就感比调现成组件库爽多了。所以今天咱们就来聊聊怎么用最基本的div套div整出一个能让老板直呼有内味儿的天窗扬起特效。不搞那些虚头巴脑的直接上干货顺便把我踩过的坑都给你扒拉清楚。先搞明白我们要造的是个啥玩意儿想象你住在一个老旧的阁楼里屋顶是斜的上面开了个小窗户。不是那种推拉窗是那种往上推就会哐当一声扬起来的机械天窗。关上的时候它平贴在屋顶上打开的时候绕着顶部的合页往上翻露出后面黑漆漆的夜空。注意啊这里有几个关键点它是绕着顶部边缘旋转的不是像电梯门那样平移打开的角度大概在一百多度左右不能完全翻过去不然就掉下去了要有那种机械铰链的质感不能太飘关回去的时候得啪嗒一下贴合屋顶不能有缝隙这玩意儿要是用JS写你可能得算半天三角函数什么transform matrix啊什么rotate角度换算啊脑阔疼。但用CSS3的transform和animation其实就几行代码的事关键是你要理解那个旋转中心点到底该设在哪。我见过有人做这个效果直接把rotate(0deg)到rotate(120deg)一写结果窗户原地打转像个陀螺看得我尴尬癌都犯了。这就是没搞懂transform-origin的锅后面代码部分我会细说。HTML结构真的就三行多一行算我输别被特效俩字吓到其实HTML结构简单得离谱。我看过有些教程为了个简单的翻转动效里三层外三层套了七八个divclass名起得跟俄罗斯套娃似的什么wrapper-container-inner-box-shadow-layer我寻思你这是写HTML还是写散文诗呢咱们这就两个元素够用了!-- 屋顶固定不动就一背景板 --divclassroof!-- 天窗这是要动的正主儿 --divclassskylight/div/div完事儿。就这么多没了。你可能会问那个合页铰链呢阴影呢玻璃质感呢别急这些用CSS伪元素就能搞定没必要在HTML里再塞一堆空div。记住一个道理HTML是骨架能少就少CSS是皮肤能厚就厚。结构清爽了后期维护起来才不会想杀人。这里有个小细节roof这个容器一定要设置position: relative不然里面的天窗absolute定位会乱跑跑到页面左上角去跟你打招呼。别问我怎么知道的上次就这么坑了一个实习生他调了俩小时z-index发现是父容器没设定位。还有啊记得给roof加个固定的宽高别让它随内容伸缩。天窗是贴在屋顶上的屋顶尺寸得确定下来不然后面算旋转角度的时候你会怀疑人生。我建议写死像素或者vw/vh别用百分比百分比在这种需要精确控制的动画里就是定时炸弹。!-- 完整版HTML带点儿语义化 --sectionclassattic-scenedivclassroof-slopedivclassskylight-windowroleimgaria-label可交互的天窗点击可打开或关闭!-- 玻璃反光层用伪元素做这里不写 --/div/div/section看到那个aria-label没这就是职业素养。虽然咱们今天讲的是视觉效果但无障碍访问不能忘万一真有盲人朋友用你的页面读屏器至少能告诉他这儿有个窗户。让窗户动起来关键在那根虚拟铰链好现在到了核心环节。CSS怎么让这玩意儿绕着顶部边缘翻起来很多新手第一反应就是animation: rotate 1s ease-in-out; 完事儿。跑一下窗户确实转了但是是绕着中心点转的像个风车。这显然不对啊你家天窗是装在正中间旋转的吗那不就掉下去了。问题出在transform-origin上。默认情况下元素的变换原点是中心点center center但我们需要的是顶部中心top center。这就好比现实中合页是装在窗框顶上的不是在窗户玻璃正中间。上代码.skylight{/* 基础样式先让窗户像个窗户 */width:200px;height:150px;background:linear-gradient(135deg,#e0e0e0 0%,#f5f5f5 100%);border:3px solid #555;border-radius:4px;box-shadow:inset 0 0 20pxrgba(0,0,0,0.1);/* 定位贴在屋顶上 */position:absolute;top:0;left:50%;transform:translateX(-50%);/* 关键设置旋转中心为顶部 */transform-origin:top center;/* 初始状态是关着的 */transform:translateX(-50%)rotateX(0deg);/* 3D透视不然看起来是扁的 */transform-style:preserve-3d;perspective:1000px;}/* 开启动画的类用JS切换或者:hover触发 */.skylight.open{animation:openSkylight 0.8scubic-bezier(0.4,0,0.2,1)forwards;}.skylight.close{animation:closeSkylight 0.6scubic-bezier(0.4,0,0.2,1)forwards;}keyframesopenSkylight{from{transform:translateX(-50%)rotateX(0deg);box-shadow:0 5px 15pxrgba(0,0,0,0.3);}to{transform:translateX(-50%)rotateX(-110deg);/* 注意这里是负角度往上翻 */box-shadow:0 20px 40pxrgba(0,0,0,0.2);/* 打开后阴影变化模拟透光 */}}keyframescloseSkylight{from{transform:translateX(-50%)rotateX(-110deg);box-shadow:0 20px 40pxrgba(0,0,0,0.2);}to{transform:translateX(-50%)rotateX(0deg);box-shadow:0 5px 15pxrgba(0,0,0,0.3);}}看到那个cubic-bezier没这就是让动画有机械感的秘密武器。默认的ease-in-out太丝滑了像是窗户在太空里飘。咱们这个贝塞尔曲线(0.4, 0, 0.2, 1)开头快一点中间有个明显的卡顿感模拟真实铰链那种需要使点劲才能推开的感觉最后啪嗒一下贴合。还有啊别忘了translateX(-50%)要一直带着。因为咱们用left: 50%居中如果不保持这个translate动画过程中窗户会左右横跳那画面太美我不敢看。CSS动画里的transform是会覆盖的不是追加所以初始状态里有什么keyframes里就得一直带着。那个rotateX为什么是负110度因为我试过了120度的话在视觉上窗户就翻得太靠后了看起来像是掉下去了110度刚好是完全打开但还连着的状态。你可以根据自己审美调90度到130度之间都行看你想表达哪种机械结构。性能这玩意儿平时不用管出事就是大事我知道你现在可能想就这俩div转一下还谈啥性能兄弟积少成多啊。你现在页面里就一个天窗万一产品经理看爽了让你给整个屋顶都铺满呢或者让你再加个百叶窗版本、再加个侧滑版本十个八个特效同时跑手机用户就该骂娘了。CSS动画虽然比JS操作DOM轻量但也有坑。最坑的就是重绘repaint和重排reflow。咱们这个transform: rotateX其实是比较安全的它触发的是合成compositing靠GPU加速不太消耗CPU。但如果你在动画里加了box-shadow变化或者更作死的filter: blur()那浏览器每一帧都得重新计算像素风扇立马起飞。所以你看我上面的代码box-shadow确实变了但那是配合动画的而且变化幅度不大。如果你非要搞那种窗户打开时玻璃逐渐变透明的效果别用opacity或者rgba变化那玩意儿在某些浏览器上会触发重绘。可以考虑用will-change提前声明.skylight{/* 告诉浏览器这个元素要变形了提前优化 */will-change:transform;/* 但是别开太多will-change本身也占内存 *//* 别写成 will-change: transform, box-shadow, opacity, filter; 那是自杀 */}哦对了will-change用完后记得取消不然内存一直被占用。可以在动画结束的回调里去掉或者用CSS这样写.skylight:not(.open):not(.close){will-change:auto;}还有个移动端的大坑点击延迟。很多手机浏览器为了区分单击和双击缩放会在你点击后等300毫秒才响应。咱们这个天窗要是靠点击触发用户会觉得怎么这么肉卡了。解决办法很简单.roof-slope{/* 告诉浏览器这儿要响应点击别瞎等 */touch-action:manipulation;}或者如果你用JS监听click事件可以改成touchstart但要注意防抖动。纯CSS方案的话用:hover在移动端本来就有问题建议还是加个小JS或者直接用checkbox hack虽然有点脏但确实管用。说到这我突然想起上次有人问我为啥他的动画在Chrome里丝般顺滑到了Safari里跟PPT似的一查丫用了transform: rotate3dSafari对某些3D变换的支持就是有问题换成rotateX就好了。所以多测几个浏览器特别是那帮用iPhone的老板他们看Safari不顺就是你的锅。那些让你想砸键盘的魔鬼细节好了基础功能实现了现在进入玄学调试阶段。我跟你说做这种拟物化特效80%的时间都花在调细节上代码写十分钟调阴影调两小时。缝隙问题窗户关上后边缘有条缝透光。你以为是border没对齐其实是box-sizing的锅。如果你给窗户加了padding或者border但没设box-sizing: border-box那元素的实际尺寸会比设定的大所谓的贴合就对不上了。.skylight-window{/* 这行必须加不然尺寸计算全乱 */box-sizing:border-box;width:200px;height:150px;padding:10px;/* 如果你想做窗框效果 */border:2px solid #333;}z-index地狱窗户打开后应该盖在屋顶上面还是下面逻辑上它是往上翻应该在最上层。但如果屋顶有其他元素比如烟囱啊、瓦片啊z-index没设好窗户打开时可能会被其他东西挡住一半看起来像被空间切割了。我的经验是屋顶z-index: 1窗户默认z-index: 2打开后z-index: 10。为啥打开后要改因为有些浏览器的3D上下文处理有bug动画过程中层级关系会乱手动提权保险点。那个该死的1像素偏移Windows和Mac显示不一样或者缩放比例不同的时候你可能会发现窗户关不严永远有1像素的缝隙或者重叠。这是像素对齐问题特别是在用了translateX(-50%)居中的时候。解决办法试着给父容器加perspective或者给窗户加个backface-visibility: hidden。有时候这能神奇地解决渲染瑕疵虽然原理我也不太清楚可能是激发了浏览器的硬件加速模式。铰链可视化真实的窗户有合页咱们虽然不用图片但可以用CSS模拟一下增加真实感.skylight-window::before{content:;position:absolute;top:-5px;/* 稍微突出屋顶 */left:20%;width:8px;height:10px;background:linear-gradient(to bottom,#silver,#666);border-radius:2px;box-shadow:0 1px 2pxrgba(0,0,0,0.5);/* 右边再来一个 */box-shadow:0 1px 2pxrgba(0,0,0,0.5),140px 0 0 0 #silver,/* 用阴影做第二个铰链 */140px 1px 2pxrgba(0,0,0,0.5);}看用box-shadow复制自身就能做多个铰链省得写一堆伪元素。这招学名叫box-shadow绘图法虽然有点脏但确实好用。反光效果玻璃得有反光吧不然跟木板有什么区别。可以用渐变模拟.skylight-window{background:linear-gradient(135deg,rgba(255,255,255,0.4)0%,transparent 40%,transparent 60%,rgba(255,255,255,0.2)100%),#87CEEB;/* 底色是天空蓝 */background-size:200% 200%;/* 为了做动画 */transition:background-position 0.3s;}.skylight-window.open{background-position:100% 100%;/* 角度变化模拟反光移动 */}这样窗户动的时候反光也会微妙地变化虽然是2D的但肉眼看着就有立体感了。能偷的懒一定要偷毕竟工资是按时间算的咱们程序员的核心竞争力是什么是写得快还能跑得稳。所以能复用的地方绝不重写能省的字节绝不浪费。CSS变量控制全局别在代码里写死颜色、角度、时长用CSS变量一改全改:root{--skylight-width:200px;--skylight-height:150px;--open-angle:-110deg;--anim-duration:0.8s;--hinge-color:#888;}.skylight-window{width:var(--skylight-width);height:var(--skylight-height);transition:transformvar(--anim-duration);}/* 后面直接用这些变量 */产品经理说角度再大点你改一行代码就行不用满世界找rotateX。纯CSS交互不写JS如果你只是想做hover效果别写JS事件监听直接.roof-slope:hover .skylight-window{animation:openSkylightvar(--anim-duration)forwards;}/* 但是hover离开时会瞬间弹回不太自然 *//* 所以最好用checkbox hack或者:focus-within */checkbox hack的原理是用label包着input checkbox隐藏起来点击label就切换checkbox状态然后用:checked选择器控制动画。这样连JS都不用纯HTMLCSS就能实现点击切换。labelclassroof-slopeinputtypecheckboxclassskylight-togglehiddendivclassskylight-window/div/label.skylight-toggle:checked .skylight-window{animation:openSkylight 0.8s forwards;}.skylight-toggle:not(:checked) .skylight-window{animation:closeSkylight 0.6s forwards;}这样点击屋顶任意位置都能开关窗手机上也支持比:hover靠谱多了。details标签的妙用HTML5有个details标签本来就是用来做展开收起的语义化完美detailsclassroof-containersummaryclassskylight-handle点击打开天窗/summarydivclasssky-view!-- 这里放天窗后面的内容比如星空 --哇是星空/div/details然后CSS这样写.roof-container{position:relative;/* 屋顶样式 */}.skylight-handle{list-style:none;/* 去掉默认的小三角 */cursor:pointer;/* 天窗样式 */}.sky-view{position:absolute;top:0;left:0;z-index:-1;/* 放在天窗后面 */opacity:0;transition:opacity 0.3s;}.roof-container[open] .sky-view{opacity:1;}.roof-container[open] .skylight-handle{animation:openSkylight 0.8s forwards;}这样连checkbox都省了纯原生HTML无障碍访问满分搜索引擎也看得懂。遇到bug别硬刚先问自己这三个土问题我做前端这么多年发现80%的CSS诡异问题都是这三个原因省得你抓头发“z-index是不是又打架了”z-index这玩意儿不是全局的是在各自的层叠上下文里比较的。你给子元素设了z-index: 9999但父元素z-index: 1那它永远盖不住另一个z-index: 2的父元素下的子元素。先检查父级有没有设position和z-index再看看transform会不会创建新的层叠上下文对transform也会。“父容器是不是overflow:hidden把娃截肢了”窗户打开后转出去了突然一半不见了八成是父容器或者祖宗容器设了overflow: hidden把超出部分裁剪了。解决办法要么去掉overflow可能会影响布局要么把窗户移出那个容器用fixed或者更上层的定位。“transform-style: preserve-3d忘写了”3D动画做着做着变2D了或者旋转的时候看起来是扁的检查父容器有没有设transform-style: preserve-3d以及perspective是不是设在正确的元素上。perspective要设在3D变换元素的父级上而不是自身上这点反直觉但就是这样。还有个 bonus question“是不是又他娘的是缓存”改了半天没反应CtrlF5一下好了。这种时候真的想给浏览器一巴掌。最后教你个骚的星空磨砂玻璃效果基础版做完了咱们来加点料。想象一下窗户是磨砂玻璃的后面是星空打开的时候光线变化玻璃反光流动是不是很电影感其实就几行代码.skylight-window{/* 玻璃磨砂效果 */backdrop-filter:blur(8px);background:rgba(255,255,255,0.1);border:1px solidrgba(255,255,255,0.3);/* 玻璃边框高光 */box-shadow:0 4px 30pxrgba(0,0,0,0.1),inset 0 0 20pxrgba(255,255,255,0.2);}/* 星空背景放在屋顶后面 */.roof-slope::before{content:;position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(2px 2px at 20px 30px,#eee,rgba(0,0,0,0)),radial-gradient(2px 2px at 40px 70px,#fff,rgba(0,0,0,0)),radial-gradient(2px 2px at 50px 160px,#ddd,rgba(0,0,0,0)),radial-gradient(2px 2px at 90px 40px,#fff,rgba(0,0,0,0)),radial-gradient(2px 2px at 130px 80px,#fff,rgba(0,0,0,0)),radial-gradient(2px 2px at 160px 120px,#ddd,rgba(0,0,0,0));background-repeat:repeat;background-size:200px 200px;z-index:-1;opacity:0.3;transition:opacity 0.8s;}/* 窗户打开后星空变亮 */.roof-slope:hover::before, .roof-slope:has(.skylight-window.open)::before{opacity:1;}backdrop-filter就是磨砂玻璃的灵魂但要注意浏览器支持Safari老版本需要-webkit-前缀。如果不支持就降级成半透明的纯色背景也还能看。星空是用径向渐变radial-gradient画的几个小圆点重复排列比用图片省资源还能无限放大不失真。你可以多写几组坐标让星星分布更自然。最后加个小互动窗户打开的时候飘进来几片雪花或者光尘用CSS动画做几个小粒子从天窗位置往下飘营造那种打开阁楼看到外面在下雪的氛围。代码就不展开了原理就是绝对定位keyframes位移你懂的。写这种小特效最爽的地方就是代码不多但视觉效果炸裂属于投入产出比极高的活儿。下次产品再让你加个简单的动效别急着翻组件库试试手撸一个说不定就用上了今天这些套路。完事儿收工。代码都给你了注释也写得够啰嗦再 copy-paste 跑不起来就是人品问题了。有啥坑记得回来留言让我也乐呵乐呵。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进