前言
最近在vue官网学习发现了一个很有意思的效果，在尝试实现的同时也复习了很多css属性。
css作为前端开发十分重要的一环，负责整个页面的样式和简单交互部分，与用户的产品的体验息息相关。
可以这样说css很大程度决定了用户对产品的第一印象。程序开发也是一个看脸的世界。
效果演示
功能分析
hover时与未hover时的差异
- 左侧图标变大 -- tranform:scale() 修改元素的大小，可以选择某一个方向
- hover后出现了边框
- 图标出现了色彩 -- 切换了图标 | 使用了css滤镜 filter()
- 出现了两行文字 -- 改变了文字的展示方式，display,transform,color,opacity
- 中心的文字出现渐变颜色 -- backgroud-image,background-clip
同时所有样式都有过渡效果即有延迟需要使用transtion: 时间。
代码实现
模板结构
<a class="contain" target="_blank">
<img width="22" height="22" src="https://cn.vuejs.org/viteconf.svg
">
<span>
<p class="extra-info">Building Together</p>
<p class="heading">ViteConf 24 - Oct 3</p>
<p class="extra-info">Get your free ticket!</p>
</span>
</a>
样式
.contain{
display:flex;
justify-content:center;
align-items:center;
border-radius: 4px;
// 元素间隔
gap:1rem;
// 元素滤镜
filter:grayscale(1);
img{
//放大倍数
transform:scale(1.25)
//过渡效果，实现了hover图片放大效果
transition:transform .5s
}
.extra-info{
opacity:0;
//过渡效果，实现了未hover时文字为隐藏
transition: opacity .5s
}
heading{
color:black
}
}
.contain:hover{
filter:none;
border:2px solid #9499ff;
.extra-info{
opacity:.9;
}
img{
transform:scale(1.75)
}
heading{
//使用渐变作为文字背景同时使用clip文件裁剪背景，将文字设为透明，此时显示的即是渐变背景
background-image: linear-gradient(120deg, #b047ff 16%, #9499ff, #9499ff);
background-clip: text;
//浏览器兼容
-webkit-background-clip: text;
color:transparent;
}
}
关键样式
1. flex弹性布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
Flex 布局语法教程 | 菜鸟教程 (runoob.com)
2. filter
CSS
filter属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
使用对应的滤镜函数处理元素样式
filter - CSS：层叠样式表 | MDN (mozilla.org)
3. transform
CSS
transform属性允许你旋转、缩放、倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间实现的。
transform - CSS：层叠样式表 | MDN (mozilla.org)
4. transition
transitionCSS 属性是transition-property、transition-duration、transition-timing-function和transition-delay的一个简写属性。
属性分别为
- 需要过渡的css属性
- 过渡持续的时间
- 时间函数（加速度曲线 --ease，ease-in，ease-out，ease-in-out）
- 过渡延迟多久开始
transition - CSS：层叠样式表 | MDN (mozilla.org)
5. 渐变文字
文字无法直接设置为渐变色，需要通过设置渐变背景然后将文字设为透明间接设置文件颜色。
text{
backgroud-image:linear-gradient(120deg, #b047ff 16%, #9499ff, #9499ff);;
backgroud-clip:text;
color:transparent;
}
