css动态特效怎么制作(css带你制作网页水波特效)

在这里分享一个我平时常用的水波特效步骤,加在按钮上特好使。

首先,是直接创建一个div盒子,不需要在里面添加其他内容,我们直接对盒子本身添加css就能形成水波效果。

html部分,我们div添加白色的波纹,所以在这里设置html背景为蓝色。

<body style="background-color: cadetblue ;"> <div class="video"></div> </body>

css部分,先设置好div的基本属性

.video { /* 基本属性 */ width: 100px; height: 100px; border-radius: 50px; /* 给背景颜色添加不透明度 */ /* 不透明度还可以通过添加opacity属性修改 */ background-color: rgb(255, 255, 255, 0.6); }

然后就是在video中添加这个特效中重中之重的内容,在css中设置animation。

Animation 是由三部分组成。

  • 关键帧(keyframes) – 以帧的形式定义动画在不同阶段的状态。
    • 如果是不同时间下形状发生的变化大多可以用动画的0%,50%,100%表示不同帧对象的变化
    • 如果是不同时间下位置发生的变化大多可以用from,to来表示不同帧对象的变化
  • 动画属性(properties) – 决定动画的播放时长,播放次数,以及用何种函数式去播放动画等。
    • 语法:name duration timing-function delay iteration-count direction fill-mode play-state;
  • css属性 – 就是css元素来表示不同关键帧下的状态。

.video { /* 添加ripple动画效果 */ /* -webkit-animation适配-webkit内核的浏览器*/ -webkit-animation: ripple 1s linear infinite; animation: ripple 1s linear infinite; } /* 定义ripple动画效果 */ @-webkit-keyframes ripple { /* 关键帧播放到0%时的状态 */ 0% { /* 在box四周添加三层白色阴影 */ box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%); } /* 关键帧播放到100%时的状态 */ 100% { /* 分别改变三层阴影的距离 形成两帧的动画,然后在transition的过渡下形成动画 */ box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%), 0 0 0 40px rgba(50, 100, 245, 0); } } /* 多种浏览器兼容性设置 */ @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%); } 100% { box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%), 0 0 0 40px rgba(50, 100, 245, 0); } }

其中,linear是表示动画的timing-function,其总共大致有以下几种效果。

css动态特效怎么制作(css带你制作网页水波特效)(1)

图源水印

为了实现按钮的响应式操作,我们可以给div再加上一个hover选择器

/* 鼠标悬浮时的状态 */ .video:hover { /* 背景颜色不透明度变化 */ background-color: #FFFFFF; /* 将对象放大1.2倍 */ transform: scale(1.2); }

再给div添加一个transition属性,让div在鼠标移动的时候能自然过渡,其原理跟animation类似。

.video { /* 添加动画的过渡效果 */ transition: all 0.3s ease-in-out; }

然后就能得到我们的结果,整体的代码如下

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .video { width: 100px; height: 100px; border-radius: 50px; background-color: rgb(255, 255, 255, 0.6); transition: all 0.3s ease-in-out; -webkit-animation适配-webkit内核的浏览器*/ -webkit-animation: ripple 1s linear infinite; animation: ripple 1s linear infinite; } .video:hover { background-color: #FFFFFF; transform: scale(1.2); } @-webkit-keyframes ripple { 0% { /* 在box四周添加三层白色阴影 */ box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%); } 100% { /* 分别改变三层阴影的距离 形成两帧的动画,然后在transition的过渡下形成动画 */ box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%), 0 0 0 40px rgba(50, 100, 245, 0); } } @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%); } 100% { box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%), 0 0 0 40px rgba(50, 100, 245, 0); } } </style> </head> <body style="background-color: cadetblue ;"> <div class="video"></div> </body> </html>

css动态特效怎么制作(css带你制作网页水波特效)(2)

效果图

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页