css属性的应用

github.com/PstereoJW/c…

赛伯朋克风 btn

• 我的版本

• 切角背景

  • 左下角的斜角实现

    • 方法一，使用clip-path属性

    clip-path: polygon(0 0, 100% 0, 100% 100%,10% 100%, 0 90%);
    复制代码

    • 方法二，通过linear-gradient直接设置背景色

    background: linear-gradient(45deg, transparent 5%, #ff013c 50%);
    复制代码

• 重叠btn
  • 通过after伪类重叠第一个btn
• 对第二个btn进行多个片段的裁剪，同时进行动画位移，实现故障风的效果
  • 利用clip-path属性进行裁剪

    clip-path: inset(80% -6px 0 0);
    复制代码

    • inset(top,right,bottom,left),表示从上右下左各裁剪多少参数，这里的-6px是因为btn样式设置的box-shadow不计算在容器的范围里
    • 自定义多个clip-path裁剪位置和大小，存储到css变量中
  • 利用transform进行位移
  • 通过animation实现动画效果
  • 对伪类样式进行样式调整，增加故障效果
    • background属性，text-shadow

b站 banner的景深和对焦效果-秋

• b站原版

• 我的版本

• 明确渲染图层
  • 背景树
  • 眨眼小孩
  • 草地
  • 落叶地
  • 小精灵
  • 一片大树叶
• 确定图片位置
  • 目的：通过获取图像的坐标位置和大小来计算得到鼠标相对于图片的位置
  • 通过getBoundingClientRect()接口获取图像的坐标位置和大小
    • getBoundingClientRect().width与offsetWidth的区别在于，css存在transforms时，offsetWidth和offsetHeight返回元素的布局宽高，getBoundingClientRect()将返回实际渲染的宽高
    • 修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来
    • getBoundingClientRect().width用于resize处理
  • 通过onMouseEnter事件来获取鼠标初始坐标位置
  • 通过onMouseMove事件来获取鼠标坐标位置
  • 计算鼠标移动的比例(实时x轴坐标-初始x轴坐标)/整个背景图片的宽度
• 计算css属性
  • 目的:计算blur参数,translate参数,rotate参数
  • 为了形成视觉差，设置不同图层的blur参数,translate参数
• 图层增加默认属性配置
  • scale:初始化图片长宽的比例
  • blur:默认的模糊数值
  • x:x轴坐标
  • y:y轴坐标
  • handleBlurChange:根据鼠标的移动比例实时计算每个图层blur的数值
  • handleParallaxChange:根据鼠标的移动比例实时计算每个图层x轴方向的偏移量，不同图层移动的快慢形成视差
• 设置定时器实现持续眨眼
• 属性配置相关的api
  • 有用到data-* 自定义数据属性用来初始化图片的width,height
• css属性
  • filter:blur
  • transform:translate() rotate()
  • translateZ(0)
    • 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能

3d效果banner

• 实际效果

• 明确渲染图层
  • 背景层与展示内容层
• 确定图片的位置
  • 目的：通过获取图像的坐标位置和大小来计算得到鼠标相对于图片的位置
  • 通过getBoundingClientRect()接口获取图像的坐标位置和大小
  • 通过onMouseMove事件来获取鼠标坐标位置
  • 将获得的图片数据和鼠标数据进行计算得到鼠标x轴与y轴方向的移动比例
    • x轴方向比例:(鼠标实时x轴坐标值-图片left)/图片宽度
    • y轴方向比例:(鼠标实时y轴坐标值-图片top)/图片宽度
• 计算css属性
  • 目的：计算旋转属性参数
  • 透视属性:(transform:perspective)观察者与z=0平面的距离，也叫做视点的位置，当运行rotateX等旋转效果时，xy平面进行旋转
  • 旋转:通过鼠标x轴与y轴方向移动比例来计算rotateX,rotateY的值
  
  - 执行动画:requestAnimationFrame中调用我们的css属性值的计算，并且更新css样式
• css样式更新
  • 鼠标移入与移出时的过渡动画:transition属性增加过渡变化，如增加贝塞尔曲线，平滑过渡
  • 鼠标移出时的样式复原
• 图层增加默认属性配置
  • reverse: 为true，相反方向移动
  • max: 明确最大倾斜角度
  • perspective: 透视效果
  • easing: 缓动函数
  • scale: 控制鼠标进入时的图像缩放
  • speed: 有效的过渡时间
  • transition: 是否增加过渡
  • axis: 绕轴旋转明确轴(x,y)
  • reset: 控制鼠标移出时的图像还原
• 可以将此功能组件化，多个图层进行配置

苹果HomePod拆解特效

• 我的版本

• position:sticky
  • 在父元素在可见视口时可用
• 在滚动时为每一个图层计算透明度