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. 用docker搭建selenium grid分布式环境实践之路

    最近需要测试zoom视频会议,同时模拟100个人加入会议.经过了解,zoom提供了直接通过url链接加入会议的方式(只能通过chrome浏览器或者FireFox浏览器,因为用的协议是webrtc). ...

  2. SpringBoot启动项目之后，访问页面出现Whitelabel Error Page

    话说万事具备,只欠东风- 蹭闲暇时来跑个SpringBoot项目玩玩,把一切配置依赖准备就绪之后打算运行项目. Staring...... 接着,在浏览器输入地址 localhost:8080/hel ...

  3. 【狂神说】JAVA Mybatis 笔记+源码

    简介 自学的[狂神JAVA]MyBatis GitHub源码: https://github.com/Donkequan/Mybatis-Study 分享自写源码和笔记 配置用的 jdk13.0.2 ...

  4. Tensorboard 详解（上篇）

    花间提壶华小厨 1. Tensorboard简介 对大部分人而言,深度神经网络就像一个黑盒子,其内部的组织.结构.以及其训练过程很难理清楚,这给深度神经网络原理的理解和工程化带来了很大的挑战.为了解决 ...

  5. 在Centos7下搭建大数据环境，即Zookeeper+Hadoop+HBase

    1. 所需软件下载链接(建议直接复制链接到迅雷下载更快): ①hadoop-2.7.6.tar.gz: wget http://mirrors.tuna.tsinghua.edu.cn/apache/ ...

  6. 瀑布流vue-waterfall的高度设置

    最近用vue做项目,用到了瀑布流vue-waterfall,其中遇到高度的设置问题,大概介绍下,希望可以帮到一些人 1.安装 npm install --save vue-waterfall 2.引入 ...

  7. 20175314 实验五 Java网络编程

    20175314 实验五 Java网络编程 一.实验报告封面 课程:Java程序设计 班级:1753班 姓名:薛勐 学号:20175314 指导教师:娄嘉鹏 实验日期:2018年5月31日 实验时间: ...

  8. webpack4.x 从零开始配置vue 项目（三）

    目标 babel 转换ES6 语法 postCss 增强css功能,如自动增加前缀 vue-loader 解析vue 文件 实现基本的vue项目开发环境,打包等 Babel 由于浏览器对es6语法兼容 ...

  9. 使用Shiro+JWT完成的微信小程序的登录（含讲解）

    使用Shiro+JWT完成的微信小程序的登录 源码地址https://github.com/Jirath-Liu/shiro-jwt-wx 微信小程序用户登陆,完整流程可参考下面官方地址,本例中是按此 ...

  10. Xshell连接Centos7

    13:53:10 2019-08-05 一个月暑假开始 学习搭建一个自己的博客 我是用阿里云的服务器搭建自己的博客 先利用XShell连接我的服务器 XShell下载地址:https://www.ne ...