Css3基础操作

. Css3?

css3事css的最新版本

width. heith.background.border**都是属于css2.1
CSS3会保留之前 CSS2.1的内容，只是添加了一些新的语法。
CSS3 : border-radius :nth-of-type() background-size**

## 1.transition过渡？
.transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;
.transition-duration ：规定完成过渡效果需要多少秒或毫秒。
需要添加单位：s (秒) ms (毫秒) 1s == 1000ms
transition-delay : 定义过渡效果何时开始。
2s : 延迟两秒进行过渡
-2s : 提前两秒进行过渡
transition-timing-function: 规定速度效果的速度曲线。
运动形式：加速、减速、匀速...
linear（匀速）
ease（默认值）
ease-in（加速）
ease-out（减速）
ease-in-out（先加速后减速）
复合写法：
transition:all 2s linear;
transition:linear 2s all;
transition:2s linear all;
注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。

transition:2s 3s linear all; 3s表示延迟时间在开始运动

<style>
#box{ width:100px; height: 100px; background:red;
transition-duration : 2s;
transition-timing-function: linear; }
#box:hover{ width:200px; height: 200px; background: blue;}
</style>
</head>
<div id="box"></div>

</body>
</html>
代码在这里可以试试

3. transform变形？
translate : 位移
transform:translate(100px,100px); : 两个值 分别对应 x 和 y。
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); ( 3d )

<style>
*{ margin:0px; padding:0;}
body{ height:2000px;}
#share{ width:300px; height:300px; background:red; position: fixed;
left: -300px; top:50%; margin-top:-150px;
transition:1s;
}
share div{ width:30px; height: 100px; background:blue; position:absolute;
right:-30px; top:0;
color:white; font-size:30px;
}
share:hover{ left:0;}
</style>
</head>
<body>
<div id="share">
<div>分享</div>
</div>
</body>
</html>

**scale : 缩放**
transform:scale(num) num是一个比例值，正常比例是1。
transform:scale(num1 , num2) 两个值 分别对应 w 和 h
transform:scaleX()
transform:scaleY()
transform:scaleZ() ( 3d )

<style>
#box{ width:538px; height:414px; overflow: hidden;}
#box img{ transition: .5s linear;}
#box:hover img{ transform:scale(1.3);}
</style>
</head>
<body>
<div id="box">
<img src="./wys.jpg" alt="">
</div>
</body>

**rotate : 旋转**
transform:rotate(num) num是旋转的角度 30deg
正值：顺时针旋转
负值：逆时针旋转
表示一个角：角度deg 或 弧度rad

rotateX() ( 3d )
rotateY() ( 3d )
rotateZ()

<style>
#box1{ width:300px; height: 300px; border:1px black solid; margin:30px auto;}
#box2{ width:100px; height:100px; background:red; transition: 1s;
transform-origin: 150px 150px;
}
#box1:hover #box2{ transform:rotate(180deg);}

</style>
</head>
<body>
<div id="box1">
<div id="box2">bbbbb</div>
</div>
</body>
</html>

**skew : 斜切**
transform:skew(num1,num2) : num1和num2都是角度，针对的是x 和 y
transform:skewX()
transform:skewY()
注：skew没有3d写法。

注：所有的变形操作，都不会影响到其他元素。(类似于相对定位)
注：变形操作对inline(内联元素)不起作用的。
注：transform可以同时设置多个值。
先执行后面的操作，在执行前面的操作。
位移会受到后面要执行的缩放、旋转和斜切的影响。

## 4. tranform-origin 基点位置 ?

主要是针对 旋转和缩放，默认都是中心点为基点。
left 左 right右

## 5. animation动画？

原理：逐帧动画。会把整个运动过程，划分成100份。

**animation-name :** 设置动画的名字 (自定义的)
**animation-duration :** 动画的持续时间
**animation-delay :** 动画的延迟时间
**animation-iteration-count :** 动画的重复次数 ，默认值就是1 ，infinite无限次数
**animation-timing-function :** 动画的运动形式
**ease linear**

**@keyframes 动画的名字 {
from {}
to {}
}**
**from : 起点位置 , 等价于 0% to : 终点位置 ，等价于 100%**

动漫扩展

<style>
#box{width:100px; height:100px; background:red; margin:10px;
animation: 3s move infinite;
animation-direction: alternate;
}
@keyframes move {
0%{ transform:translate(0,0);}
100%{ transform:translate(400px,0)}
}
</style>
</head>
<body>
<!-- <div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div> -->
<div id="box"></div>
</body>
</html>

## 复合样式：

**animation**

**animation-fill-mode :** 规定动画播放之前或之后，其动画效果是否可见。
**none (默认值) :** 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
**backwards :** 在延迟的情况下，让0%在延迟前生效
**forwards :** 在运动结束的之后，停到结束位置
**both :** backwards和forwards同时生效

**animation-direction :** 属性定义是否应该轮流反向播放动画。
**alternate :** 一次正向(0%~100%)，一次反向(100%~0%)
**reverse :** 永远都是反向 , 从100%~0%
**normal** (默认值) : 永远都是正向 , 从0%~100%

## 6. 3D效果？

**perspectve(景深) :** 离屏幕多远的距离去观察元素，值越大幅度越小。
3D的眼镜

rotateX
rotateY
translateZ
scaleZ

注：反馈回来的立体，仅限于平面。

**transform-style :** 3D空间
flat (默认值2d)、preserve-3d (3d，产生一个三维空间)

注：只要是有厚度的立体图形，就必须添加3D控件。

注：在立方体中默认会沿着第一个面进行旋转。
**tranform-origin : x y z;** (z不能写单词，只能写数字)

**perspective-origin :** 景深-基点位置，观察元素的角度。

**backface-visibility :** 背面隐藏
**hidden、visible** (默认值)

**3D正方体写法**

<style>
*{ margin:0; padding:0;}
ul{ list-style: none;}
#box{ width:300px; height: 300px; border:1px black solid; margin:30px auto;
perspective: 500px;
}
#box ul{ width:100px; height:100px; margin:100px; position: relative;
transition: 4s;
transform-style: preserve-3d;
}
#box ul li{ width:100%; height: 100%; position: absolute; left:0; top:0; text-align: center; line-height: 100px; font-size:30px;}
#box ul li:nth-of-type(1){ background:red;}
#box ul li:nth-of-type(2){ background:blue; left:100px;
transform-origin:left; transform:rotateY(90deg);}
#box ul li:nth-of-type(3){ background:green; left:-100px;
transform-origin:right; transform:rotateY(-90deg);
}
#box ul li:nth-of-type(4){ background:hotpink; top:-100px;
transform-origin:bottom; transform:rotateX(90deg);
}
#box ul li:nth-of-type(5){ background:gray; top:100px;
transform-origin:top; transform:rotateX(-90deg);
}
#box ul li:nth-of-type(6){ background:yellow;
transform:translateZ(-100px) rotateY(180deg);
}
#box:hover ul{ transform:rotateY(360deg); }
</style>
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>

### 3d写法( 扩展学习 )

scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg
rotate3d(1,1,1,30deg);
scale translate skew

## 7. background-origin : 背景图的填充位置

1.默认情况下，如果xy都平铺的话，border padding content 区域都有背景图。

padding-box (默认) : 在padding区域开始填充背景图
border-box : 在border区域开始填充背景图
content-box : 在content区域开始填充背景图

2. background-clip : 背景图的裁切方式

padding-box
border-box (默认)
content-box

注：当位置与裁切写入复合样式中，那么第一个值表示位置，第二个值表示裁切。

背景图的填充

<style>
#box{ width:400px; height:400px; border:50px rgba(255,0,0,.5) solid; background:url('./laoli.jpg') padding-box content-box; padding:50px; color:white;
/* background-origin: border-box; */
/* background-origin: content-box;
background-clip: content-box; */
}
</style>
</head>
<body>
<div id="box">我是content部分</div>
</body>
</html>

## 8. CSS3渐变？

线性渐变：
background-image:linear-gradient( 20deg , red , blue);
注：角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。

径向渐变：
radial-gradient : 径向渐变

CSS3渐变

<style>
#box{ width:300px; height:40px; border:1px black solid; margin:50px;
background-image:linear-gradient( to right top, green 25% , gray 25%, gray 50% , green 50% , green 75%, gray 75%);
background-size:40px 40px;
animation: infinite linear 3s move;
}
@keyframes move {
0%{ background-position: 0 0;}
100%{ background-position: 400px 0;}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

逆战班

Css3 新增的属性以及使用的更多相关文章

  1. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

  3. CSS3新增的属性有哪些：

    CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...

  4. css3新增的属性 - 分享

    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...

  5. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  6. CSS3新增基础属性总结——20160409（易达客）

    1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...

  7. css3新增的属性选择器

    使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att ...

  8. css3新增的属性

    由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀, 如:-moz-       firefox火狐 -ms-         IE ...

  9. Css3新增背景属性

    1.background-origin 背景的起始位置 background-origin: border-box || padding-box || content-box; 案例初始化: 代码: ...

随机推荐

  1. Log4j模板

    log4j.rootLogger=DEBUG, A1,A2 log4j.appender.A1.MaxFileSize=1kb #10个备份 log4j.appender.A1.MaxBackupIn ...

  2. 题解 P2642 【双子序列最大和】

    前言 其实这道题的关键就是在于预处理,其方法类似于 合唱队形 正文 求最大子段和 要想求出双子序列最大和,首先我们要会求出最大子段和 最大子段和的求值方法很简单 定义 \(f_i\) 为以第 \(i\ ...

  3. Python：（使用matplotlib画图）次坐标轴，两个坐标轴

    https://blog.csdn.net/Poul_henry/article/details/82533569

  4. type=file 文件修改表单 名称不能正常回显的问题

     easyui 框架下   代码如下: css: .file_box{ float: right; width: 1035px; border: 1px solid #999; height: 32p ...

  5. cookie sessionStorage localStorage 使用小结

    1.cookie 随http 一起发送 2.webStorage 客户端本地存储功能 可以在客户端 本地建立 一个数据库 不参与与服务器的通讯 setItem (key, value)   —— 保存 ...

  6. JMX（Java Management Extension）学习

    目录 基本概念 MBean的种类 StandardMBean DynamicBean ModelMBean JMX的实现方式 StandardMBean的使用方法 JMX服务的访问方式 JMX--No ...

  7. 关于用命令行和idea对项目打jar包

    前提说一下,我们一般是对编译后的项目进行打包,不然打包后还得自己去重新编译class文件. 假如这是你的一个项目目录: 我们要写一个简单的计算器工具类项目,然后对他进行打包, idea里面out文件夹 ...

  8. LightOj 1197 Help Hanzo 区间素数筛

    题意: 给定一个区间a,b,a-b>=100000,1<=a<=b<=231,求出给定a,b区间内的素数的个数 区间素数筛 (a+i-1)/ ii向上取整,当a为 i 的整数倍 ...

  9. ThunderNet ：像闪电一样，旷视再出超轻量级检测器，高达267fps | ICCV 2019

    论文提出了实时的超轻量级two-stage detector ThunderNet,靠着精心设计的主干网络以及提高特征表达能力的CEM和SAM模块,使用很少的计算量就能超越目前的one-stage d ...

  10. 【3D】PoseCNN姿态检测网络复现过程记录

    最近在研究室内6D姿态检测相关问题,计划在PoseCNN网络基础上进行改进实现.但是在第一步的复现过程中踩了无数的坑,最终成功运行了demo,但目前数据集train还是遇到了一些问题.有问题欢迎一起交 ...