1.图片宽100%,设置图片为正方形
给图片外面再套层div
.image{
position: relative;
width: 100%;
height: 0;
padding-top: 100%; //调整图片比例
margin-bottom: 5%;
}
.image img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
2.鼠标悬停图片加阴影放大动画效果
效果网站:12种鼠标悬停网站图片展示方式 - 图片特效 - 站长图库
鼠标悬停放大图片特效_北辰Beichen的博客-CSDN博客_悬停放大
放大:
overflow:hidden;(外部容器超出部分隐藏)
transition: 0.3s linear;(图片自身设置过渡属性)
transform:scale(1.1);(鼠标悬停放大)
阴影:
灰度过滤属性
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
img:hover{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
3.v-if显示下拉框添加过渡动画效果(transition标签)
vue中transition实现过渡动画效果_敲起来blingbling的博客-CSDN博客_vue的transition过渡动画
4.一键切换中英文(国际化开发ui / 发请求覆盖)
vue-element-admin添加国际化(切换中英文)_EvaY_Yang的博客-CSDN博客_element中英文切换
5. MetaInfo插件设置meta信息(页面标题等相关的设置)
vue插件MetaInfo的使用_周不凢的博客-CSDN博客_metainfo
6.图片防止压缩变形
object-fit:cover;
【实例】深入详解 CSS 中的 object-fit 5个属性值 - html技术_卡卡网
7.flex布局两端对齐,最后一行左对齐
flex布局 两端对齐 最后一行左对齐_七九-的博客-CSDN博客_两端对齐最后一行
给容器元素的after或者before伪类添加:
.img:after{
display:block;
content:";
width:32%;
height:0;
}