在这里分享一个我平时常用的水波特效步骤,加在按钮上特好使。
首先,是直接创建一个div盒子,不需要在里面添加其他内容,我们直接对盒子本身添加css就能形成水波效果。
html部分,我们div添加白色的波纹,所以在这里设置html背景为蓝色。
css部分,先设置好div的基本属性
然后就是在video中添加这个特效中重中之重的内容,在css中设置animation。
Animation 是由三部分组成。
其中,linear是表示动画的timing-function,其总共大致有以下几种效果。
图源水印
为了实现按钮的响应式操作,我们可以给div再加上一个hover选择器
再给div添加一个transition属性,让div在鼠标移动的时候能自然过渡,其原理跟animation类似。
然后就能得到我们的结果,整体的代码如下
效果图
本文由知识库于2021-09-12发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://www.longgeyun.com/knowledge/3281.html
上一篇cad中字体显示问号怎么办(CAD字体显示问号的解决方法)
下一篇飞书:如何实现团队提效与组织升级
学高尔夫一年的费用大概多少钱 学高尔夫的有什么出路
泡泡糖粘在裤子上怎么去掉急救 泡泡糖粘在裤子上急救方法
eo级板材是什么意思 eo和enf级板材区别
建筑工程监理是做什么的 工资一般多少
如何帮助女朋友变得坚强 帮助女友培养坚强品质的有效方法
减脂一天可以吃多少卡热量 减脂计划如何热量摄入适量
冬季怎样吃羊肉不上火又补暖?
合同订立应采取的方式有哪些
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台