如何有效解决韶关网站建设公司网站问题？

韶关网站建设公司,网站问题解决,郑州做网站托管,昨晚广州天河发生事件#x1f469; 个人主页#xff1a;不爱吃糖的程序媛 #x1f64b;‍♂️ 作者简介#xff1a;前端领域新星创作者、CSDN内容合伙人#xff0c;专注于前端各领域技术#xff0c;成长的路上共同学习共同进步#xff0c;一起加油呀#xff01; ✨系列专栏#xff1a;前端… 个人主页不爱吃糖的程序媛 ‍♂️ 作者简介前端领域新星创作者、CSDN内容合伙人专注于前端各领域技术成长的路上共同学习共同进步一起加油呀 ✨系列专栏前端面试宝典、JavaScript进阶、vue实战 资料领取前端进阶资料以及文中源码可以在公众号“不爱吃糖的程序媛”领取 前端面试基础知识题 1.为什么有时候⽤translate来改变位置⽽不是使用position进行定位 translate 是 transform 属性的⼀个值。 改变transform或opacity不会触发浏览器重新布局reflow或重绘repaint只会触发复合compositions。 ⽽改变绝对定位会触发重新布局进⽽触发重绘和复合。 transform使浏览器为元素创建⼀个 GPU 图层但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效可以缩短平滑动画的绘制时间。 ⽽translate改变位置时元素依然会占据其原始空间绝对定位就不会发⽣这种情况。 2.什么是硬件加速 硬件加速就是将浏览器的渲染过程交给GPU处理而不是使用自带的比较慢的渲染器。这样就可以使得 animation 与 transition 更加顺畅。 我们可以在浏览器中用css开启硬件加速使GPU (Graphics Processing Unit) 发挥功能从而提升性能。 现在大多数电脑的显卡都支持硬件加速。鉴于此我们可以发挥GPU的力量从而使我们的网站或应用表现的更为流畅。 3.怎么使用 CSS3 实现动画 CSS动画CSS Animations是为层叠样式表建议的允许可扩展标记语言XML元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程。 常见的动画效果有很多如平移、旋转、缩放等等复杂动画则是多个简单动画的组合。 css实现动画的方式有如下几种 transition 实现渐变动画transform 转变动画animation 实现自定义动画 实现方式 transition 实现渐变动画 transition的属性如下 property:填写需要变化的css属性duration:完成过渡效果需要的时间单位(s或者ms)timing-function:完成效果的速度曲线delay: 动画效果的延迟触发时间 其中timing-function的值有如下 注意并不是所有的属性都能使用过渡的如display:none-display:block 举个例子实现鼠标移动上去发生变化动画效果 style.base {width: 100px;height: 100px;display: inline-block;background-color: #0EA9FF;border-width: 5px;border-style: solid;border-color: #5daf34;transition-property: width, height, background-color, border-width;transition-duration: 2s;transition-timing-function: ease-in;transition-delay: 500ms;}/*简写*//*transition: all 2s ease-in 500ms;*/.base:hover {width: 200px;height: 200px;background-color: #5daf34;border-width: 10px;border-color: #3a8ee6;} /style div classbase/divtransform 转变动画 包含四个常用的功能 translate位移scale缩放rotate旋转skew倾斜 一般配合transition过度使用。 注意的是transform不支持inline元素使用前把它变成block。