css属性的应用

漫江
280 阅读4分钟

github.com/PstereoJW/c…

赛伯朋克风 btn

  • 我的版本

赛伯朋克.gif

  • 切角背景

    • 左下角的斜角实现

      • 方法一，使用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站原版 bilibili_ori.gif
  • 我的版本

bilibili_mjw.gif

  • 明确渲染图层
    • 背景树
    • 眨眼小孩
    • 草地
    • 落叶地
    • 小精灵
    • 一片大树叶
  • 确定图片位置
    • 目的：通过获取图像的坐标位置和大小来计算得到鼠标相对于图片的位置
    • 通过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

  • 实际效果

xinjiang.gif

  • 明确渲染图层
    • 背景层与展示内容层
  • 确定图片的位置
    • 目的：通过获取图像的坐标位置和大小来计算得到鼠标相对于图片的位置
    • 通过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拆解特效

  • 我的版本

homepod.gif

  • position:sticky
    • 在父元素在可见视口时可用
  • 在滚动时为每一个图层计算透明度
avatar
文章
阅读
粉丝