Clip使用

zczlsy112024-12-10 14:35

简单使用

css 复制代码 
img {
    width: 300px;
    height: 300px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
}

图片如下：

css 复制代码 
img {
    width: 300px;
    height: 300px;
    clip-path: polygon(0% 0%, 100% 100%, 50% 100%)
}

图片如下：

我们给出对应的点，浏览器就能进行剪裁。原点为左上角，x轴横着向右、y轴竖着向下

该网站可以非常方便的得到你想要的形状

案例一

javascript 复制代码 
    <div class="loader">
      <span class="top-half">Loading</span>
      <span class="bottom-half">Loading</span>
    </div>
css 复制代码 
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 300px;
  height: 60px;
  border: 7px solid #0a3d62;
  border-radius: 10px;
  text-align: center;
  line-height: 60px;
  position: relative;
  overflow: hidden;
}

span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 48px;
}

.top-half {
  color: #ee5253;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  animation: split 2s linear infinite;
}

.bottom-half {
  color: #0a3d62;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  animation: split 2s linear infinite reverse;
}

@keyframes split {
  0% {
    transform: translateX(100%);
  }

  40% {
    transform: translateX(0%);
  }

  60% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

案例二

html 复制代码 
    <div class="wave">
      <h2>wave</h2>
      <h2>wave</h2>
    </div>
css 复制代码 
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2f2f2f;
}

.wave {
  width: 500px;
  height: 500px;
  position: relative;
}

h2 {
  position: absolute;
  text-align: center;
  line-height: 500px;
  text-transform: uppercase;
  font-size: 170px;
}

h2:nth-child(1) {
  color: #7efff5;
}

h2:nth-child(2) {
  color: #03a9f4;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  animation: wave 2s ease infinite;
}

@keyframes wave {
  0% {
    clip-path: polygon(
      0 48%,
      18% 52%,
      35% 58%,
      56% 59%,
      79% 60%,
      100% 55%,
      100% 100%,
      0 100%
    );
  }
  50% {
    clip-path: polygon(
      0 55%,
      15% 62%,
      40% 60%,
      61% 58%,
      79% 53%,
      100% 45%,
      100% 100%,
      0 100%
    );
  }
  100% {
    clip-path: polygon(
      0 48%,
      18% 52%,
      35% 58%,
      56% 59%,
      79% 60%,
      100% 55%,
      100% 100%,
      0 100%
    );
  }
}

案例三

html 复制代码 
    <div class="container">
      <div class="clip clip1"></div>
      <div class="clip clip2"></div>
      <div class="clip clip3"></div>
    </div>
css 复制代码 
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2f2f2f;
}

.container {
  position: relative;
  width: 800px;
  height: 500px;
  background-color: #222;
}

.clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  box-sizing: border-box;
}

.clip1 {
  background: url(./img/1.jpg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 21% 0, 45% 100%, 0 100%);
  transform: translateX(-2px);
}

.clip2 {
  background: url(./img/2.jpg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(16% 0, 85% 0, 70% 100%, 33% 100%);
}

.clip3 {
  background: url(./img/3.jpg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(83% 0, 100% 0, 100% 100%, 63% 100%);
}

.container:hover .clip {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.container .clip:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

案例四

html 复制代码 
    <div class="card">
      <h1>information</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
        molestiae incidunt consectetur non quas. Eum laudantium deleniti quis
        quos consequatur ipsam fugit nisi? Ea ratione, facere rem dolore minus
        quod.
      </p>
    </div>
css 复制代码 
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 500px;
  height: 250px;
  background-color: #c7ecee;
  padding: 20px 80px 20px 20px;
  border-radius: 10px;
  clip-path: circle(7% at 93% 20%);
  transition: all 0.5s;
}

h1 {
  margin-bottom: 20px;
}

p {
  font-size: 18px;
}

.card:hover {
  clip-path: circle(70.7% at 50% 50%);
}

案例五

css 复制代码 
    <div class="main">
      <h1>black</h1>
      <h1>white</h1>
    </div>
css 复制代码 
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c8d6e5;
}

.main {
  position: relative;
  width: 800px;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  font-size: 220px;
  text-transform: uppercase;
  transition: all 0.5s;
}

h1:nth-child(2) {
  color: white;
  clip-path: polygon(0 0, 100% 0%, 100% 0, 0% 100%);
  background-color: #c8d6e5;
}

h1:nth-child(2):hover {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}

h1:nth-child(1):hover ~ h1:nth-child(2) {
  clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
}

案例六

css 复制代码 
      <div class="content">
        <h2>title</h2>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique
          dolorum optio nihil soluta dignissimos dicta esse enim rem magnam
        </p>
      </div>
css 复制代码 
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c8d6e5;
}

.main {
  position: relative;
  width: 800px;
}

.card {
  width: 335px;
  height: 580px;
  position: relative;
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  clip-path: circle(70.7% at 50% 50%);
}

img {
  width: 100%;
}

.card:hover .img {
  clip-path: circle(13.9% at 50% 35%);
}

.content {
  position: absolute;
  left: 0;
  bottom: 100px;
  text-align: center;
}

h2 {
  padding: 0;
  margin: 0;
  text-transform: uppercase;
}

h2,
p {
  transform: translateY(20px);
  transition: 0.3s;
  opacity: 0;
}

.card:hover h2,
.card:hover p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

案例七

css 复制代码 
 <ul>
      <li>
        <a href="#" data-text="home">home</a>
      </li>
      <li>
        <a href="#" data-text="about">about</a>
      </li>
      <li>
        <a href="#" data-text="services">services</a>
      </li>
      <li>
        <a href="#" data-text="team">team</a>
      </li>
      <li>
        <a href="#" data-text="contact">contact</a>
      </li>
    </ul>
css 复制代码 
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c8d6e5;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  margin: 10px 0px;
  position: relative;
  overflow: hidden;
}

a {
  text-decoration: none;
  display: block;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 60px;
  font-weight: 900;
  position: relative;
  padding: 5px 10px;
  color: transparent;
}

a:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #262626;
  padding: 5px 0;
  clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%);
  transition: all 0.5s;
  transition-delay: 0.25s;
}

a:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #262626;
  padding: 5px 0;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transition: all 0.5s;
  transition-delay: 0.25s;
}

a:hover:before {
  color: rgb(160, 0, 0);
  transform: translate(10px, -3px);
}

a:hover:after {
  color: rgb(160, 0, 0);
  transform: translate(-10px, 3px);
}

li:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #262626;
  transition: all 0.5s;
  left: -100%;
}

li:hover:before {
  left: 100%;
}

案例八

html 复制代码 
    <a href="">
      <span>button</span>
      <span>button</span>
    </a>
css 复制代码 
@import url("https://fonts.googleapis.com/css?familt=poppins:200,300,400,500,600,700,800,900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222;
}

a {
  width: 180px;
  height: 60px;
  position: relative;
}

a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  background-color: #4834d4;
  text-align: center;
  line-height: 60px;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 22px;
}

span:nth-child(2) {
  color: #4834d4;
  background-color: white;
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%, 38% 51%);
  transition: all 0.5s;
}

/* span:nth-child(1) {
  transition: all 0.5s;
} */

span:nth-child(2):hover {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 53%);
}

span:nth-child(1):hover ~ span:nth-child(2) {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 100% 57%);
}

案例九

css 复制代码 
    <section>
      <div class="box box1">
        <h2><span>Bye Bye</span><span>2030</span></h2>
      </div>
      <div class="box box2">
        <h2><span>Happy New Year</span><span>2031</span></h2>
      </div>
    </section>
css 复制代码 
@import url("https://fonts.googleapis.com/css?familt=poppins:200,300,400,500,600,700,800,900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}

body {
  overflow: hidden;
}

section {
  width: 100%;
  height: 100vh;
  position: relative;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box2 {
  background-color: #4cb979;
  clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%);
}

h2 {
  font-size: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateY(-70%);
  animation: textMove 3s ease-in-out infinite;
}

.box2 h2 {
  color: #fff;
}

span:nth-child(2) {
  line-height: 1em;
  font-size: 2em;
}

@keyframes textMove {
  0%,
  45% {
    transform: translateY(-70%);
  }

  55%,
  90% {
    transform: translateY(70%);
  }

  100% {
    transform: translateY(-70%);
  }
}

clip-path做动画，就是依靠"重叠遮盖、窗口显露"，利用元素互相遮挡、clip-path撕开口子显示不同的内容，再利用transition或者animation做出来的

相关推荐
朝新_3 分钟前
【SpringMVC】详解用户登录前后端交互流程：AJAX 异步通信与 Session 机制实战
前端·笔记·spring·ajax·交互·javaee
裴嘉靖5 分钟前
Vue 生成 PDF 完整教程
前端·vue.js·pdf
毕设小屋vx ylw2824267 分钟前
Java开发、Java Web应用、前端技术及Vue项目
java·前端·vue.js
冴羽1 小时前
今日苹果 App Store 前端源码泄露，赶紧 fork 一份看看
前端·javascript·typescript
蒜香拿铁1 小时前
Angular【router路由】
前端·javascript·angular.js
brzhang1 小时前
读懂 MiniMax Agent 的设计逻辑，然后我复刻了一个MiniMax Agent
前端·后端·架构
西洼工作室2 小时前
高效管理搜索历史：Vue持久化实践
前端·javascript·vue.js
广州华水科技2 小时前
北斗形变监测传感器在水库安全中的应用及技术优势分析
前端
樱花开了几轉2 小时前
element ui下拉框踩坑
开发语言·javascript·ui
开发者如是说2 小时前
Compose 开发桌面程序的一些问题
前端·架构
热门推荐
01GitHub 镜像站点02《大数据技术原理与应用》实验报告三 熟悉HBase常用操作03UV安装并设置国内源04综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件05BongoCat - 跨平台键盘猫动画工具06Linux下V2Ray安装配置指南07npm使用国内淘宝镜像的方法08jdk21下载、安装（Windows、Linux、macOS）09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10GitLab 零基础入门指南：从安装到项目管理全流程