一 、效果
二、代碼
- wxml
<view class="customer-service"><button class="btn" open-type="contact"></button><image class="pic" src="https://ts4.cn.mm.bing.net/th?id=OIP-C.3SGSiRPuOU9uH5VNVOMPwgHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" mode="aspectFill"></image><view class="line"></view>
</view>
- wxss
.customer-service {width: 100rpx;height: 100rpx;background-color: var(--themeColor);position: fixed;z-index: 10;bottom: 100rpx;right: 60rpx;border-radius: 50%;box-shadow: 0 0 20rpx rgba(189, 160, 102, 0.8);
}.customer-service .btn {position: relative;z-index: 2;border-radius: 50%;width: 100%;height: 100%;opacity: 0;
}.customer-service .pic {width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;z-index: 1;
}.customer-service .line {width: 100%;height: 100%;border: 3px solid palevioletred;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius: 50%;animation: emit 1s infinite;
}@keyframes emit {0% {}100% {border-width: 1px;opacity: 0;transform: scale(1.5);}
}
animation: emit 1s infinite;//1s執行一次? 修改時間即可
動畫效果放大1.5倍
@keyframes emit {0% {}100% {border-width: 1px;opacity: 0;transform: scale(1.5);}
}
Transform屬性應用于元素的2D或3D轉換。這個屬性允許你將元素旋轉,縮放,移動,傾斜等。
translate(位移) | translate有三個屬性值即x軸,y軸和z軸,語法: Transform:translateX(apx) / translateY(bpx) / translateZ(cpx); 簡寫:transform:translate(apx,bpx,cpx); |
scale(縮放) | 用法:transform: scale(0.5) ?或者 ?transform: scale(0.5, 2); 參數表示縮放倍數;
|
rotate(旋轉) | 共一個參數“角度”,單位deg為度的意思,正數為順時針旋轉,負數為逆時針旋轉,上述代碼作用是順時針旋轉45度。 rotate()默認旋轉中心為圖片的中點 |
傾斜(傾斜) | div{transform: skewY(10deg);}? //對Y方向進行傾斜10度,意思是保留Y方向,將盒子沿著X方向進行傾斜。 |