奇幻圆角卡片 · 卡片
前端Wiki/CSS 特效合集/奇幻圆角卡片

奇幻圆角卡片

border-radius 八值写法做出水滴形卡片,圆角的新玩法

← 返回 卡片 类特效列表
水滴形

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .drop{width:210px;height:210px;margin:30px auto;background:linear-gradient(135deg,#4a9eff,#57ab5a);border-radius:28% 72% 64% 36% / 42% 38% 62% 58%;animation:kfx-drop 6s ease-in-out infinite alternate;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
@keyframes kfx-drop{to{border-radius:64% 36% 28% 72% / 58% 62% 38% 42%}}

HTML 结构

HTML
<div class="fx">
<div class="drop">水滴形</div>
</div>
实现要点:border-radius 八个值分别控制 8 个角点,形成不规则水滴形(fancy-border-radius 玩法)

其它卡片类特效

回到 前端Wiki 首页 · CSS 特效合集