CSS使用clip-path实现元素动画

news2024/11/6 9:59:48

前言:

在日常开发当中,如果想要开发多边形,一般都需要多个盒子或者伪元素的帮助,有没有一直办法能只使用一个盒子实现呢?
有的:css裁剪

目录

前言:

clip-path到底是什么?

clip-path属性

示例图:初始化样式

鼠标hover后:

代码示例: 

自定义clip-path形状网站:

MDN官网详细介绍:

clip-path到底是什么?


clip-path 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。clip-path是一个css3新属性 , 一般用在svg元素上 , 但是也可以作为普通元素裁剪使用。

clip-path属性


clip-path属性可以使用四种裁剪函数:circle()、ellipse()、inset()和polygon()。
  下面用一个例子来演示这四个函数的效果,将它们分别应用到四个div元素中,样式如下,得到的形状如下图所示。

示例图:初始化样式

鼠标hover后:

代码示例: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    .box {
      width: 400px;
      height: 440px;
      display: block;
      margin:  100px auto;
      background-color: #000;
    }
    img {
      width: 100%;
      height: 100%;
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      transition: 0.5s;
    }

    .box:hover img {
      clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="../../Downloads/1.png" alt="" />
  </div>
</body>
</html>

自定义clip-path形状网站:

CSS3剪贴路径(Clip-path)在线生成器工具 - 代码工具 - 脚本之家在线工具

MDN官网详细介绍:

clip-path - CSS:层叠样式表 | MDN

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1558296.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

读所罗门的密码笔记06_共生思想(上)

1. 共生思想 1.1. 1997年5月11日&#xff0c;IBM公司的“深蓝”计算机在与国际象棋世界冠军加里卡斯帕罗夫的第二次对弈时击败了他 1.1.1. 这台超级计算机以3.5∶2.5的战绩胜出&#xff0c;登上了世界各地的新闻头条 1.2. Alpha Zero 1.2.…

赋值语句还能当判断条件?涨芝士了!

赋值和条件看似是C语言中毫不相关的两个概念&#xff0c;虽然实际过程中我猜测不会有太多这种不太符合常理的情况出现&#xff0c;但是现在在学习的过程中&#xff0c;为了出题而出题总是会整出一些花活出来.....这很难不让人联想起高中时一些大佬为了彰显自己的数学天赋而自己…

代码学习第32天---动态规划

随想录日记part32 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.03.30 主要内容&#xff1a;今天开始要学习动态规划的相关知识了&#xff0c;今天的内容主要涉及两个方面&#xff1a; 不同路径 &#xff1b; 不同路径 II。 62.不同路径 63. 不同路径 II 动态…

Linux学习之软硬链接及动静态库

前言&#xff1a;在之前的文章http://t.csdnimg.cn/Lru5Thttp://t.csdnimg.cn/Lru5T 我们已经对Linux 系统里面的文件具有一定的理解了&#xff0c;现在我们将继续学习Linux里面的软硬连接和动静态库&#xff0c;这些是Linux里面的一些重要内容。 目录 一&#xff0c;文件管…

基于Givens旋转完成QR分解进而求解实矩阵的逆矩阵

基于Givens旋转完成QR分解进而求解实矩阵的逆矩阵 目录 前言 一、Givens旋转简介 二、Givens旋转解释 三、Givens旋转进行QR分解 四、Givens旋转进行QR分解数值计算例子 五、求逆矩阵 六、MATLAB仿真 七、参考资料 总结 前言 在进行QR分解时&#xff0c;HouseHolder变换…

【opencv】教程代码 —features2D(5)旋转相机的基本全景拼接

基本全景拼接 panorama_stitching_rotating_camera.cpp 将第二张图像进行透视变换后与第一张图像拼接 #include <iostream> // 包含了一些用于输入输出的函数 #include <opencv2/core.hpp> // 包含了OpenCV核心库的一些常用类和函数 #include <opencv2/imgpro…

[leetcode] 46. 全排列

文章目录 题目描述解题方法dfsjava代码复杂度分析 相似题目 题目描述 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3]…

实验三智能手机互联网程序设计(微信程序方向)实验报告

实验目的和要求 请编写下方商品列表页面&#xff0c;展示商品名称和价格&#xff1b; 二、实验步骤与结果&#xff08;给出对应的代码或运行结果截图&#xff09; Index.WXML <view class"shop" wx:for"{{10}}"> <vie…

何從Microsoft下載Windows 10 最新版本的ISO

許多新手用戶不知道如何從Microsoft下載最新版本的Windows 10 ISO(32 位或 64 位)。在本指南中,我們將向您展示如何直接從Microsoft下載最新版本的Windows 10 ISO。請注意收藏以備不時之需哦。 您可能知道,除了幾個次要更新外,微軟每年都會向 Windows 10 發布兩個主要更新…

阿里云服务器ECS u1实例ecs.u1-c1m2.large性能测评

阿里云服务器u1是通用算力型云服务器&#xff0c;CPU采用2.5 GHz主频的Intel(R) Xeon(R) Platinum处理器&#xff0c;ECS通用算力型u1云服务器不适用于游戏和高频交易等需要极致性能的应用场景及对业务性能一致性有强诉求的应用场景(比如业务HA场景主备机需要性能一致)&#xf…

Yarn的安装和使用(2):使用及问题解决

Yarn是JavaScript的依赖管理工具&#xff0c;它与npm类似&#xff0c;但提供了一些额外的性能优化和一致性保证。 Yarn的使用&#xff1a; 初始化项目&#xff1a; yarn init 此命令会引导您创建一个新的package.json文件&#xff0c;用于记录项目的元信息和依赖。 添加依赖&…

如何恢复已删除的 Office 文件

丢失了重要文件并需要将其找回&#xff1f;这些提示将帮助您立即恢复 Office 文档。 没有什么比无法访问您已经处理了几个小时的文档更令人沮丧的了。无论文件是否已损坏、删除或以其他方式丢失&#xff0c;都会感觉浪费了巨大的时间和精力。 幸运的是&#xff0c;使用 Micro…

Apache Hive的基本使用语法(一)

一、数据库操作 创建数据库 create database if not exists myhive;查看数据库 use myhive; desc database myhive;创建数据库并指定hdfs存储 create database myhive2 location /myhive2;删除空数据库&#xff08;如果有表会报错&#xff09; drop database myhive;…

ubuntu之搭建samba文件服务器

1. 在服务器端安装samba程序 sudo apt-get install samba sudo apt-get install smbclient 2.配置samba服务 sudo gedit /etc/samba/smb.conf 在文件末尾追加入以下配置 [develop_share] valid users ancy path /home/ancy public yes writable y…

Python文件操作命令

文件操作 我知道你最近很累&#xff0c;是那种看不见的、身体上和精神上的疲惫感&#xff0c;但是请你一定要坚持下去。就算无人问津也好&#xff0c;技不如人也好&#xff0c;千万别让烦躁和焦虑毁了你的热情和定力。别贪心&#xff0c;我们不可能什么都有&#xff0c;也别灰心…

亚信安全荣获2023年度5G创新应用评优活动两项大奖

近日&#xff0c;“关于2023 年度5G 创新应用评优活动评选结果”正式公布&#xff0c;亚信安全凭借在5G安全领域的深厚积累和创新实践&#xff0c;成功荣获“5G技术创新的优秀代表”和“5G应用创新的杰出实践”两项大奖。 面向异构安全能力的5G安全自动化响应系统 作为5G技术创…

【C语言】结构体详解(一)

目录 1、什么是结构体? 2、结构体成分 3、结构体变量的定义与初始化 3.1、结构体变量的三种定义方式 3.2、结构体变量的初始化 4、结构体成员的访问&#xff08;两种方式&#xff09; 4.1、直接访问 4.2、间接访问 5、结构的特殊声明 5.1、不完全声明&#xff08;匿…

白色微立体的智能界面,就喜欢这种简洁白净。

本次发一些微立体风格的智能家居界面&#xff0c;风格为微立体&#xff0c;也叫轻拟物风格&#xff0c;或者新拟态风格。

规划控制如何兼顾安全与舒适性

规划控制如何兼顾安全与舒适性 附赠自动驾驶学习资料和量产经验&#xff1a;链接 **导读&#xff1a;**自动驾驶技术研发对于“安全第一”的追求是毋庸置疑的&#xff0c;但是这中间可能就忽视了舒适性。 因此&#xff0c;今天我想给大家分享的是&#xff0c;自动驾驶研发如何…

探究ThreadLocal的魔数0x61c88647和Entry数组

探究ThreadLocal 下面有一个很重要的HASH_INCREMENT,他的值是0x61c88647 public class ThreadLocal<T> {/***ThreadLocals依赖于附加到每个线程的每线程线性探针哈希映射 (thread.threadLocals和inheritableThreadLocals)。ThreadLocal对象充当键&#xff0c;通过threa…