个人 CSS3 笔记
1. CSS3 选择器
2. CSS3属性
一、position属性
定义和用法：position 属性规定元素的定位类型。css
说明：这个属性定义创建元素布局所用的定位机制。任何元素均可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素自己是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。html
可能的值：web
浏览器支持：全部主流浏览器都支持 position 属性。canvas
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
浏览器
2.css的z-index属性bash
定义和用法：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素老是会处于堆叠顺序较低的元素的前面。app
注释：元素可拥有负的 z-index 属性值。ide
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！布局
说明：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。若是为正数，则离用户更近，为负数则表示离用户更远。动画
可能的值：
浏览器支持：全部主流浏览器都支持 z-index 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
二、box-shadow 属性
box-shadow 属性向框添加一个或多个阴影。
语法：box-shadow: h-shadow v-shadow blur spread color inset;
三、pointer-events
pointer-events属性值详解
- auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
- none——元素再也不是鼠标事件的目标，鼠标再也不监听当前层而去监听下面的层中的元素。可是若是它的子元素设置了pointer-events为其它值，好比auto，鼠标仍是会监听这个子元素的。
- 其它属性值为SVG专用，这里再也不多介绍了。
pointer-events: none;
可让某个元素实现相似于海市蜃楼的效果，具体理解为，你能够看的到某个元素，可是你没法摸的着。而 display：none; 是你摸不着，也看不见。
若是把某个元素再加上opacity：0；则能够很容易实现相似display:none；的效果（摸不着，看不见）。
更多用法请查看 pointer-events: none; 忽略某一层的存在
3. C33 的 2D和3D 转换
2D 转换包括：平移，旋转，缩放，偏转
<style>
/*transform 表示要进行2d转换了 平移，旋转，缩放，偏转 */
.box{
width: 800px;
height: 650px;
background-color: #ccc;
margin: 200px auto;
}
img{
transition: all 2s;
/*transform-origin: left center;*/
/*改变中心旋转点，left,center,right,top，center，bottom*/
}
img:hover{
/*平移，两个值，一个水平位置，一个垂直位置， 平移后仍然占位置，是平移前的位置*/
/*-webkit-transform: translate(100px,100px)*/
/*旋转，方向是顺时针，中心点是正中心*/
/*-webkit-transform:rotate(360deg);*/
/*偏转，第一个值水平偏转方向，第二个值垂直偏转方向*/
/*-webkit-transform:skew(180deg,360deg);*/
/*缩放，第一个值水平缩放倍数，第二值垂直缩放倍数，可用于鼠标通过时放大*/
/*-webkit-transform:scale(2,2);*/
/*若是要想添加多个2D转化，用空格隔开*/
/*先平移，后旋转*/
/*-webkit-transform:translate(300px,0) rotate(180deg);*/
}
</style>
<div class="box">
<img src="images/gl.jpg" alt="">
</div>复制代码
浏览器兼容性的处理，好比：
-webkit-transform，-moz-transform，-ms-transform，-o-transform
CSS3 的 3D 转换
<style>
.box{
width: 600px;
margin: 200px auto;
perspective: 520px;/*透视属性*/
}
.box:hover img{
/*-webkit-transform:translateZ(200px);*//*平移的3D转换*/
-webkit-transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
/*-webkit-transform:rotateX(360deg);*/
}
img{
transition: all 1.5s;
}
</style>
</head>
<body>
<div class="box">
<img src="images/mw.jpg" alt="">
</div>
</body>复制代码
4. CSS3 的过渡动画
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
-webkit-transition:width 2s ease-in-out 3s, height 2s linear 1s, background-color 2s linear;
/*第一个值，表示发生改变的属性，all 只要发生改变的属性，所有加上过渡动画*/
/*第二个值，表示时间*/
/*第三个值，表示动画的运行轨迹*/
/*若是有第四个值，表示 先变化一个属性，延迟必定时间，再变化另外一个属性，
两个属性之间用逗号隔开*/
}
.box:hover{
width: 1500px;
height: 500px;
background-color: pink;
}
</style>
<div class="box"></div>
复制代码
若是有第四个值，表示 先变化一个属性，延迟必定时间，再变化另外一个属性， 两个属性之间用逗号隔开
linear,规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）
ease，规定慢速开始，而后变快，而后慢速结束的过渡效果（等于cubicbezier(0.25,1,0.25,1)）
ease-in，规定以慢速开始的过渡效果，（等于cubic-bezier(0.42,0,1,1)）
ease-out，规定以慢速结束的过渡结果（等于cubic-bezier(0,0,0.58,1)）
ease-in-out，规定以慢速开始和结束的过渡效果，（等于cubic-bezier(0.42,0,0.58,1)）
必需要有： 1.起始属性 2.终止属性
CSS3 过渡使用
1.须要具备层级关系
2.必须是 hover 能够作到的
3.须要考虑是否有动态数据的添加，没有动态就能够用，动态数据用jQuery来写，用回调来接收动态数据
5. object-fit ( image，video ) 自适应
（1）替换元素
其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，好比image, 嵌入的文档(iframe之类)或者applet。好比，img元素的内容一般会被其src属性指定的图像替换掉。替换元素一般有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。好比一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另外一方面，其余文档也可能没有固有的尺寸，好比一个空白的html文档。 CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展示独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
（2）为什么须要object-position/object-fit?
适配响应式布局
（3）object-fit理解
.fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; }复制代码
每一个属性值的具体含义以下：
fill : 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain : 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸必定能够在容器里面放得下。所以，此参数可能会在容器内留下空白。
cover : 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸必定大于容器尺寸，宽度和高度至少有一个和容器一致。所以，此参数可能会让替换内容（如图片）部分区域不可见。 none : 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down : 中文释义“下降”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
6. 同向边距的重合问题（overflow : hidden 三个做用）
overflow : hidden
（1）给父级加 overflow : hidden 能够清除子级浮动对父级的影响
（2）给父级加 overflow : hidden 可使子级超出部分隐藏（好比：制做轮播图时）
（3）给父级加 overflow : hidden。解决同向边距的重合问题；
HTML:
<div id="box">
<p>中华人民共和国</p>
</div
CSS:
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 300px;
height: 300px;
background-color: aquamarine;
/* padding-top: 30px; */
}
#box p{
background-color: brown;
margin-top: 30px;
}
</style>
复制代码
案例
案例 1：盾牌制做：
<style>
html,body{
background-color: pink;
width: 100%;
height: 100%;
position: relative;
padding-top: 1px;
/*同向边距问题的解决：
1. overflow: hidden;
2.padding-top: 1px;*/
}
.box{
width: 480px;
margin: 100px auto;/*上下100px，左右相等*/
}
.box img:first-child{
transform: translate(-200px,50px) rotate(45deg);
}
.box img:nth-child(2){
transform: translate(-600px,-50px) rotate(60deg);
}
.box img:nth-child(3){
transform: translate(400px,80px) rotate(60deg) scale(.5,.5);
}
.box img:nth-child(4){
transform: translate(-400px,-90px) rotate(60deg) scale(.5,.5);
}
.box img:nth-child(5){
transform: translate(0px,80px) rotate(54deg) scale(.5,.5);
}
.box img:nth-child(6){
transform: translate(400px,80px) rotate(65deg) scale(.5,.5);
}
.box img:nth-child(7){
transform: translate(400px,80px) rotate(45deg) scale(.5,.5);
}
.box img:nth-child(8){
transform: translate(0px,-300px) rotate(265deg) scale(.5,.5);
}
.box img:nth-child(9){
transform: translate(0,80px) rotate(60deg);
}
img{
transition: all 2s;
}
body:hover .box img{
transform: none;
}
</style>
</head>
<body>
<div class="box">
<img src="images/shield_1_01.png" alt="">
<img src="images/shield_1_02.png" alt="">
<img src="images/shield_1_03.png" alt="">
<img src="images/shield_1_04.png" alt="">
<img src="images/shield_1_05.png" alt="">
<img src="images/shield_1_06.png" alt="">
<img src="images/shield_1_07.png" alt="">
<img src="images/shield_1_08.png" alt="">
<img src="images/shield_1_09.png" alt="">
</div>
</body>复制代码
案例 2：扑克牌
<style>
.box{
background-color: skyblue;
width: 600px;
height: 600px;
margin: 200px auto;
position: relative;
}
.box img{
position: absolute;
top:100px;
left: 100px;
transition: all 1s;
transform-origin: center bottom;
}
.box:hover img:first-child{
transform: rotate(0deg);
}
.box:hover img:nth-child(2){
transform: rotate(15deg);
}
.box:hover img:nth-child(3){
transform: rotate(30deg);
}
.box:hover img:nth-child(4){
transform: rotate(45deg);
}
.box:hover img:nth-child(5){
transform: rotate(60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
<img src="images/pk1.png" alt="">
</div>
</body>复制代码
案例3. 钟表的翻转
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
perspective: 600px;
}
.box::before,.box::after{
content: "";
display: block;
width: 300px;
height: 300px;
-webkit-background-size:100% 100%;
background-size: 100% 100%;
position: absolute;
}
.box::before{
background-image: url(images/1.jpg);
z-index: 1;
}
.box::after{
background-image: url(images/timg.jpg);
transition: transform 2s;
transform-origin: right center;
z-index: 2;
}
.box:hover::after{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>复制代码
案例4. 正反面的翻页效果
<style>
.box{
width: 310px;
height: 441px;
position: relative;
margin: 0 auto;
}
.box img{
position: absolute;
top: 0;
left: 0;
transition: all 1s;
backface-visibility: hidden;/*背面隐藏*/
perspective: 500px;/*透视属性，能够增长3D效果*/
}
.box img:first-child{
z-index: 2;
}
.box img:nth-child(2){
-webkit-transform:rotateY(180deg);
}
.box:hover img:first-child{
-webkit-transform:rotateY(180deg);
}
.box:hover img:nth-child(2){
-webkit-transform:rotateY(0);
}
</style>
</head>
<body>
<div class="box">
<img src="images/pk1.png" alt="">
<img src="images/pk2.png" alt="">
</div>
</body>复制代码
案例5. 正方体的制做
style>
body{
perspective: 800px;
}
div{
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.box{
margin: 400px auto;
position: relative;
transform-style: preserve-3d;
-webkit-transform:rotateY(24deg) rotateX(35deg);
transition: transform 6s linear;
}
.box:hover{
-webkit-transform:rotateY(360deg) rotateX(360deg);
}
.box div{
position: absolute;
line-height: 300px;
text-align: center;
font-size: 100px;
color: #ccc;
}
.box div:first-child{
background-color: red;
transform-origin: right;
-webkit-transform:rotateY(90deg);
}
.box div:nth-child(2){
background-color: orange;
transform-origin: left;
-webkit-transform:rotateY(270deg);
}
.box div:nth-child(3){
background-color: yellow;
-webkit-transform:rotateX(90deg) translateY(150px) translateZ(150px);
}
.box div:nth-child(4){
background-color: green;
transform-origin: left;
-webkit-transform:rotateX(270deg) translateY(-150px) translateZ(150px);
}
.box div:nth-child(5){
background-color: blue;
-webkit-transform:translateZ(300px)
}
.box div:nth-child(6){
background-color: purple;
-webkit-transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="up">上</div>
<div class="down">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="front">前</div>
<div class="rear">后</div>
</div>
</body>复制代码
- 1. 个人笔记
- 2. HTML5/CSS3笔记
- 3. CSS3笔记
- 4. Redis个人笔记
- 5. 个人uniapp笔记
- 6. Git个人笔记
- 7. python个人笔记
- 8. 个人git笔记
- 9. CS224N个人笔记
- 10. node.js个人笔记
- 更多相关文章...
- • ASP.NET Razor - 标记 - ASP.NET 教程
- • ADO Recordset（记录集） - ADO 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 再有人问你分布式事务，把这篇扔给他
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 个人笔记
- 2. HTML5/CSS3笔记
- 3. CSS3笔记
- 4. Redis个人笔记
- 5. 个人uniapp笔记
- 6. Git个人笔记
- 7. python个人笔记
- 8. 个人git笔记
- 9. CS224N个人笔记
- 10. node.js个人笔记