⛳️ 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:
ipad:
⛳️ 布局:
<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改变)
- 字 显现
- 背景块 由圆变整
