Clip使用

🕗 发布于 2024-12-10 20:55 前端 javascript html

简单使用

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

图片如下：

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

图片如下：

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

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

案例一

    <div class="loader">
      <span class="top-half">Loading</span>
      <span class="bottom-half">Loading</span>
    </div>

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%);
  }
}

案例二

    <div class="wave">
      <h2>wave</h2>
      <h2>wave</h2>
    </div>

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%
    );
  }
}

案例三

    <div class="container">
      <div class="clip clip1"></div>
      <div class="clip clip2"></div>
      <div class="clip clip3"></div>
    </div>

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%);
}

案例四

    <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>

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%);
}

案例五

    <div class="main">
      <h1>black</h1>
      <h1>white</h1>
    </div>

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);
}

案例六

      <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>

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;
}

案例七

 <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>

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%;
}

案例八

    <a href="">
      <span>button</span>
      <span>button</span>
    </a>

@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%);
}

案例九

    <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>

@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做出来的

原文地址：https://blog.csdn.net/weixin_43063398/article/details/144278151

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：《Python密码算法例程全攻略》
下一篇：数据结构第一弹-哈希表

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14

Clip使用

案例一

案例二

案例三

案例四

案例五

案例六

案例七

案例八

案例九

相关文章