css效果Demo
nothing-sy2023-04-14css
下划线动效 background的用法
Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
<template>
<span>
Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
</span>
</template>
<style lang="scss" scoped>
span{
background: linear-gradient(black,black);
background-repeat: no-repeat;
background-size: 0 5px;
background-position: right bottom;
transition: background-size 0.3s linear;
}
span:hover{
background-position: left bottom;
background-size: 100% 5px;
}
</style>
水杯效果 clip-path属性裁剪
<template>
<div class="cup">
</div>
</template>
<script setup lang='ts'>
</script>
<style lang="scss" scoped>
.cup{
width: 50px;
height: 80px;
background-color: aqua;
position: relative;
overflow: hidden;
clip-path: polygon(-10% 0 ,110% 0, 85% 100%, 15% 100%);
}
.cup::before{
content: '';
width: 80px;
height: 80px;
position: absolute;
top: -23px;
left: -10px;
border-radius: 30%;
animation: water-loop 4s linear infinite;
background-color: white;
}
@keyframes water-loop {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
字体交融 filter属性
nothing-sy.github.io
<template>
<div><span>nothing-sy.github.io</span></div>
</template>
<style lang='scss' scoped>
div{
height: 200px;
padding-top: 30px;
background-color: black;
font-size: 100px;
font-weight: 500;
text-align: center;
filter: contrast(60);/*颜色对比度，让子元素模糊的字体边缘自由选择转黑还是转白*/
}
span{
color: white;
filter: blur(2px);
animation: loop2 4.5s linear infinite;
}
@keyframes loop2 {
from {
filter: blur(10px);
letter-spacing: -50px;
}
to{
letter-spacing: 0px;
filter: none;
}
}
</style>
Flip动画
Flip动画是一种实现思路并非某种技术。类似vue的内置组件transiton也是利用这种思路。例子： 当数组数据顺序改变希望有顺序改变的动画。 这种情况，使用单纯css是无法实现的。因此有了FLIP的思路。
F: first 记录元素起始位置 L: last 记录元素排序后终止位置 上面两步之后我们就可以获取到，元素顺序变化后的偏差值，在浏览器还没有重新渲染的情况下，把dom顺序已经改变的元素通过设置偏移translate，还原到起始位置。 比如数组reverse，dom顺序已经倒叙，但是通过translate属性，让其保持在还未改变前的位置。即下面的步骤invert I: invert 反转元素到起始位置 P: play 播放动画 将之前设置的translate属性去除，还原排序后应该在的位置。
以上步骤加起来就会有一个动画效果，看例子。代码比较随意大致意思就这样
<script setup>
import {ref} from 'vue'
import {ElButton} from 'element-plus'
const cloneArray = arr => JSON.parse(JSON.stringify(arr))
const defaultList = Array.from({length: 5}, (item,index) => ({
name:index,
y: index * 50 + index * 20,
}))
const list = ref(defaultList)
const revert = async () => {
const reverList = cloneArray(defaultList).reverse()
reverList.forEach((item,index) => {
item.endY = index * 50 + index * 20
item.translateY = item.y - item.endY
item.transform = true
})
list.value = reverList
setTimeout(() => {
list.value = reverList.map(item => {
return {
...item,
transform: false,
transition: true
}
})
}, 1e3)
}
</script>
<template>
<div class="flex">
<div class="item" v-for="item in list" :key="item.name"
:style="{
transform: `${item.transform ? `translateY(${item.translateY}px)` : 'translateY(0px)'}`
,transition: `${item.transition ? 'transform linear 1s': 'none'}`
}"
>
{{ item.name }}
</div>
</div>
<ElButton type="primary" @click="revert">改变顺序</ElButton>
</template>
<style scoped>
.flex{
display: flex;
flex-direction: column;
row-gap: 20px;
}
.item{
width: 100px;
height: 50px;
line-height: 50px;
background-color: aquamarine;
border-radius: 10px;
}
</style>