微信小程序实现动画旋转和缩放同时进行
时间: 2024-10-29 17:18:32 浏览: 88
微信小程序实现move.css动画效果的源码
在微信小程序中,要实现元素同时旋转和缩放的效果,你可以通过CSS3的`transform`属性来达成。下面是一个基本的示例:
```html
<view class="container">
<image class="rotating-zooming" src="{{yourImageSrc}}" />
</view>
```
然后,在对应的CSS文件中设置样式:
```css
.container {
position: relative;
}
.rotating-zooming {
position: absolute;
width: auto; /* 确保图片按原比例显示 */
height: auto;
transition: transform 0.5s ease-in-out; /* 添加过渡效果 */
}
.rotating-zooming:hover {
transform: scale(1.1) rotate(45deg); /* 当鼠标悬停时,放大10%并顺时针旋转45度 */
}
```
当用户鼠标悬停在`image`元素上时,它会按照设定的动画效果进行旋转和缩放。这里的`scale()`函数用于调整元素大小,`rotate()`则控制旋转角度。
阅读全文