diff --git a/src/pages/index/components/chat/ChatTopNavBar/index.vue b/src/pages/index/components/chat/ChatTopNavBar/index.vue index 890337a..e48eb38 100644 --- a/src/pages/index/components/chat/ChatTopNavBar/index.vue +++ b/src/pages/index/components/chat/ChatTopNavBar/index.vue @@ -5,13 +5,10 @@ - + :class="['ip w-32 h-32', { 'image-animated': show }]" + > - + diff --git a/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss b/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss index 7c8ba5c..2f3f752 100644 --- a/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss +++ b/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss @@ -3,8 +3,23 @@ } .ip { - flex: 0 0 123px; - width: 123px; - height: 166px; - margin-top: -20px; + flex: 0 0 158px; + width: 158px; + height: 134px; + background-image: url("https://oss.nianxx.cn/mp/static/version_101/dh/dh.png"); + background-repeat: no-repeat; + background-size: 158px auto; + background-position: 0 0; + animation: sprite-play 2s steps(40) infinite; +} + +@keyframes sprite-play { + 0% { + background-position: 0 0; + } + + 100% { + /* 40 帧 × 每帧高度约 139px,终点应为 -(40-1)*139 = -5421px */ + background-position: 0 -5424px; + } }