目录
一、CSS基本语法
二、CSS引入方式
行内样式
<!-- 行内样式 style="" -->
<div style="color: green; border: 1px solid red;"> CSS行内样式的引入!!! </div>内联样式
<head>
<!--使用style标签写在head标签内-->
<style>
/*元素选择器*/
div {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div> CSS行内样式的引入 ！！！</div>
</body>外联样式
asd.css
div {
color: red;
font-size: 18px;
}目录结构
外联样式引入方式有两种：
link引入
<link rel="stylesheet" href="css/asd.css">@import引入
<style>
@import url(css/asd.css);
</style>样式的优先级
就近原则： 行内样式 > 内联样式 == 外联样式 (后面覆盖前面)
三、CSS选择器
基本选择器分三种：标签选择器、类选择器、id选择器。
标签选择器
语法：标签名{}
例如：div{color:red;font-size:20px;}
类选择器
类选择器是通过class属性进行元素的获取，可用于对多个元素进行相同的样式设置。
语法：.类名{}
例如：.div-cls{color:red;}
id选择器
id选择器是通过id属性给元素一个唯一标识（设置多个id相同不会报错，会影响后期js的学习，建议id值要唯一）。
语法：#id名{}
例如：#div-id{color:red;}
属性选择器
属性选择器是根据元素上已有的属性标识进行选择
语法：[属性名='']{}
<html>
<head>
<style>
/* 具有title属性的元素 */
[title]{
font-size: 18px;
color: red;
}
/* 以http开头的元素 */
[href^="http"]{
color: #008B8B;
}
/* 以...结束 */
[href$="cn"]{
color: #483D8B;
}
/*href中包含有i*/
[href*='i']{
color: #808080;
}
</style>
</head>
<body>
<button title="普通按钮">普通按钮</button>
<a href="http://www.baidu.com">百度链接</a>
<a href="www.sina.cn">新浪博客</a>
</body>
</html>层级选择器
<html>
<head>
</head>
<style>
/* 祖宗后代，所有的后代 */
div span{
font-size: 18px;
color:red;
}
/* 父子选择器，仅一层后代 */
div p{
color: blue;
}
/* 兄弟选择器 */
div~p{
color: pink;
}
/* 跟班选择器 */
p+span{
background-color: deeppink;
}
</style>
<body>
<div>
<p>哈哈哈</p>
<a href="#">
<span>
点我点我！
</span>
</a>
</div>
<p>我是div的兄弟</p>
<p>
<span>我是p标签中的span标签</span>
</p>
<span>跟班选择器</span>
</body>
</html>组合选择器
组合选择器是根据元素在页面中的同级关系进行选择。
<html>
<head>
<meta charset="utf-8">
<style>
div span,p span {
color: green;
}
p span,h4 span{
color: yellow;
}
</style>
</head>
<body>
<div>
div中的不带标签的内容
<span>组合选择器，注意很常用</span>
</div>
<p>
<span>p标签中的span标签</span>
</p>
<h4>
<span>h4标签中的span标签</span>
</h4>
</body>
</html>伪类选择器
伪类选择器是用于快速查找元素的，开发中常用 nth-of-type 选择器。
<html>
<head>
<style>
//第一个
p:nth-of-type(1) {
color: red;
}
//奇数项
p span:nth-of-type(2n+1) {
background-color: aqua;
}
//偶数项
p span:nth-of-type(2n) {
background-color: blue;
}
/* 默认被点击的状态 */
a:link {
color: red;
}
/* 访问之后的状态 */
a:visited {
color: yellow;
}
/* 处在活动状态 */
a:active {
color: brown;
}
/* 鼠标悬浮状态 */
a:hover {
color: blueviolet;
}
</style>
</head>
<body>
<p>
<span>百度新闻</span>
<span>新浪官网</span>
<span>腾讯官网</span>
</p>
<a href="#">百度一下</a>
</body>
</html>伪元素选择器
before 和 after 必须有 content 属性，
before 在内容前面，after 在内容后面，
before 和 after 创建的是一个元素，但是属于行内元素，
创建出来的元素在 Dom 中查找不到，所以称为伪元素，
伪元素和标签选择器一样，权重为 1，
应用：添加字体图标
p {
width: 220px;
height: 22px;
border: 1px solid lightseagreen;
margin: 60px;
position: relative;
}
p::after {
content: '\ea50';
font-family: 'icomoon';
position: absolute;
top: -1px;
right: 10px;
}
选择器优先级
标签选择器的优先级大小如下所示
!important>行内样式>id选择器>类选择器>标签选择器
无穷大 1000 100 10 1
四、CSS盒子模型
指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
边框颜色 border-color
<html>
<head>
<style>
#box {
width: 400px;
height: 400px;
border: 1px solid red;
background-color: antiquewhite;
/*上下 左右*/
border-color: red blue;
/*red上 blue左右 blueviolet下*/
border-color: red blue blueviolet;
/*上右下左*/
/* border-color: red blue pink lawngreen; */
/*border-top-color: yellow;
border-left-color: orange;
border-bottom-color: green;
border-right-color: red;*/
}
</style>
</head>
<body>
<div id="box">我是盒子！</div>
</body>
</html>边框粗细 border-width
整体粗细：
border-width:20px; 整体边框
指定方位调整粗细：
border-top-width 上
border-left-width 左
border-right-width 右
border-bottom-width 下
<html>
<head>
<style>
.box{
width: 300px;
height: 300px;
background-color: aqua;
border: solid;
border-color: red;
/*
border-width:20px;
*/
border-top-width: 10px;
border-left-width: 20px;
border-right-width: 30px;
border-bottom-width: 40px;
}
</style>
</head>
<body>
<div class="box">hello world！</div>
</body>
</html>边框样式 border-style
<html>
<head>
<style>
.box{
width: 300px;
height: 300px;
background-color: #D7D7D7;
border-left-style:solid;//边框样式为实线
border-top-style: dashed;/*边框样式为虚线*/
border-bottom-style: double;/*边框样式为双线*/
border-bottom-style: solid;/*边框样式为实线*/
}
</style>
</head>
<body>
<div class="box">hello world！</div>
</body>
</html>边框的简写
<head>
<style>
.box{
width: 251px;
height: 251px;
background-color: #E8E8E8;
border:1px solid #3a6587
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>外边设置 margin
margin可以设置块元素的水平对齐方式
div{
margin:0 auto;//块元素在水平方向居中
}<html>
<head>
<style>
*{
margin: 0px;
}
.box{
width: 250px;
height: 250px;
background-color: #E8E8E8;
border:1px solid #3a6587;
margin-top: 30px;
margin-left:60px ;
/*margin: 0px auto;居中*/
}
#h2id{
margin-top: 20px;
margin-left: 500px;
}
</style>
</head>
<body>
<h2 id="h2id">水果列表</h2>
<div class="box">你好！苹果</div>
</body>
</html>内边设置 padding
padding-left调用文本与左边间距
padding-top调用文本与上边间距
padding-bottom调用文本与底部间距
padding-right调用文本与右边间距
.input{
font-size:16px;
background-color:#3a6587;
height:35px;
line-height:35px;
color:#FFF;
padding-left: 110px;
padding-top:10px ; /* 让标题左边留点空隙*/
}显示模式 display属性
块级元素 特点： 1、独占一整行 2、给宽和高是起作用的
h1-h6 div p ul li ol dl dt dd
行内(内联)元素 特点：
1、不会独占一整行，多个行内元素可以并排
2、给宽和高不起作用的。本身宽高靠内容撑开
span strong b u i em ins del
行内块元素 特点：
1、可以并排
2、给宽和高是起作用的
img input
| 属性名 | 描述 |
|---|---|
| display:none; | 隐藏元素 |
| display:block; | 将元素变为块元素 |
| display:inline; | 将元素变为行元素 |
| display:inline-block; | 将元素变为行内块元素 |
img{
width: 200px;
}
ul li{
display: inline-block; /*转为行内块元素*/
list-style: none; /*消除列表前面的小圆圈*/
margin-left: 120px;
}
ul li:hover img{
border: 2px solid yellow;
}五、浮动
文档流（元素默认从上往下布局的方式就叫文档流），浮动是改变元素在文档流中的规则，让元素可以在水平方向上进行排版。
float:left或者right
清除浮动
<html>
<head>
<style>
.wrapper{
width: 260px;
height: 260px;
background-color: pink;
}
.content{
float: left;/* 会按照从左向右浮动 */
border: 1px solid #ccc;
width: 50px;
height: 50px;
background-color: wheat;
}
#id8,#id9{
/*清除浮动，因为content浮动后面的div都会根着浮动，清楚 id8,id9不能左浮动（默认是从上往下显示）*/
clear: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div id="id8" class="content">8</div>
<div id="id9" class="content">9</div>
</div>
</body>
</html>解决浮动塌陷问题
<html>
<head>
<style>
#box1{
width: 400px;
background-color: aquamarine;
/* 方案一 设置固定高度*/
/* height: 400px; */
/* 方案二 使用overflow属性 */
/* overflow: hidden; */
}
#box2{
float: left;
background-color: pink;
}
.divclass{
/* 方案三 在浮动的下面清除浮动 */
clear: both;
}
</style>
</head>
<body>
<div id="box1">
<div>
黄河之水天上来，奔流到海不复回
黄河之水天上来，奔流到海不复回
黄河之水天上来，奔流到海不复回
黄河之水天上来，奔流到海不复回
黄河之水天上来，奔流到海不复回
</div>
<div id="box2" style="width: 200px;height: 200px;"></div>
<div class="divclass"></div>
</div>
</body>
</html>五、弹性布局 flex
弹性布局是比浮动更先进的方案，浮动是过时的技术。
通过设置父元素的 display 属性为 flex，使其成为一个 flex 容器，容器中的子元素可以沿着主轴（默认为水平方向）或交叉轴（默认为垂直方向）排列，还可以调整它们在容器中的对齐方式和顺序。
flex容器：
CSS 中提供了以下属性来实现 Flex 布局：
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素的盒子类型 |
| flex-direction | 指定弹性盒子中子元素的排列方式 |
| flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 |
| flex-flow | flex-direction 和 flex-wrap 两个属性的简写 |
| justify-content | 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式 |
| align-items | 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐 |
| order | 设置弹性盒子中子元素的排列顺序 |
| align-self | 在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性 |
| flex | 设置弹性盒子中子元素如何分配空间 |
| flex-grow | 设置弹性盒子的扩展比率 |
| flex-shrink | 设置弹性盒子的收缩比率 |
| flex-basis | 设置弹性盒子伸缩基准值 |
flex 布局的示例：
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
<style>
.container {
display: flex; /* 设置容器为 flex 布局 */
justify-content: space-between; /* 沿主轴方向均匀分布子元素 */
align-items: center; /* 沿交叉轴方向居中对齐子元素 */
height: 200px;
}
.box {
flex: 1; /* 子元素的 flex 属性为 1，表示它们平均分配剩余空间 */
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: yellow;
}
.box3 {
background-color: blue;
}
</style>六、定位
浮动更多的用于整体排版，对于精确到像素值的页面调整需要使用定位。
注意：如果父级相对定位、子级绝对定位，则子级是相对于父级的决定定位。
| 属性名 | 描述 |
|---|---|
| position:relative; | 相对定位（相对默认位置进行定位，不脱离文档流，仍占据页面位置） |
| position:absolute; | 绝对定位（相对第一个带有定位属性的父元素进行定位，默认是浏览器） |
| position:fixed; | 相对浏览器进行固定定位 |
相对、 绝对定位
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 100px;
height: 100px;
background-color: black;
opacity: 0.5; /*透明度*/
/*绝对定位 不会保留原来的位*/
position: absolute;
left: 150px;
top: 150px;
/*绝对定位：会脱离原来的层，box1这一层被腾空了，别的层就可以上去了，只是不同的层而已，每个absolute都是一层，可以自由动*/
/*相对定位 会保留原来的位置*/
/*position: relative;
left: 150px;
top: 150px;*/
}
.box2{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>固定定位
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divid{
width: 150px;
height: 30px;
background-color: #ff4200;
border-radius:32px ;
text-align: center;
line-height: 31px;
color: white;
position: fixed;/* 固定定位*/
top: 220px;
right: 10px;
}
</style>
</head>
<body>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
<div class="divid">固定定位</div>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
<p>内容内容......................</p>
</body>
</html>堆叠顺序
元素在进行定位时，会出现位置相同的情况，可以通过设置其堆叠顺序决定显示的优先级。
z-index 越大越靠前
<html>
<haad>
<style>
img{
position: absolute;
left: 0px;
top: 0px;
z-index: -1; /* 图片就在文字下方*/
}
p{
color: #E8E8E8;
}
</style>
</head>
<body>
<img src="xxx.jpg" width="200px" />
<P>This is some text. This is some text. This is some text.</P>
<P>This is some text. This is some text. This is some text.</P>
<P>This is some text. This is some text. This is some text.</P>
<P>This is some text. This is some text. This is some text.</P>
</body>
</html>七、常用效果（圆角、透明、阴影）
圆角效果
控制盒子的四个角的弧度，border-radius，控制四个角的弧度，当弧度值大于或等于元素宽高的一半时，元素会变成一个圆。border-radius的值可以是百分比或者px像素。
<html>
<head>
<style>
#big{
position: relative;
margin: 200px auto;
width: 300px;
height: 300px;
background-color: black;
border-radius: 50%;
}
#min{
position: absolute;
width: 250px;
height: 250px;
margin: 25px;
background-color: white;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="big">
<div id="min"></div>
</div>
</body>
</html>透明效果
背景透明
背景透明只针对背景颜色进行透明。background-color:rgba(x,x,x,x) 透明度在0~1之间
div{
width: 200px;
height: 200px;
background-color:rgba(255,0,0,0.5); /*红*/
background-color:rgba(0,255,0,0.5); /*绿*/
background-color:rgba(0,0,255,0.5); /*蓝*/
background-color: rgba(255, 255, 255, 0); /*完全透明的白色*/
background-color: rgba(0, 0, 0, 1); /*完全不透明度的黑色*/
}整体透明
整个元素，包括该元素的所有子元素，进行透明。opacity 透明度 取值范围 0~1
<head>
<style>
div{
width:100px;
height:35px;
background-color: #B8B8B8;
color: white;
line-height: 35px;
text-align: center;
border-radius: 10px;
opacity: 0.2;
}
</style>
</head>
<body>
<div>百度一下</div>
</body>盒子阴影 box-shadow
<head>
<style>
div{
width: 200px;
height: 200px;
margin: 50px auto;
box-shadow: 3px 3px 9px 100px gray ;
/*
参数一 X轴偏移量
参数二 Y轴偏移量
参数三 阴影模糊程度
参数四 阴影扩展半径
参数五 阴影颜色
参数六 inset内阴影
*/
}
</style>
</head>
<body>
<div></div>
</body>文本阴影 text-shadow
<head>
<style>
p{
text-align: center;
text-shadow: 3px 3px 9px grey;
}
</style>
</head>
<body>
<p>君不见，黄河之水天上来</p>
</body>八、响应式效果
自适应方式两种：响应式、弹性盒子；基本上所有用于前端页面开发的流行框架中都封装了响应式或弹性盒子的操作。
手机屏幕的适应
H5的出现可以让PC端的应用直接在手机端进行等比例使用，需要设置其视图模式。
<meta name="viewport" content="width=device-width, initial-scale=1">页面自适应
对网页中的元素的大小，根据电脑屏幕的大小进行动态设置，从而达到一种响应式的效果。
<html>
<head>
<!-- width = device-width：宽度等于当前设备的宽度
initial-sacle=1：初始的缩放比例为1(默认是1)
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
/* 设置初始样式 */
*{
margin: 0px;
padding: 0px;
}
.heading,.container,.footing{
margin: 10px auto;
}
.heading{
height: 100px;
background-color: cadetblue;
}
.left,.right,.main{
background-color: green;
}
.footing{
height: 100px;
background-color: orange;
}
/* 设置宽度大于960px的页面布局 */
@media screen and (min-width: 960px){
.heading,.container,.footing{
width:960px;
}
.left,.main,.right{
float: left;
height: 500px;
}
.left,.right{
width: 200px;
}
.main{
margin-left: 5px;
margin-right: 5px;
width: 550px;
}
.container{
height: 500px;
}
}
/* 设置处于600px-900px之间的页面布局 */
@media screen and (min-width: 600px) and (max-width:960px){
.heading,.container,.footing{
width: 600px;
}
.left,.main{
float: left;
height: 400px;
}
.right{
display: none;
}
.left{
width: 160px;
}
.main{
width: 435px;
margin-left: 5px;
}
.container{
height: 400px;
}
}
/* 设置小于600px的页面布局 */
@media screen and (max-width: 600px) {
.heading,.container.footing{
width: 400px;
}
.left,.right{
width: 400px;
height: 100px;
}
.main{
margin-top: 10px;
width: 400px;
height: 200px;
}
.right{
margin-top: 10px;
}
.container{
height: 400px;
}
</style>
</head>
<body>
<div class="heading"></div>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footing"></div>
</body>
</html>九、CSS3 过渡（transition）
过渡动画：是从一个状态渐渐的过渡到另外一个状态。底层原理应该是动画和状态机来实现的（经验猜测）。常用效果：变换底色 图片移动 阴影效果 等。
transition:要过渡的属性 花费时间 运动曲线 何时开始
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。属性就是你想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。 | 3 |
| transition-duration | 定义过渡效果花费的时间(必须写单位)。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始，可以设置 延迟触发时间。默认是 0，鼠标触发就立即开始。 | 3 |
例子：
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面
过渡写到本身上，谁做动画，给谁加*/
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
}
div:hover { /* 鼠标经过盒子，我们的宽度变为400 */
width: 600px;
height: 300px
}
transition: all 0.6s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
十、CSS3 2D转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
转换（transform）可以简单理解为变形
- 移动：translate
- 旋转：rotate
- 缩放：scale
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角形</title>
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
例子：分页按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页按钮Demo</title>
<style>
li {
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
margin-left: 10px;
margin-top: 20px;
border-radius: 50%;
list-style: none;
border: 1px solid green;
cursor: pointer;
transition: all .4s;
}
li:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
十一、CSS3 动画
动画（animation）可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。动画实际上就是多次过渡。
制作动画分为两步：定义keyframes 和 调用动画
1.定义keyframe
@keyframes 动画名称 {
0%{
width: 100px;
}
100%{
width: 200px;
}
}
2.调用动画
div{
width: 200px;
height: 200px;
background-color: green;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
3.动画常用属性
十二、CSS3 3D转换
1.三维坐标系
注意：z轴垂直屏幕，往外面是正值。
2. 3D移动 translate3d
- transform: translateX(100px)：X轴上移动
- transform: translateY(100px)：Y轴上移动
- transform: translateZ(100px)：Z轴上移动（translateZ一般用px单位，如果要透视效果一般在父盒子上添加）
- transform: translate3d(x,y,z)：xyz轴上移动（x、y、z没有不可省略或写0）
3. 透视perspective（一般给父盒子添加）
图形学的概念，可以用远处3d物体到眼睛上的投影来理解、想象效果。
4. translateZ（一般给里面的盒子添加）
transform: translateZ(100px)：仅仅是在Z轴上移动，有了透视，就能看到translateZ引起的变化了。
5. 3D旋转rotate3d
- transform: rotateX(45deg)：沿着x轴正方向旋转45度
- transform: rotateY(45deg)：沿着y轴正方向旋转45度
- transform: rorateZ(45deg)：沿着z轴正方向旋转45deg
- transform: rotate3d(x, y, z, deg)：沿着自定义轴旋转，deg为角度（了解）沿x轴旋转：单杠
6. 3D呈现transform-style
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：
transform-style: preserve-3d; /* 让 子盒子 位于三维空间里 */
transform-style: flat; /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */
例子： transform-style: preserve-3d;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 300px;
height: 300px;
border: 2px dashed red;
margin: 100px auto;
position: relative;
border-radius: 50%;
transform-style: preserve-3d;
animation: gun 8s linear infinite;
}
.box>div{
width:100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 300px;
font-size: 60px;
}
.left{
background-color: rgba(255,0,0,0.3);
transform-origin:left ;
transform: rotateY(90deg) translateX(-150px);
}
.right {
background: rgba(0, 0, 255, 0.3);
transform-origin: right;
/* 变换*/
transform: rotateY(90deg) translateX(150px);
}
.forword {
background: rgba(255, 255, 0, 0.3);
transform: translateZ(150px);
}
.back {
background: rgba(0, 255, 255, 0.3);
transform: translateZ(-150px);
}
.up {
background: rgba(255, 0, 255, 0.3);
transform: rotateX(90deg) translateZ(150px);
}
.down {
background: rgba(99, 66, 33, 0.3);
transform: rotateX(-90deg) translateZ(150px);
}
@keyframes gun {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="up">上</div>
<div class="down">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="forword">前</div>
<div class="back">后</div>
</div>
</body>
</html>
849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
