CSS 实现图片旋转和水波纹动画效果

背景

通过 CSS 动画实现图片旋转和水波纹动画效果，并做成 Vue 组件，方便以后复用。

代码

<template><view class="container"><view class="rotate-container"><view class="dot"><van-image :image-class="rotateActive" round width="150" height="150" :src="src"></van-image><view :class="{pulse: rotate, p1: rotate}"></view><view :class="{pulse: rotate, p2: rotate}"></view></view></view><view class="info-container"><view class="song-name">{{songName}}</view><view class="author-name">{{authorName}}</view></view></view>
</template><script>export default {name: 'RotateImage',props: {rotate: {type: Boolean,default: true},src: {type: String,default: 'https://img.yzcdn.cn/vant/cat.jpeg'},songName: {type: String,default: '告白气球'},authorName: {type: String,default: '周杰伦'}},computed: {rotateActive() {return this.rotate ? 'rotate' : ''}},data() {return {}},methods: {}}
</script><style>.container {display: flex;flex-direction: column;align-items: center;position: relative;}.dot {position: relative;}/* --- 水波纹动画 start --- */.pulse {position: absolute;width: 150px;height: 150px;left: 0;top: 0;border: 3rpx solid #ffd213;border-radius: 50%;opacity: 0;}.p1 {animation: warn 2s ease-out infinite;}.p2 {animation: warn2 2s ease-out infinite;}@keyframes warn {0% {transform: scale(1.2);opacity: 0.0;}25% {transform: scale(1.2);opacity: 0.1;}50% {transform: scale(1.5);opacity: 0.3;}75% {transform: scale(1.8);opacity: 0.5;}100% {transform: scale(2);opacity: 0.0;}}@keyframes warn2 {0% {transform: scale(1.2);opacity: 0.0;}25% {transform: scale(1.2);opacity: 0.1;}50% {transform: scale(1.2);opacity: 0.3;}75% {transform: scale(1.5);opacity: 0.5;}100% {transform: scale(1.8);opacity: 0.0;}}/* --- 水波纹动画 end --- *//* --- 图片旋转动画 start --- */@-webkit-keyframes rotation {from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}/* 旋转 */.rotate {display: inline-block;-webkit-transform: rotate(360deg);animation: rotation 8s linear infinite;-moz-animation: rotation 8s linear infinite;-webkit-animation: rotation 8s linear infinite;-o-animation: rotation 8s linear infinite;animation-play-state: running;}/* 清除旋转 */.stop-rotate {-webkit-transform: rotate(0deg);animation: rotation 0s linear infinite;-moz-animation: rotation 0s linear infinite;-webkit-animation: rotation 0s linear infinite;-o-animation: rotation 0s linear infinite;animation-play-state: paused;}/* --- 图片旋转动画 end --- */.info-container {display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 1em;}.author-name {font-size: small;color: #999999;}
</style>

效果

CSS 实现图片旋转和水波纹动画效果相关推荐

Flutter 水波纹动画效果实现
Flutter 水波纹动画效果实现 1. 先上效果图: 2. 实现 2.1 尺寸渐变结合透明度渐变 2.2 多个基本动画效果叠加 3. 总结 1. 先上效果图: 2. 实现我们将该动画拆成三部分来实 ...
vue 鼠标点击特效动画（css3动画），水波纹动画效果
效果展示思路要点通过向数组 waves push操作插入水波纹相关数据,使用 vue v-for 动态更新 waves 生成水波纹数据水波纹使用fixed定位通过点击事件的 clientX 和 ...
微信小程序水波纹动画效果
水波波动效果实现,复制查看效果 wxml <view class="circle"><view class="positionNumber"& ...
html5 水效果图,HTML5 canvas水波纹动画插件waterrippleeffect.js
插件描述:这是一款HTML5 canvas水波纹动画特效.该水波纹动画以插件的形式进行编写,可以是纯js插件,或通过jquery插件来进行调用.它能够制作出逼真的水波纹动画效果使用方法在页面中引入 ...
android曲线水波纹录音动画,Android-贝塞尔曲线实现水波纹动画
Android 系统api提供了quadTo和rQuadTo实现二阶贝塞尔曲线,三阶贝塞尔曲线在这不做阐述,只不过是两个控制点. 效果图首先看张二阶贝赛尔的曲线 Path path = new Pa ...
unity捕鱼达人----炮台的旋转的实现以及水波纹动画的制作
炮台的旋转炮台的转向由鼠标控制,当我们控制鼠标向右旋转使可以发现,炮台的position为负的所以我们可以以炮台的正方向与鼠标位置的夹角来实现炮台的旋转如图中所示用加粗笔所画的表示MousePo ...
css 波纹扩散_css水波纹动画
好久没有写 css 动画了,久到我都忘了了,想当初在大学的时候,写起 css3 的动画,那可是6得很. 今天要实现个水波纹动画,暂且记录一下思路吧刚开始拿到的时候还是有点傻眼,第一种方案,我的想法是 ...
Android百度地图水波纹动画,高德地图实现水波纹扩散
功能修改,要求在地图上有个类似雷达的水波纹扩散的动画,通过大半天时间的研究.查找,终于完成了这项任务,话不多说,下面直接贴出代码,供有需要的兄弟参考, 1.首先在地图上画个圆如下图 2.新建个JS / ...
android水平波浪扩散动画,Android实现水波纹扩散效果
本文实例为大家分享了Android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下先上图 ?澹∶挥型计??跃湍昧诵"泊?媪恕?/p> 先看一下如何使用这个View. andro ...

CSS 实现图片旋转和水波纹动画效果

CSS 实现图片旋转和水波纹动画效果

背景

代码

效果

CSS 实现图片旋转和水波纹动画效果相关推荐

最新文章

热门文章