在这里分享一个我平时常用的水波特效步骤,加在按钮上特好使。
首先,是直接创建一个div盒子,不需要在里面添加其他内容,我们直接对盒子本身添加css就能形成水波效果。
html部分,我们div添加白色的波纹,所以在这里设置html背景为蓝色。
css部分,先设置好div的基本属性
然后就是在video中添加这个特效中重中之重的内容,在css中设置animation。
Animation 是由三部分组成。
其中,linear是表示动画的timing-function,其总共大致有以下几种效果。
图源水印
为了实现按钮的响应式操作,我们可以给div再加上一个hover选择器
再给div添加一个transition属性,让div在鼠标移动的时候能自然过渡,其原理跟animation类似。
然后就能得到我们的结果,整体的代码如下
效果图
本文由知识库于2021-09-12发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://longgeyun.com/knowledge/3281.html
上一篇cad中字体显示问号怎么办(CAD字体显示问号的解决方法)
下一篇飞书:如何实现团队提效与组织升级
高校最常见的食物中毒有哪些
急性肠胃炎与食物中毒怎么分辨
莫代尔面料和纯棉面料哪个好内裤 哪个儿童可以穿
为什么说开速腾的都不是一般人 速腾开出去有面子吗
活珠子和毛蛋的区别在哪里 哪个好吃
家里放石头的八大禁忌有哪些 家中石头最佳摆放位置
怎么判断自己帅还是丑男 男生怎样越长越帅
单身女生红绳戴左手还是右手 女生红绳戴哪里合适
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台