🥤【每日一练】酷夏可乐

·  阅读 23
🥤【每日一练】酷夏可乐

⛳️ link:

⛳️ 知识点:

  • 浏览器默认字体高都是16px,所以未经调整的浏览器2em就是32px
  • px rem(根据根元素相乘) em(根据父元素相乘)
  • :root 文档根元素,用来声明全局属性,使用var()来引用
  • background: radial-gradient(#f7efef, #88CBF0); 径向渐变:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

确定圆的类型shape:
-  ellipse (默认): 指定椭圆形的径向渐变。
-  circle :指定圆形的径向渐变

定义渐变的大小,可能值size:
-  farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
-  closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边
-  closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角
-  farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边

定义渐变的位置。可能值position:

-  center(默认):设置中间为径向渐变圆心的纵坐标值。
-  top:设置顶部为径向渐变圆心的纵坐标值。
-  bottom:设置底部为径向渐变圆心的纵坐标值。

start-color, ..., last-color : 用于指定渐变的起止颜色。
复制代码
  • clip-path: circle(120px); 使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。可以指定一些特定形状。裁剪

⛳️ 效果图:

desktop:

Kapture 2022-07-14 at 15.02.52.gif

ipad:

Kapture 2022-07-14 at 15.06.13.gif

⛳️ 布局:

<div class="card">
    <div class="content">
      <h2></h2>
      <p></p>
      <a href="#"></a>
    </div>
    <div class="circle"></div>
    <img src="./static/img/real-sugar.png" alt="" />
</div>
复制代码

⛳️ 动态

不用生硬,所有的动画有个过程就用transition: 0.3s

hover上去pc端的变化:

左右结构

  • 图 向右 (定位left改变)
  • 字 显现 (visibility: hidden; opacity: 0; -> visibility: visible; opacity: 1;)
  • 背景块 由圆变整 (clip-path: circle(120px); -> clip-path: circle(400px);)

hover上去ipad端的变化:

上下结构

  • 图 向下 (定位top改变)
  • 字 显现
  • 背景块 由圆变整

代码

视频学习地址

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改