1.template代码
<view class="voice-image"> <view class="lines"> <text class="hr hr1" style="{{lineAnimation?‘animation:liner .5s -1s ease-in-out alternate infinite;‘:‘‘}}"></text> <text class="hr hr2" style="{{lineAnimation?‘animation:liner .5s -1.9s ease-in-out alternate infinite;‘:‘‘}}"></text> <text class="hr hr3" style="{{lineAnimation?‘animation:liner .5s -1.2s ease-in-out alternate infinite;‘:‘‘}}"></text> <text class="hr hr4" style="{{lineAnimation?‘animation:liner .5s -1.7s ease-in-out alternate infinite;‘:‘‘}}"></text> <text class="hr hr5" style="{{lineAnimation?‘animation:liner .5s -1.2s ease-in-out alternate infinite;‘:‘‘}}"></text> <text class="hr hr6" style="{{lineAnimation?‘animation:liner .5s -1.5s ease-in-out alternate infinite;‘:‘‘}}"></text> <text class="hr hr7" style="{{lineAnimation?‘animation:liner .5s -1s ease-in-out alternate infinite;‘:‘‘}}"></text> </view> </view>
2.css代码
.voice-image{ display: inline-flex; width: 102rpx; height: 70rpx; margin-bottom: 36rpx; .lines{ width: 100%; height: 100%; display: inline-flex; justify-content: space-between; align-items: center; } } .hr{ background-color: #fff; width: 4rpx; height: 100%; float: right; } .hr1{ transform: scaleY(.6); } .hr2{ } .hr3{ transform: scaleY(.5); } .hr4{ } .hr5{ transform: scaleY(.6); } .hr6{ } .hr7{ transform: scaleY(.7); } @keyframes liner { 0% { transform: scaleY(.5); } 100% { transform: scaleY(1); } }
原文地址:https://www.cnblogs.com/fairy62/p/12612200.html
时间: 2024-10-22 16:46:35