CSS实现水波纹进度效果丨技术开发分享录

CSS实现水波纹进度效果

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"效果\n<style type=\"text/css\">\n.water {\n    width: 200px;\n    height: 200px;\n    border-radius: 50%;\n    background-color: #87ceeb;\n    position: relative;\n    overflow: hidden;\n}\n.water:after,\n.water:before {\n    content: '';\n    position: absolute;\n    width: 200px;\n    height: 200px;\n    top: -50px;\n    background-color: #fff;\n}\n.water:before {\n    border-radius: 45%;\n    background: rgba(255, 255, 255, .7);\n    animation: wave 5s linear infinite;\n}\n.water:after {\n    border-radius: 35%;\n    background: rgba(255, 255, 255, .3);\n    animation: wave 5s linear infinite;\n}\n@keyframes wave {\n    0% {\n    \ttop: 0;\n        transform: rotate(0);\n    }\n    100% {\n    \ttop: -200px;\n        transform: rotate(360deg);\n    }\n}\n</style>\n<div class=\"water zh-mt-15\"></div>\n\n主要是通过控制圆角大小加上动画实现的效果\n\n完整代码\n\n```markup\n<!DOCTYPE html>\n<html>\n\n<head>\n    <title>CSS水波纹进度</title>\n    <style type=\"text/css\">\n    .water {\n        width: 200px;\n        height: 200px;\n        border-radius: 50%;\n        background-color: #87ceeb;\n        position: relative;\n        overflow: hidden;\n    }\n    .water:after,\n    .water:before {\n        content: '';\n        position: absolute;\n        width: 200px;\n        height: 200px;\n        top: -50px;\n        background-color: #fff;\n    }\n    .water:before {\n        border-radius: 45%;\n        background: rgba(255, 255, 255, .7);\n        animation: wave 5s linear infinite;\n    }\n    .water:after {\n        border-radius: 35%;\n        background: rgba(255, 255, 255, .3);\n        animation: wave 5s linear infinite;\n    }\n    @keyframes wave {\n        0% {\n        \ttop: 0;\n            transform: rotate(0);\n        }\n        100% {\n        \ttop: -200px;\n            transform: rotate(360deg);\n        }\n    }\n    </style>\n</head>\n\n<body>\n    <div class=\"water\"></div>\n</body>\n\n</html>\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看