html
复制代码
<template>
<view>
<view class="top_line">
<view class="top_img">
<image src="../../../static/bg/index.png" mode=""></image>
</view>
<view class="top_button">
<image @tap="refresh" class="rotate-me" :class="{'rotated': isRotating}" :src="refresh_icon"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
refresh_icon: getApp().globalData.icon + 'index/refresh.png', //图片
isRotating: false, //旋转状态
}
},
methods: {
refresh() {
this.isRotating = true;
setTimeout(() => {
this.isRotating = false;
}, 2000); // 设置旋转时间，这里为2秒
},
},
onLoad() {
}
}
</script>
<style lang="scss">
//顶部样式
.top_line {
//顶部背景图
.top_img {
image {
width: 100%;
height: 300rpx;
}
}
//顶部刷新按钮
.top_button {
position: absolute;
top: 2%;
right: 10%;
.rotate-me {
width: 50rpx;
height: 50rpx;
//元素变化过渡效果(transition：指定需要过渡的属性,1s过渡持续的时间;ease：指定过渡效果的缓动函数)
transition: transform 1s ease;
}
.rotated {
animation-name: rotate;//指定动画名称rotate，使用@keyframes rotate
animation-duration: 1s;//指定动画的持续时间
animation-timing-function: ease;//ease 函数，表示动画开始缓慢，然后加速，最后减速到结束，使得旋转动画看起来更加平滑。
animation-iteration-count: 2;//指定动画的重复次数
}
@keyframes rotate {
0% {//初始状态
transform: rotate(0deg);
}
100% {//完成时状态
transform: rotate(360deg);
}
}
}
}
</style>
