css实现涟漪效果

最近写小程序直播，需要一个闪动的涟漪效果，很简单的效果代码及思路如下

html代码：

<view class="circle"> <view class="ripples"></view> </view>

circle为内置黄色圆圈，ripples为由内向外扩散的波纹

css代码：

.circle{position: fixed;top:300rpx;left: 300rpx;border-radius: 75rpx;border:1rpx solid red;height: 150rpx;width:150rpx;background: orange;
}
.ripples{position: absolute;top: 2rpx;left: 2rpx;width: 146rpx;height: 146rpx;border-radius: 75rpx;animation: ripplesone 1s 2s infinite;
}
@keyframes ripplesone {0% {transform-origin: 75rpx 75rpx;transform: scale(1);opacity: 0;border: 2rpx solid #FF3434;}5% {transform-origin: 75rpx 75rpx;transform: scale(1.1);opacity: 1;border: 2rpx solid #FF3434;}100% {transform-origin: 75rpx 75rpx;transform: scale(1.3);opacity: 0;border: 2rpx solid #FF3434;}
}

animation: ripplesone 1s 2s infinite;
rippleone为动画名称，1s 为动画执行一周时间,2s为进入页面后延迟两秒执行（仅首次延迟）,infinite为循环执行该动画，
transform-origin: 75rpx 75rpx;
这是确认向外扩散涟漪的中心点,我设置的宽度为ripples宽度加上边框宽度后的一半,这样就在圆的中心向外扩散，
transform: scale(1.3);
transform的scale可以控制放大和缩小，小于1为缩小。

css 实现涟漪效果相关推荐

html+css+js涟漪效果按钮点击泛起涟漪
效果如果代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
纯css实现涟漪效果
<template><div id="app"><el-button type="primary" class="pri ...
html涟漪动画效果,CSS 在按钮上做个涟漪效果（Ripple Animation）
作为一个 CSS 渣,这次在看到一个 Vue 组件库的按钮里有个点按之后的效果之后跃跃欲试. 效果大概长这样: 首先先观察了一番,大概得到以下特征: 以鼠标按下的位置为原点,以某个值为半径进行扩散 ...
css波纹波动效果,CSS 冲击波(水波纹)效果
实现冲击波--数学知识很重要 *{ margin:0; padding:0; box-sizing:border-box; } html,body{ font-family:"微软雅黑&qu ...
html css鼠标手型效果
html css鼠标手型效果 style="cursor:pointer" 转载于:https://blog.51cto.com/chengang/1288597
Android 水波效果 | 涟漪效果实现
在Xml 里面实现给Button设置一个background <Buttonandroid:text="Ripple水波纹Background"android:layout ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
php鼠标经过显示文本,CSS_HTML和CSS做网页实例教程:鼠标滑过文字改变，关于HTML+CSS的实例效果很多， - phpStudy...
关于HTML+CSS的实例效果很多,下面举出常用的几列,供新手们学习参考. html+CSS实例效果(1):鼠标滑过改变文字鼠标经过变换文字 #Menu{ width:500px; margin:5 ...

css 实现涟漪效果

css实现涟漪效果

最近写小程序直播，需要一个闪动的涟漪效果，很简单的效果代码及思路如下

css 实现涟漪效果相关推荐

最新文章

热门文章