web前端开发--动画效果

1、3D旋转

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>3D旋转</title><style type="text/css">div{/*设置大盒子样式*/width: 100px;height: 100px;/*background-color: rgba(255,0,0,0.5);*/background-color: #FFFF00;}#box2:hover{background-color: wheat;/*transform: rotateX(180deg);/*围绕X轴顺时针旋转180度*/transform: rotateY(180deg);}</style></head><body><div id="box1">原始效果</div><div id="box2">3D旋转效果</div></body>
</html>

点击时

2、简单动画

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>简单动画</title><style type="text/css">div{position: absolute;width: 100px;height: 100px;background-color: red;animation: ball 3s ease 0s 3 alternate;/*设置ball动画持续3s,正方向交替播放3次*//*分开设置如下6行代码animation-name: ball;             设置动画名称animation-duration: 3s;            设置持续时间animation-timing-function: ease;  设置速度曲线animation-delay: 0s;               设置延续时间animation-iteration-count: 3;       设置播放次数animation-direction: alternate;    设置方向*/}@keyframes ball{from{left: 0px;}to{left: 300px;border-radius: 50px;}}</style></head><body><div></div></body>
</html>

会动态的 

3、背景颜色过渡

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>背景颜色过渡</title><style type="text/css">.box{width: 300px;height: 300px;background-color: #f00;margin: 50px auto;/*transition-property: background;/*设置应用过渡效果的属性*//*transition-duration: 0.5s;/*过渡效果持续的时间*//*transition-timing-function: ease-in-out;/*过渡的方式*//*transition-delay: 0s;/*过渡效果的持续时间*//*或者下面的这些*/transition: background 0.5s ease-in-out;}.box:hover{/*设置鼠标指针移动到块元素上时的状态*/background: #00f;/*改变背景颜色*/}</style></head><body><div class="box">过渡属性</div></body>
</html>

点击后

4、宠物墙

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>宠物墙</title><style type="text/css">body,ul,li,img{margin: 0;padding: 0;border: 0;}ul,li{list-style: none;}.photos{width: 1000px;height: 550px;margin: 50px auto;}.photos li{float: left;width: 250px;height: 250px;margin-left: 63px;margin-bottom: 110px;}.photos li a{display: inline-block;/*变为行内块元素*/width: 240px;height: 240px;text-align: center;text-decoration: none;color: #333333;font-size: 16px;font-family: "宋体";line-height: 24px;}.photos a:after{/*after选择器表示在被选元素的内容后面插入内容*/content: attr(title);/*把婴儿的名字显示在超链接后面*/}.photos li:nth-child(even) a{/*第偶数元素的样式*/transform: rotate(10deg);/*顺时针旋转10度*/}.photos img{/*图片的长宽设置*/width: 247px;height: 250px;transition: all 0.5s ease;/*过渡效果*/}.photos li:hover .img1{border-radius: 50%;/*设置第一张照片为圆形*/}.photos li:hover .img2{border: 5px solid #FFFF00;transform: rotate(-60deg);/*设置第二张照片逆时针旋转60度*/}.photos li:hover .img3{transform: rotate(360deg);/*设置第三张照片顺时针旋转360度*/}.photos li:hover .img4{box-shadow: 10px 10px 10px #333333;/*第四张照片添加阴影*/transform: rotate(-10deg);/*第四张照片逆时针旋转10度*/}.photos li:hover .img5{transform: rotateY(180deg);/*第五张图片产生3D变形沿y轴旋转180度*/}.photos li:hover .img6{transform: scale(1.2);/*第六张图片放大1.2倍*/}#one{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}#two .img2{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}#three{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}#four .img4{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}#five{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}#six .img6{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}.one{margin: -50px;text-align: center;}.two{margin: -50px;text-align: center;}.three{margin: -50px;text-align: center;}</style></head><body><ul class="photos"><li id="one"><a href="#"title="笑笑"><img src="img/cat13.jpg"alt="笑笑"class="img1" /></a></li><li id="two"><a href="#"title=""><img src="img/cat8.jpg"alt="佳佳"class="img2" /><p class="one">佳佳</p></a></li><li id="three"><a href="#"title="圆圆"><img src="img/cat9.jpg"alt="圆圆"class="img3" /></a></li><li id="four"><a href="#"title=""><img src="img/cat10.jpg"alt="倩倩"class="img4" /><p class="two">倩倩</p></a></li><li id="five"><a href="#"title="乐乐"><img src="img/cat11.jpg" alt="月月"class="img5"/></a></li><li id="six"><a href="#"title=""><img src="img/cat12.jpg"alt="乐乐"class="img6" /><p class="three">乐乐</p></a></li></ul></body>
</html>

 

 点击时,会出现

5、图片平移

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片平移</title><style type="text/css">.big{width: 400px;height: 300px;margin: 0 auto;position: relative;background: url(img/pic3.jpg) no-repeat;}.small{width: 100px;height: 100px;border-radius: 50%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: url(img/cloth.jpg) no-repeat center center;}</style></head><body><div class="big"><div class="small"></div></div></body>
</html>

 6、翻转导航条

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>翻转导航条</title><style type="text/css">*{margin: 0;padding: 0;}nav{width: 960px;height: 40px;background-color: #CCCCCC;margin: 20px auto;}nav ul{list-style: none;}nav ul li{float: left;width: 120px;height: 40px;}nav ul li div{width: 120px;height: 40px;position: relative;perspective: 6000px;transition: all 0.4s ease 0s;transform-style: preserve-3d;/*使被转化的子元素保留其3d转换*/}nav ul li:hover>div{transform: rotateX(-90deg);}nav ul li span{position: absolute;top: 0;left: 0;width: 120px;height: 40px;text-align: center;line-height: 40px;}nav ul li span .no2{background-color: #cd7c7d;transform: rotateX(90deg)translateZ(20px);}</style></head><body><nav><ul><li><div><span class="no1">UI设计培训</span><span class="no1">UI设计培训</span></div></li><li><div><span class="no1">PHP培训</span><span class="no2">PHP培训</span></div></li><li><div><span class="no1">网络营销培训</span><span class="no2">网络营销培训</span></div></li><li><div><span class="no1">前端开发培训</span><span class="no3">前端开发培训</span></div></li><li><div><span class="no1">C++培训</span><span class="no2">C++培训</span></div></li><li><div><span class="no1">IOS培训</span><span class="no2">IOS培训</span></div></li><li><div><span class="no1">Android培训</span><span class="no2">Android培训</span></div></li><li><div><span class="no1">云计算培训</span><span class="no2">云计算培训</span></div></li></ul></nav></body>
</html>

 点击时

7、3D变形

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>3D变形</title><!--盒子1的样式--><style type="text/css">div .no1{width: 152px;height: 227px;border: 1px solid #000000;position: relative;perspective: 230px;}div .no1 img{position: absolute;top: 0;left: 0;backface-visibility: hidden;/*定义元素在不面对屏幕是不可见*/transition: all 1s ease 0s; }div .no1 img.p01{transform: rotateY(-180deg);}div .no1:hover img.p01{transform: rotateY(0deg);}div .no1:hover img.p02{transform: rotateY(180deg);}/*盒子2样式*/div .no2{width: 152px;height: 227px;border: 1px solid #000000;position: relative;perspective: 230px;}div.no2 img{position: absolute;top: 0;left: 0;backface-visibility: hidden;transition: all 1s ease 0s;}div .no2 img.p01{transform: rotateX(-180deg);}div .no2:hover img .p01{transform: rotateX();}div .no2:hover img .p02{transform: rotateX(180deg);}</style></head><body><div class="no1"><!--盒子1--><img class="p01"src="img/puke01.jpg"alt="5"width="300"height="300" /><img class="p02"src="img/puke02.jpg"alt="7"width="300"height="300" /></div><div class="n02"><!--盒子1--><img class="p01"src="img/puke01.jpg"alt="5"width="300"height="300" /><img class="p02"src="img/puke02.jpg"alt="7"width="300"height="300" /></div></body>
</html>

 8、多种过渡效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>多种过渡效果</title><style type="text/css">.box{width: 300px;height: 300px;background-color: #FF0000;border: 3px #0f0 solid;margin: 50px auto;transition-property: all;transition-duration: 1s;transition-timing-function: ease-in;/*transition: all 1s ease-in;*//*设置过渡效果的是所有属性,过渡时间为1s,过渡效果是慢速开始,逐渐加快的*/}.box:hover{border: 3px solid #FF0000;background-color: #00FF00;border-radius: 150px;box-shadow: 5px 5px 10px #000;}</style></head><body><div class="box"></div></body>
</html>

结果为

 

点击后

 

9、图片的遮罩效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片的遮罩效果</title><style type="text/css">.box{width: 500px;height: 484px;border: 1px solid #ccccc;background: url(img/vegetable.jpg) 0 0 no-repeat;margin: 20px auto;position: relative;/*相对定位*/overflow: hidden;/*隐藏溢出的内容*/}.box hgroup{/*定义遮罩的属性*/position: absolute;/*绝对定位*/left: 0;top: -250px;width: 500px;height: 484px;background-color: rgba(0,0,0,0.5);/*半透明*/}.box:hover hgroup{position: absolute;/*绝对定位*/left: 0;top: 0;transition: all 0.5s ease-in;/*过渡效果*/}.box hgroup h2:nth-child(1){/*设置第一个h2元素*/font-size: 22px;text-align: center;color: #fffff;font-weight: normal;margin-top: 58px;}.box hgroup h2:nth-child(2){/*设置第二个h2元素*/font-size: 14px;text-align: center;color: #fffff;font-weight: normal;margin-top: 15px;}.box hgroup h2:nth-child(3){/*设置第三个h2元素*/width: 26px;height: 26px;margin-left: 120px;margin-top: 15px;background: url(img/jiantou.png) 0 0 no-repeat;}.box hgroup h2:nth-child(4){/*设置第四个h2元素*/width: 26px;height: 26px;margin-left: 95px;margin-top: 25px;background: url(img/anniu.png) 0 0 no-repeat;}</style></head><body><div class="box"><hgroup><h2>一品水果 唇齿留香</h2><h2>泰国黑金刚莲雾</h2><h2></h2><h2></h2></hgroup></div></body>
</html>

 

点击后

 10、平移效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>平移效果</title><style type="text/css">div{width: 100px;height: 100px;background-color: lightcoral;}#box2{transform: translate(100px,30px);/*设置水平向右移动100px,垂直向下移动30px*/}</style></head><body><div id="box1">原始效果</div><div id="box2">平移效果</div></body>
</html>

 

11、设置透视效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>设置透视效果</title><style type="text/css">#div1{margin: 0 auto;width: 100px;height: 100px;border: 1px solid red;perspective: 100px;/*设置透视效果*/}.box1{width: 100px;height: 100px;background-color: rgba(255,0,0,0.5);transition: transform 4s ease;/*设置3D旋转花费4s时间过渡*/}.box1:hover{transform: rotate(180deg);/*设置围绕x轴顺时针旋转180度*/}#div2{margin: 50px auto;width: 100px;height: 100px;border: 1px solid red;}.box2{width: 100px;height: 100px;background-color: red;transition: transform 4s ease;/*不点击时的设置过渡效果**/}.box2:hover{transform: rotateX(180deg);/*设置围绕x轴顺时针旋转180度*/}</style></head><body><div id="div1"><div class="box1">设置透视效果</div></div><div id="div2"><div class="box2">未设置透视效果</div></div></body>
</html>

 

点击后

12、图像的过渡作用

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图像的过渡作用</title><style type="text/css">.photo{width: 300px;height: 300px;border: 3px solid #ff0000;margin: 50px auto;background:url(img/pic1.jpg)no-repeat center center;/*transition-property: all;transition-duration: 0.5s;transition-timing-function: ease-in-out;*/transition: all 0.5s ease-in-out;}.photo:hover{background: url(img/pic2.jpg) no-repeat center center;border: 3px solid #FF0000;border-radius: 50%;}</style></head><body><div class="photo"></div></body>
</html>

 

点击后

13、翻转图片

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>翻转图片</title><style type="text/css">.box{width: 300px;height: 300px;margin: 20px auto;position: relative;perspective: 230px;/*设置元素与查看位置距离*/}.box img{position: absolute;left: 0;top: 0;backface-visibility: hidden;/*隐藏被旋转的div元素的背面*/transition: all 1s ease-in 0s;  }.box img.fan{transform: rotateX(-180deg);/*第二张图片显示在背面不可见*/}.box:hover img.fan{transform: rotateX(0deg)/*第二张图片翻转到正面,可见*/}.box:hover img.zheng{transform: rotateX(180deg);/*第一张图片反转到背面,不可见*/}</style></head><body><div class="box"><img class="zheng" src="img/mangguo1.jpg"alt=""width="200"height="200" /><img class="fan" src="img/mangguo2.jpg" alt=""width="200"height="200" /></div></body>
</html>

 

翻转后

14、旋转效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>旋转效果</title><style type="text/css">div{width: 100px;height: 100px;background-color: lightcoral;}#box2{transform: rotate(45deg);/*旋转45度*/}</style></head><body><div id="box1">原始效果</div><div id="box2">旋转效果</div></body>
</html>

 

15、魔方

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>魔方</title><style type="text/css">*{margin: 0;padding: 0;}body{background: #000;}.magic{transform-style: preserve-3d;/*规定如何在3D空间中呈现被嵌套的元素*/animation: rotate 6s linear infinite;/*设置动画*/}@keyframes rotate{50%{transform-origin: center center;transform: rotateY(3600deg) rotateX(3600deg);}}.magic_a{margin: 300px;transform: translateZ(-150px);}.magic_b{transform: rotateY(90deg) translateX(150deg);transform-origin: right;position: absolute;top: 300px;left: 0;}.magic_c{transform: rotateY(270deg) translateX(-150px);transform-origin: left;position: absolute;top: 300px;left: 600px;}.magic_d{position: absolute;transform: translateZ(150px);top: 300px;left: 300px;}.magic_e{transform: rotateX(270deg) translateX(-150px) translateY(150px);transform-origin: bottom;position: absolute;top: 0;left: 450px;}.magic_f{ transform: rotateX(90deg) translateZ(-150px) translateY(-150px);transform-origin: top;position: absolute;top: 450px;left: 300px;}</style></head><body><div class="magic"><img class="magic_a"src="img/anniu.png"alt=""width="200"height="200" /><img class="magic_b"src="img/anniu.png"alt=""width="200"height="200" /><img class="magic_c"src="img/anniu.png"alt=""width="200"height="200" /><img class="magic_d"src="img/anniu.png"alt=""width="200"height="200" /><img class="magic_e"src="img/anniu.png"alt=""width="200"height="200" /><img class="magic_f"src="img/anniu.png"alt=""width="200"height="200" /></div></body>
</html>

动态版本 

 16、缩放效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>缩放效果</title><style type="text/css">div{width: 100px;height: 100px;background-color: rgba(255,0,0,0.5);}#box2{position: absolute;/*绝对定位*/left: 260px;top: 150px;background-color: red;transform: scale(2,1.2);/*宽度放大2倍,高度放大1.2倍*/}#box3{position: absolute;left: 260px;height: 150px;background-color: blue;transform: scale(0.5);/*高度和宽度均缩小为原来的一半*/}</style></head><body><div id="box1">原始效果</div><div id="box2">放大效果</div><div id="box3">缩小效果</div></body>
</html>

 

17、倾斜效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>倾斜效果</title><style type="text/css">div{width: 100px;height: 100px;background-color: lightcoral;}#box2{position: absolute;left: 50px;top: 150px;transform: skew(45deg,10deg);/*水平倾斜45度,垂直倾斜10度*/}</style></head><body><div id="box1">原始效果</div><div id="box2">倾斜效果</div></body>
</html>

 

18、淘宝衣服放大效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>淘宝衣服放大效果</title><style type="text/css">*{margin: 0;padding: 0;border: 0;}div{width: 200px;height: 200px;margin: 50px auto;overflow: hidden;}div img{transition: all 1s;/*设置过渡效果*/}div:hover img{transform: scale(1.3);/*图片放大1.3倍*/}</style></head><body><div><a href=""><img src="img/cloth.jpg"width="200"height="200" /></a></div></body>
</html>

 

点击后

19、改变中心点

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>改变中心点</title><style type="text/css">div{width: 100px;height: 100px;background-color: lightcoral;}.box2{background-color: red;transform: rotate(45deg);/*旋转45度*/}.box3{background-color: yellow;transform-origin: 100px 100px;/*移动中心点*/transform: rotate(45deg);/*旋转45度*/}</style></head><body><div class="box1">原始效果</div><div class="box2">旋转效果</div><div class="box3">改变中心点的旋转效果</div></body>
</html>

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux入门——“僵尸进程、孤儿进程”

引入 在linux中&#xff0c;特别是我们自己写代码时&#xff0c;使用fork&#xff08;&#xff09;创建子进程的时候&#xff0c;需要知道两种特殊的进程——僵尸进程、孤儿进程。这是我们不可忽视的进程的两种特殊情况。 一、僵尸进程 在C语言编程中&#xff0c;僵尸进程的出…

【数据结构 | C++】部落

在一个社区里&#xff0c;每个人都有自己的小圈子&#xff0c;还可能同时属于很多不同的朋友圈。我们认为朋友的朋友都算在一个部落里&#xff0c;于是要请你统计一下&#xff0c;在一个给定社区中&#xff0c;到底有多少个互不相交的部落&#xff1f;并且检查任意两个人是否属…

维护在线重做日志(一)

学习目标 解释在线重做日志文件的目的概述在线重做日志文件的结构控制日志开关和检查点多路复用和维护在线重做日志文件使用OMF管理在线重做日志文件获取在线重做日志文件信息 在线重做日志文件提供了在数据库发生故障时重做事务的方法。 每个事务都同步写入重做日志缓冲区&a…

mayo介绍和QTqmake编译基于Opencascade开发的mayo工程-小白配置

目录: 一、mayo介绍:zap: 最新功能&#xff08;截止7.8.2&#xff09;在这里插入图片描述 二、编译准备三、编译过程3.1QT Creator打开源码的pro工程3.2修改几处pro配置3.3复制所需的动态链接库3.4编译完成 一、mayo介绍 1️⃣mayo是一个基于opencascade开源库开发的一个开源CA…

【Github】如何使用Git将本地项目上传到Github

【Github】如何使用Git将本地项目上传到Github 写在最前面1. 注册Github账号2. 安装Git工具配置用户名和邮箱仅为当前项目配置&#xff08;可选&#xff09; 3. 创建Github仓库4. 获取仓库地址5. 本地操作&#xff08;1&#xff09;进入项目文件夹&#xff08;2&#xff09;克隆…

【layui】table的switch、edit修改

<title>简单表格数据</title><div class"layui-card layadmin-header"><div class"layui-breadcrumb" lay-filter"breadcrumb"><a>系统设置</a><a>简单表格数据</a></div> </div>&…

Spring Template

Thymeleaf 入门 Web 开发离不开动态页面的开发&#xff0c;很早以前企业主要使用 JSP 技术来开发网页&#xff0c;随着技术的升级更替&#xff0c;目前来说最主流的方案是&#xff1a;Thymeleaf&#xff0c;Thymeleaf 是一个模板框架&#xff0c;它可以支持多种格式的内容动态…

【大语言模型】ACL2024论文-20 SCIMON:面向新颖性的科学启示机器优化

【大语言模型】ACL2024论文-20 SCIMON&#xff1a;面向新颖性的科学启示机器优化 目录 文章目录 【大语言模型】ACL2024论文-20 SCIMON&#xff1a;面向新颖性的科学启示机器优化目录摘要研究背景问题与挑战如何解决创新点算法模型实验效果推荐阅读指数&#xff1a;★★★★☆ …

HTML实现 扫雷游戏

前言&#xff1a; 游戏起源与发展 扫雷游戏的雏形可追溯到 1973 年的 “方块&#xff08;cube&#xff09;” 游戏&#xff0c;后经改编出现了 “rlogic” 游戏&#xff0c;玩家需为指挥中心探出安全路线避开地雷。在此基础上&#xff0c;开发者汤姆・安德森编写出了扫雷游戏的…

docker镜像源配置、换源、dockerhub国内镜像最新可用加速源(仓库)

一、临时拉取方式 在docker pull后先拼接镜像源域名&#xff0c;后面拼接拉取的镜像名 $ docker pull dockerpull.org/continuumio/miniconda3 二、永久配置方式 vim修改/etc/docker/daemon.json&#xff0c;并重启docker服务。 # 创建目录 sudo mkdir -p /etc/docker# 写…

AMD(Xilinx) FPGA配置Flash大小选择

目录 1 FPGA配置Flash大小的决定因素2 为什么选择的Flash容量大小为最小保证能够完成整个FPGA的配置呢&#xff1f; 1 FPGA配置Flash大小的决定因素 在进行FPGA硬件设计时&#xff0c;选择合适的配置Flash是我们进行硬件设计必须考虑的&#xff0c;那么配置Flash大小的选择由什…

NVR录像机汇聚管理EasyNVR多品牌NVR管理工具/设备如何使用Docker运行?

在当今的安防监控领域&#xff0c;随着视频监控技术的不断发展和应用范围的扩大&#xff0c;如何高效、稳定地管理并分发视频流资源成为了行业内外关注的焦点。EasyNVR作为一款功能强大的多品牌NVR管理工具/设备&#xff0c;凭借其灵活的部署方式和卓越的性能&#xff0c;正在引…

【SKFramework框架】一、框架介绍

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群&#xff1a;398291828小红书小破站 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 【Unity3D框架】SKFramework框架完全教程《全…

Python 版本的 2024详细代码

2048游戏的Python实现 概述&#xff1a; 2048是一款流行的单人益智游戏&#xff0c;玩家通过滑动数字瓷砖来合并相同的数字&#xff0c;目标是合成2048这个数字。本文将介绍如何使用Python和Pygame库实现2048游戏的基本功能&#xff0c;包括游戏逻辑、界面绘制和用户交互。 主…

排序算法(选择排序、直接插入排序、冒泡排序、二路归并排序)(C语言版)

对数组进行排序&#xff0c;主要演示选择排序、直接排序、冒泡排序、二路归并排序算法&#xff0c;附上代码演示 一、编写好各类排序方法的函数 &#xff08;1&#xff09; s_sort(int e[],int n):选择排序。 &#xff08;2&#xff09;si_sort(int e[],int n):直接插人排序。…

Unity图形学之Surface Shader结构

1.没有Pass&#xff1a;因为Render Path已经封装好了 Shader "Custom/Test" {Properties{_Color ("Color", Color) (1,1,1,1)_MainTex ("Albedo (RGB)", 2D) "white" {}_Glossiness ("Smoothness", Range(0,1)) 0.5_Meta…

数据集-目标检测系列- 牵牛花 检测数据集 morning_glory >> DataBall

数据集-目标检测系列- 牵牛花 检测数据集 morning DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 贵在坚持&#xff01; 数据样例项目地址&#xff1a; * 相关项目 1&#xff09;数据集可视化项目&#xff1a;git…

摄影:相机控色

摄影&#xff1a;相机控色 白平衡&#xff08;White Balance&#xff09;白平衡的作用&#xff1a; 白平衡的使用环境色温下相机色温下总结 白平衡偏移与包围白平衡包围 影调 白平衡&#xff08;White Balance&#xff09; 人眼看到的白色&#xff1a;会自动适应环境光线。 相…

Odoo :免费且开源的农牧行业ERP管理系统

文 / 开源智造Odoo亚太金牌服务 引言 提供农牧企业数字化、智能化、无人化产品服务及全产业链高度协同的一体化解决方案&#xff0c;提升企业智慧种养、成本领先、产业互联的核心竞争力。 行业典型痛点 一、成本管理粗放&#xff0c;效率低、管控弱 产品研发过程缺少体系化…

oracle查看锁阻塞-谁阻塞了谁

一 模拟锁阻塞 #阻塞1 一个会话正在往一个大表写入大量数据的时候&#xff0c;另一个会话加字段&#xff1a; #会话1 #会话2 会话2被阻塞了。 #阻塞2 模拟一个会话update一条记录&#xff0c;没提交。 另一个会话也update这一条记录&#xff1a; 会话2被阻塞了。 二 简单查…