程序员经验分享-hwhale

web前端技术笔记（七）CSS3动画、选择器和权重

2023-10-27

圆角

设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：
border-radius:50%;

效果图

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.box{
			width:300px;
			height:300px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;
			border-top-left-radius:60px;
			border-top-right-radius:100px;
		}

		.box1{
			width:300px;
			height:300px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;
			border-bottom-left-radius:150px;
			border-top-right-radius:150px;
		}

		.box2{
			width:300px;
			height:300px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;
			/* border-radius:150px; */

			border-radius:50%;
		}


	</style>
</head>
<body>
	<div class="box"></div>

	<div class="box1"></div>

	<div class="box2"></div>
</body>
</html>

透明

rgba（新的颜色值表示法）

1、盒子透明度表示法：

.box
{
    opacity:0.1;
    /* 兼容IE */
    filter:alpha(opacity=10); 
}

2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

效果

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		body{
			background:url(images/banner01.jpg);
		}
		/*盒子整个透明*/
		.box{
			width:300px;
			height:100px;
			background-color:#000;
			color:#fff;
			font-size:30px;
			text-align:center;
			line-height:100px;
            /* 元素透明的完整写法 */
			opacity:0.3;
			filter:alpha(opacity=30);
		}
		/*背景元素透明*/
		.box2{
			width:300px;
			height:100px;
			background-color:rgba(0,0,0,0.3);
			color:#fff;
			font-size:30px;
			text-align:center;
			line-height:100px;
			margin-top:50px;
		}






	</style>
</head>
<body>
	<div class="box">这是一个div</div>

	<div class="box2">这是第二个div</div>
</body>
</html>

transition动画

  • 1、transition-property 设置过渡的属性，比如：width height background-color
  • 2、transition-duration 设置过渡的时间，比如：1s 500ms
  • 3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
  • 4、transition-delay 设置动画的延迟
  • 5、transition: property duration timing-function delay 同时设置四个属性

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		.box{
			width:100px;
			height:100px;
			background-color:gold;
			/* transition:width 1s ease,height 1s ease 1s,background-color 1s ease 2s; */
			

			/* 
			多个属性同时做动画，可以合并成下面一句
			transition:width 1s ease,height 1s ease,background-color 1s ease; 

			*/

			transition:all 1s ease;
		}



		.box:hover{
			width:600px;
			height:500px;
			background-color:red;
		}



	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

综合练习：

制作鼠标移入图片时，图片说明滑入的效果

示例图片
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.pic_con{
			width:200px;
			height:300px;
			margin:50px auto 0;
			position:relative;
			overflow:hidden;
		}
		.pic_info{
			position:absolute;
			left:0;
			top:300px;
			width:180px;
			height:100px;
			background-color:rgba(0,0,0,0.3);
			color:#fff;
			padding:10px;
			transition:all 500ms ease;
		}

		.pic_con:hover .pic_info{
			top:180px;
		}

	</style>
</head>
<body>
	<div class="pic_con">
		<img src="images/banner01.jpg" alt="banner">
		<div class="pic_info">
			<h3>文字说明标题</h3>
			<p>文字说明文字说明文字说明文字说明</p>
		</div>
	</div>
</body>
</html>

transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform</title>
	<style type="text/css">
		/*位移*/
		.box{

			width:200px;
			height:200px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;

			/* translate位移比定位做的位移性能高，建议使用这种位移 */
			transform:translate(0px,0px);
			transition:all 500ms ease;
		}


		.box:hover{
			transform:translate(30px,30px);
		}

		/*缩放*/
		.box2{

			width:200px;
			height:200px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;
			transform:scale(1,1);
			transition:all 500ms ease;		
		}

		.box2:hover{
			transform:scale(2,2);
		}

		/*旋转*/
		.box3{
			width:200px;
			height:200px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;
			transform:rotate(0deg);
			transition:all 500ms ease;		
		}

		.box3:hover{
			transform:rotate(45deg);
		}

		/*斜切*/
		.box4{
			width:200px;
			height:200px;
			border:3px solid #000;
			background-color:gold;
			margin:50px auto 0;
			transform:skew(0,0);
			transition:all 500ms ease;		
		}

		.box4:hover{
			transform:skew(0,45deg);
		}



	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
</body>
</html>

transform-origin 旋转中心点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.box01,.box02,.box03,.box04{
			width:200px;
			height:200px;
			border:3px solid #000;
			background:gold;
			margin:30px;
			float:left;
			transition:all 500ms ease;
		}
		.box02{
			transform-origin:left center;
		}
		.box03{
			transform-origin:left top;
		}
		.box04{
			transform-origin:50px 50px;
		}

		.box01:hover,.box02:hover,.box03:hover,.box04:hover{
			transform:rotate(90deg);
		}


	</style>
</head>
<body>
	<div class="box01"></div>
	<div class="box02"></div>
	<div class="box03"></div>
	<div class="box04"></div>
</body>
</html>

三维旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三维旋转</title>
	<style type="text/css">

		/* 	 
			旋转的轴向：

			x轴：从左往右

			y轴：从上往下

			z轴：从屏幕内往外

			判断旋转的方向：让轴向对着自己，顺时针方向


		*/
		
		.box{
			width:300px;
			height:300px;
			background-color:gold;
			border:3px solid #000;
			margin:50px auto 0;
			transform-style:preserve-3d;

			/* 做变形动画需要设置初始值，不设置容易出现跳变的bug */
			/* 三维旋转要加上透视效果 800px 效果最好 */
			transform:perspective(800px) rotateY(0deg);
			transition:all 500ms ease;
		}

		.box:hover{
			transform:perspective(800px) rotateY(45deg);
		}


		.box2{
			width:300px;
			height:300px;
			background-color:gold;
			border:3px solid #000;
			margin:50px auto 0;
			transform-style:preserve-3d;

			/* 做变形动画需要设置初始值，不设置容易出现跳变的bug */
			transform:perspective(800px) rotateX(0deg);
			transition:all 500ms ease;
		}

		.box2:hover{
			transform:perspective(800px) rotateX(45deg);
		}




	</style>
</head>
<body>
	<div class="box"></div>

	<div class="box2"></div>
</body>
</html>

翻面动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width:700px;
			height:272px;			
			border:3px solid #000;
			margin:50px auto 0;
			position:relative;
			/* 让容器里面的元素按照3d空间显示（规范写法）  */
			transform-style:preserve-3d;
		}
		.box img{
			position:absolute;
			left:200px;
			top:0;
			transform:perspective(800px) rotateY(0deg);
			transition:all 500ms ease;
			backface-visibility:hidden;
		}		
		.box:hover img{
			transform:perspective(800px) rotateY(180deg);
		}
		.box .back{
			width:300px;
			height:272px;
			background-color:pink;
			position:absolute;
			left:200px;
			top:0;
			font-size:20px;
			text-align:center;
			line-height:272px;
			transform:perspective(800px) rotateY(-180deg);
			transition:all 500ms ease;
			backface-visibility:hidden;
		}
		.box:hover .back{
			transform:perspective(800px) rotateY(0deg);
		}
	</style>
</head>
<body>
	<div class="box">		
		<img src="images/location_bg.jpg" alt="背景图">
		<div class="back">
			图片的说明文字
		</div>
	</div>
</body>
</html>

animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

方块往复运动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		/*  定义动画  */
		
		@keyframes moving{
			from{
				width:100px;
			}
			to{
				width:500px;
			}
		}
		
		.box{
			width:100px;
			height:100px;
			background-color:gold;
			animation:moving 1s ease infinite alternate;
			
		}

		.box:hover{
			animation-play-state:paused;
		}


	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

风车旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>风车旋转</title>
	<style type="text/css">
		
		@keyframes rotating{
			from{
				transform:rotate(0deg);
			}
			to{
				transform:rotate(360deg);
			}
		}

		.zhuan{
			display:block;
			width:400px;
			height:400px;
			margin:50px auto 0;
			animation:rotating 2s linear infinite;
		}
		
	</style>
</head>
<body>
	<img src="images/fengche.png" alt="风车图片" class="zhuan">
</body>
</html>

走路动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路动画</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

2、E:first-child：匹配元素类型为E且是父元素的第一个子元素
3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素

属性选择器：
1、E[attr] 含有attr属性的元素

<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">这是一个div元素</div>

2、E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”
3、E[attr^=‘ok’] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$=‘ok’] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”

loading动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		@keyframes loading{			
			from{
				transform:scale(1,1);
			}
			to{
				transform:scale(1,0.5);
			}
		}
		.con{
			width:300px;
			height:158px;
			border:1px solid #000;
			margin:150px auto 0;
		}
		.con div{
			width:30px;
			height:100px;
			float:left;
			background-color:gold;
			margin:15px;
			border-radius:15px;
			animation:loading 500ms ease infinite alternate;
		}
		.con div:nth-child(1){
			background-color:red;
		}
		.con div:nth-child(2){
			background-color:green;
			animation-delay:100ms;
		}
		.con div:nth-child(3){
			background-color:pink;
			animation-delay:200ms;
		}

		.con div:nth-child(4){
			background-color:lightgreen;
			animation-delay:300ms;
		}

		.con div:nth-child(5){
			background-color:lightblue;
			animation-delay:400ms;
		}

		.con p{
			text-align:center;
		}





	</style>
</head>
<body>
	<div class="con">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<p>loading...</p>
	</div>
</body>
</html>

css3新增选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		/*  匹配第二个类型是div子元素  */

		.con div:nth-child(2){
			color:red;
		}

		.con div:nth-child(3){
			color:pink;
		}

		/* 
		.list li:nth-child(1){
			background-color:red;
		}

		等同于下面的写法：

		*/

		.list li:first-child{
			background-color:red;
		} 

		/* .list li:nth-child(8){
			background-color:green;
		} 

		等同于下面的写法：

		*/


		.list li:last-child{
			background-color:green;
		} 

		/* 	
		    2n:偶数行;
		    2n+1:奇数行;

		 */

		.list2 li:nth-child(2n+1){
			background-color:gold;
		}


	</style>
</head>
<body>

	<div class="con">
		<h3>标题</h3>
		<div>这是一个div</div>
		<div>这是第二个div</div>	
	</div>


	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>


	<ul class="list2">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">		
		.box > div{			
			border:1px solid red;
			padding:10px;
			margin:10px;
		}
		.box2 .title2{
			color:red;
		}
		.box2 .title2 ~ p{
			color:pink
		}
		.box2 .title2 + p{
			color:gold;
		}
		.box2 .title1 + p{
			color:green;
		}
	</style>
</head>
<body>
	<div class="box">
		<div>
			<div>这是div里面的文字</div>
		</div>
	</div>


	<div class="box2">
		<h3 class="title1">这是标题一</h3>
		<p>这是段落一</p>
		<h3 class="title2">这是标题二</h3>
		<p>这是段落二</p>
		<p>这是段落二二</p>
		<h3>这是标题三</h3>
		<p>这是段落三</p>
	</div>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* 匹配所有有class属性的div    */
		.con div[class]{
			background-color:gold;
			margin-bottom:10px;
		}
		 /* 匹配class属性值是ok的div  */
		.con div[class="ok"]{
			background-color:pink
		}

		/* 匹配class属性值是“ok”开头的div  */
		.con div[class^="ok"]{
			text-indent:30px;
		}

		/* 匹配class属性值是“ok”结尾的div  */
		.con div[class$="ok"]{
			font-size:30px;
		}

		/* 匹配class属性值含有“ok”的div  */
		.con div[class*="ok"]{
			border-bottom:2px solid #000;
		}
		
	</style>
</head>
<body>
	<div class="con">
		<div class="ok">1</div>
		<div class="okabc">2</div>
		<div class="abcok">3</div>
		<div class="abcok123">4</div>
		<div>5</div>
	</div>
</body>
</html>

权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

权重的计算实例

1、实例一：

<style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red 
-->

2、实例二：

<style type="text/css">
    #content div.main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>
<!-- 
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

CSS3

html5

web前端技术笔记（七）CSS3动画、选择器和权重 的相关文章

  • 揭秘阿里新一代SpringCloud学习指南：掌握最具中国特色的微服务组件

    SpringCloud Alibaba 的优势 阿里使用过的组件经历了考验 性能强悍 设计合理 现在开源出来给大家用 成套产品搭配完善的可视化界面给开发运维带来了极大的便利 搭建简单 学习曲线低 作为国内微服务领域的领军企业 阿里巴巴在微服

  • 自定义设置一个屏保程序

    用C语言写一个简单的窗口程序 目的是生成一个可视化的图形窗口 需要用到EasyX库 可在文章末尾的网盘链接中下载 该程序退出需左击鼠标 否则无法退出 include

  • Learning_the_shell

    昨天逛了www linuxcommand org 学习了shell的基本知识 对alias function type等基本命令有了比较深入的了解 还有就是对top kill ps jobs等进程命令有了更清晰的了解 特别是kill的参数问

  • MRI T1加权结构

    MRI是多参数成像 出于分析图像的方便 希望一帧MRI图像的灰度主要由一个特定的成像参数决定 这就是所谓的加权图像 weighted imaging WI 例如图像灰度主要由T1决定时就是T1加权图像 主要由T2决定时就是T2加权图像 主要

随机推荐

  • ubuntu18.04安装caffe（cpu版）

    主要根据ubuntu安装caffe这个博客 网上有些教程说要安装protobuf2 6 1 实际上只要有protobuf就行 版本无所谓 如果编译过程中出现google protobuf未定义的引用之类的报错 可能是protobuf版本和g

  • Python 类中pass语句

    Python pass 是空语句 是为了保持程序结构的完整性 pass 不做任何事情 一般用做占位语句 本文主要介绍Python 类中pass语句 原文地址 Python 类中pass语句

  • 普氏分析 matlab,降维和特征提取 - MATLAB & Simulink - MathWorks 中国

    特征选择 Learn about feature selection algorithms and explore the functions available for feature selection This topic intro

  • 10 分钟上手 Vue 组件 Vue-Draggable

    Vue 综合了 Angualr 和 React 的优点 因其易上手 轻量级 受到了广泛应用 成为了是时下火热的前端框架 吸引着越来越多的前端开发者 本文将通过一个最简单的拖拽例子带领大家快速上手 Vue 组件 Vue Draggable 首

  • 使用()控件的saveas方法可以将上传文件保存到服务器.,3.25.1 使用FileUpload控件上传文件...

    VB Protected Sub Button1 Click ByVal sender As Object ByVal e As System EventArgs If FileUpload1 HasFile Then Try FileUp

  • Android禁用第三方应用

    需要权限android Manifest permission CHANGE COMPONENT ENABLED STATE 而这个权限是只有system app才能使用 所以app需要系统签名 非system app即便在Android

  • Java中使用到的异步任务总结(CompletableFuture类，@Async注解)

    文章目录 1 CompletableFuture 1 1 Completable supplyAsync 1 2 Completable runAsync 1 3 get方法 1 4 使用自定义线程池 1 5 Completable all

  • LaTex

    LaTex LaTex 前言 一 安装配置LaTex 版本安装介绍 配置使用的IDE 二 简单的论文配置问题 基本的语法 1 文档类型和开始 2 最基础的格式化命令 3 Chapters and Sections 文章的章节 4 添加图片

  • 大学物理实验：迈克尔逊干涉仪的调整与使用

    若本文对你有帮助 记得点赞 关注我哟 大学物理专栏https blog csdn net qq 41587612 category 9323622 html

  • Java图形化界面设计之容器（JFrame）详解

    Java图形化界面设计之容器 JFrame 详解 Java图形化界面设计 容器 JFrame 程序是为了方便用户使用的 因此实现图形化界面的程序编写是所有编程语言发展的必然趋势 在命令提示符下运行的程序可以让我们了解java程序的基本知识体

  • kvm的快照功能 (二、基于libvirt的快照)

    实例二 利用libvirt使用快照 virsh snapshot create domain name 一 创建虚机快照 名字自动生成 可在开机 关机 suspend等各种状态下做 virsh snapshot create test Do

  • 【TensorFlow 入门】6、eval 函数

    eval 其实就是tf Tensor的Session run 的另外一种写法 但两者有差别 eval 将字符串string对象转化为有效的表达式参与求值运算返回计算结果 eval 也是启动计算的一种方式 基于Tensorflow的基本原理

  • 算法入门之最常用的排序：快速排序算法

    回顾前面2篇文章我们提到了桶算法和冒泡算法 虽然冒泡算法解决了桶算法的空间问题 但是如果排序的基数比较大 你会发现冒泡算法的时间复杂度O N 也是惊人的 有没有一种更好的算法既能解决空间问题又能解决时间复杂度的问题呢 答案就是我们今天要说的

  • 华为机试题：【中级】报文转换

    描述 报文转换 报文中如果出现0x7E 转义成为2个字节0x7D 0x5E 如果出现0x7D 转义成为2个字节

  • leetcode 110.平衡二叉树

    110 平衡二叉树 leetcode 110 平衡二叉树 题目描述 平衡二叉树 每个节点的左右两个子树的高度差的绝对值不超过1 该二叉树不是平衡二叉树 不是 每个节点的左右子树高度差不超过1 递归解法 每次递归结束时都是当二叉树为一个根节点

  • R绘图笔记

    前面介绍过一些图形的绘制 我们有时候进行GO富集分析 需要绘制富集结果 这里介绍怎么将GO BP GO MF GO CC绘制到同一图形中 library ggplot2 library RColorBrewer display brewer

  • 如何做好技术团队review

    一 Code Review的好处 想要做好Code Review 必须让参与的工程师充分认识到Code Review的好处 1 互相学习 彼此成就 无论是高手云集的架构师团队 还是以CURD为主的业务开发团队 大家的技术能力 经验都是有差异

  • numpy库笔记

    一 ndarray类常用的属性 我用的是jupyter编程 将就看一下 import numpy as np a np random rand 3 4 生成3行4列的随机数组 a reshape 4 3 修改a为4行3列 a reshape

  • 为什么8位数据范围是-128到127，而不是-127到128?

    很表面很浅薄的问题 简单说爱怎么规定就怎么规定 甚至 1到254都行 无非是显示时通过编码表做个转换的问题而已 不过 当初选择 补码 这种编码形式 却并不像表面看起来那么浅薄 背后的道道可多着呢 首先 8位二进制一共可以提供256个 码点

  • web前端技术笔记（七）CSS3动画、选择器和权重

    CSS3动画 圆角 效果图 html 透明 rgba 新的颜色值表示法 效果 html transition动画 html 综合练习 transform变换 transform origin 旋转中心点 三维旋转 animation动画 方

热门标签