clip-path实现形状变换动画

clip-path的超强应用: http://species-in-pieces.com/

1. 一个简单的clip-path动画


(最后抖了一下是gif没录制好不是动画的问题)

HTML

<div class="wrapper">
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
</div>

CSS

.wrapper {
    width: 500px;
    height: 500px;
    position: relative;
    background-color: #f0f0f0;
    margin: auto;
}
.piece {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 1s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.62, 0.02, 0.34, 1);
}
.piece:nth-child(1) {
    animation-name: move1;
}

.piece:nth-child(2) {
    animation-name: move2;
}

.piece:nth-child(3) {
    animation-name: move3;
}

.piece:nth-child(4) {
    animation-name: move4;
}

@keyframes move1{
    0%, 10% {
        background: #368AE4;
        clip-path: polygon(100px 100px, 200px 100px, 150px 186.60px);
    }
    90%, 100% {
        background: linear-gradient(180deg, #368AE4, #e400c6);
        clip-path: polygon(150px 150px, 150px 350px, 250px 250px);
    }
}

@keyframes move2{
    0%, 10% {
        background: #ff5500;
        clip-path: polygon(350px 100px, 300px 186.60px, 400px 186.60px);
    }
    90%, 100% {
        background: linear-gradient(180deg, #ffaa7f, #4be47e);
        clip-path: polygon(150px 150px, 350px 150px, 250px 250px);
    }
}

@keyframes move3{
    0%, 10% {
        background: #55007f;
        clip-path: polygon(100px 300px, 200px 300px, 150px 386.60px);
    }
    90%, 100% {
        background: linear-gradient(180deg, #3401ff, #e46c09);
        clip-path: polygon(350px 150px, 350px 350px, 250px 250px);
    }
}
@keyframes move4{
    0%, 10% {
        background: #7f1e6d;
        clip-path: polygon(350px 300px, 300px 386.60px, 400px 386.60px);
    }
    90%, 100% {
        background: linear-gradient(180deg, #f4ff10, #dc60e4);
        clip-path: polygon(150px 350px, 350px 350px, 250px 250px);
    }
}

主要思路,每一个片都是一个完整的填满最外层容器的div,使用clip-path画出三角形,动画改变三角形的位置

1 声望
0 粉丝
0 条评论
推荐阅读
搭建flutter开发环境
mac设置环境变量zsh终端 {代码...} Windows 10:1. 下载Flutter SDK(以下方式二选一)1.1 官网下载zip ([链接] 解压到指定文件夹;1.2 从github仓库拉取: {代码...} 2. 下载Android Studio2.1 官方地址: [链接...

funny阅读 1.9k

手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen152阅读 17.6k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 6.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.4k评论 6

1 声望
0 粉丝
宣传栏