易商讯
当前位置: 首页 » 资讯 » 科普 » 正文

怎么做水波纹

放大字体  缩小字体 发布日期:2023-10-11 11:08:05
导读

可以使用CSS3的box-shadow属性来制作水波纹效果。具体操作如下: 创建一个div元素,设置宽高和背景颜色; 使用CSS3的box-shadow属性来设置水波纹效果,如下所示:4), 0 0 0 20px rgba(255, 255, 255, 0.4), 0 0 0 30px rgba(

怎么做水波纹 - 第1张

可以使用CSS3的box-shadow属性来制作水波纹效果。具体操作如下:
创建一个div元素,设置宽高和背景颜色;
使用CSS3的box-shadow属性来设置水波纹效果,如下所示:
4), 0 0 0 20px rgba(255, 255, 255, 0.4), 0 0 0 30px rgba(255, 255, 255, 0.4), 0 0 0 40px rgba(255, 255, 255, 0.4);
使用CSS3的animation属性来设置水波纹动画,如下所示:
ripple {
4), 0 0 0 20px rgba(255, 255, 255, 0.4), 0 0 0 30px rgba(255, 255, 255, 0.4), 0 0 0 40px rgba(255, 255, 255, 0.4); animation: ripple 2s linear infinite; } @keyframes ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }```


声明:易商讯尊重创作版权。本文信息搜集、整理自互联网,若有来源标记错误或侵犯您的合法权益,请联系我们。我们将及时纠正并删除相关讯息,非常感谢!

 
(文/小编)
免责声明
• 
本文怎么做水波纹链接:http://www.esxun.cn/news/344891.html 。本文仅代表作者个人观点,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们,我们将在24小时内处理完毕。如涉及作品内容、版权等问题,请在作品发表之日起一周内与本网联系,否则视为放弃相关权利。
 

Copyright © www.esxun.cn 易商讯ALL Right Reserved


冀ICP备2023038169号-3