# 无缝平滑效果
<style scoped>
main {
width: 100%; height: 329px;
display: flex;
background: url('https://cdn-static.learntech.cn/notes/20201105/1114-2u3tCr.jpg!min') repeat-x 0 center/auto 100%;
animation: smooth 10s linear infinite;
animation-play-state: running;
}
/*main:hover, main:focus {
animation-play-state: running;
}*/
@keyframes smooth {
to {
background-position: 1970px center;
}
}
</style>
<template>
<main class="main"></main>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
上图为一张左右对称的图片拼接而成，只需使用一张左右可以无缝对接（类似360°全景图）的图片可更完美。