Warning: Undefined array key "adf" in /www/wwwroot/blog.5iux.cn/wp-content/plugins/rejected-wp-keyword-link-rejected/wp_similarity.php on line 41
Warning: Undefined array key "sim_pages" in /www/wwwroot/blog.5iux.cn/wp-content/plugins/rejected-wp-keyword-link-rejected/wp_similarity.php on line 42
看到一个描边圆角工具，突发灵感写一个液态动画效果
具体原理是通过css的圆角和旋转来实现，很简单
效果图：
CSS代码：
div{width:300px; height: 300px; background-color: #000; opacity: 0.6; margin:100px auto; transition: 1s all linear; animation: 5s horn linear infinite;}
@keyframes horn{
0%{ border-radius:53% 47% 43% 57% / 58% 57% 43% 42% ; transform: rotate(0deg);}
20%{border-radius:44% 56% 63% 37% / 40% 49% 51% 60%; }
40%{border-radius:61% 39% 45% 55% / 27% 57% 43% 73% ;}
60%{border-radius:45% 55% 47% 53% / 51% 44% 56% 49% ;}
80%{border-radius:66% 34% 42% 58% / 51% 61% 39% 49% ;}
100%{border-radius:53% 47% 43% 57% / 58% 57% 43% 42% ; transform: rotate(360deg);}
}
demo效果：
