Transition property: transition
<!-- 使元素所有变化过程都可见 -->
transition: all 1s
transition: 1s
<!-- 指定属性变化过程可见，过渡时间2s, 延迟1s -->
transition: 指定属性 2s 1s
Practical application:
The effect is that when the mouse enters the picture, the picture becomes larger and the picture border changes color
<template>
<div>
<img src="imgs/01.jpg">
</div>
<template>
<style>
img {
width: 60px;
height: 60px;
border: 3px solid #ffe4e1;
border-radius: 50%
transition: width 1s, height 1s, border 0.5s 0.5s;
}
img:hover {
width: 120px;
height: 120px;
border: 4px solid #6871dc;
}
</style>
Background gradient: background: linear-gradient()
<!-- 指定方向渐变 -->
background: linear-gradient(to left, #e66465, #9198e5);
background: linear-gradient(to left botton, #e66465, #9198e5);
<!-- 指定角度渐变 -->
background: linear-gradient(0.4turn, #78f, #f78)
background: linear-gradient(135deg, #78f, #f78)
background: linear-gradient(135deg, #78f 40%, #f78 60%);
<!-- 图片加颜色角度渐变 -->
background:linear-gradient(70deg,#78f 40%,rgba(0,0,0,0) 60%),url(image/imgs/04.jpg);
background-size:cover;
omit redundant words
<template>
<div class="textDelay">拖延的理由有很多种，最让人心疼的一种，大概就是"我必须完全做好一件事，才敢向人交代"。他们不是因为不负责，而是过于尽责了。</div>
<div class="textBoat">留在港口的小船最安全，亲爱的，但这不是造船的目的。</div>
</template>
<style>
<!-- 超过两行的文字省略 -->
.textDelay {
width: 100px;
margin: 5px;
line-height: 30px;
max-height: 60px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
}
<!-- 超过一行的文字省略 -->
.textBoat {
width: 100px;
margin: 5px;
line-height: 30px;
max-height: 30px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
}
</style>
There will be more to add later