CSS3实现直播滚动特效

 

 

 

import livingScroll from '@/components/living-scroll/living-scroll.vue';

components:{
livingScroll
},

<livingScroll color="#fff"  backgroundColor="#ffa029" title="直播中"></livingScroll>

<template>
<view class="">
<view :style="{ 'background-color': backgroundColor , 'color' : color}" class="dh">
<view style="display: flex;" class="">
<view :style="{ 'background-color': color}" class="dh1"></view>
<view :style="{ 'background-color': color}" class="dh2"></view>
<view :style="{ 'background-color': color}" class="dh3"></view>
</view>
<view :style="{'color' : color }" class="">{{title}}</view>
</view>
</view>
</template>

<script>
export default {
props: {
title: {
type: String,
default: ""
},
color: {
type: String,
default: "#fff"
},
backgroundColor: {
type: String,
default: "#ffa029"
},
},
data() {
return {

}
},
mounted() {

},
computed: {

},
methods: {

}
}
</script>

<style>
.dh{
display: flex;
position: absolute;
right: 10upx;top: 10upx;
background-color: #FFA029;
z-index: 99999;
color: #fff;
font-size: 26upx;
padding: 0 10upx;
border-radius: 10upx;
}
.dh1{
width: 4upx;
-webkit-animation: .8s .1s living linear infinite backwards normal;
animation: .8s .1s living linear infinite backwards normal;
-webkit-animation-delay: -1.1s;
}
.dh2{
width: 4upx;
margin-left: 4upx;
-webkit-animation: .8s .3s living linear infinite backwards normal;
animation: .8s .3s living linear infinite backwards normal;
-webkit-animation-delay: -1.3s;
}
.dh3{
width: 4upx;
margin-left: 4upx;
margin-right: 4upx;
-webkit-animation: .8s .6s living linear infinite backwards normal;
animation: .8s .6s living linear infinite backwards normal;
-webkit-animation-delay: -1.6s;
}
@-webkit-keyframes living{
0%{-webkit-transform:scaleY(0.5);transform:scaleY(0.5);-webkit-transform-origin:0 10px;transform-origin:0 10px}
50%{-webkit-transform:scaleY(.3);transform:scaleY(.3);-webkit-transform-origin:0 10px;transform-origin:0 10px}
100%{-webkit-transform:scaleY(0.5);transform:scaleY(0.5);-webkit-transform-origin:0 10px;transform-origin:0 10px}
}
@keyframes living{
0%{-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);-webkit-transform-origin:0 10px;-ms-transform-origin:0 10px;transform-origin:0 10px}
50%{-webkit-transform:scaleY(.3);-ms-transform:scaleY(.3);transform:scaleY(.3);-webkit-transform-origin:0 10px;-ms-transform-origin:0 10px;transform-origin:0 10px}
100%{-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);-webkit-transform-origin:0 10px;-ms-transform-origin:0 10px;transform-origin:0 10px}
}

</style>