//----------------------------------
background: url("CSS3%20DAY%2003/images/baby0.jpg") no-repeat;
/*cover:不改变图片的比例,完全放大填充,溢出隐藏*/
/*background-size: cover;*/
/*contain:不改变图片的比例,放大到一边达到100%,另一个方向不管*/
/*background-size: contain ;*/
/*100% 100%:改变图片的比例,双边都放大到100%*/
background-size: 100% 100%;
//---------------------------------
/*背景原点:控制背景图从哪儿开始显示*/
/*默认值,padding也有背景图*/
/*background-origin: padding-box;*/
/*边框开始有背景图*/
/*background-origin: border-box;*/
/*只有内容区域有背景图*/
background-origin: content-box;
//----------------------------------
/*背景裁切,不改变背景的位置*/
background-clip: content-box;
/*三个参数:padding-box,border-box,content-box*/
//----------------------------------
//linear-gradient()
.s{
/*标准写法*/
/*linear-gradient表示线性渐变的意思*/
/*括号里面两个参数,表示从黄色渐变到绿色*/
background-image: linear-gradient(yellow,green);
}
/*多颜色线性渐变*/
.s1{
background-image: linear-gradient(red,orange,yellow,green,cyan);
}
/*渐变方向,默认都是从上往下,我们可以通过设置,来更改渐变的方向*/
/*用角度确定方向*/
.s2{
background-image: linear-gradient(270deg,yellow,green);
}
/*用关键字确定方向*/
.s3{
background-image: linear-gradient(to left top,yellow,green);
}
/*在渐变里面,可以通过百分比,控制渐变的起点*/
/*下面这个,就是黄色从20%地方开始渐变,绿色从40%的地方开始渐变,
如果百分比不到100%,那么,缺少的用纯颜色填充*/
.s4{
background-image: linear-gradient(90deg,yellow 20%,green 40%);
}
.s5{
background-image: linear-gradient(90deg,yellow 40%,green 40%,green 50%,blue 50%);
}
<!--控制得当有点像进度条-->
//--------------------------------
//repeating-linear-gradient():重复线性渐变,语法与线性渐变一样
//---------------------------------
//radial-gradient()
.s{
background-image: radial-gradient(yellow,green);
/*基本写法*/
}
/*标准写法:三要素:1辐射范围2中心点3颜色起止*/
.s1{
/*120px表示辐射范围(半径),at后面跟的属性表示中心点*/
background-image: radial-gradient(200px at 0 center,yellow,green);
}
//-------------------------------------------
//repeating-radial-gradient():重复径向渐变,语法与径向渐变一样
<!------------------------------------>
<!--简写:transition:property duration timing-function times-->
<!--<' transition-property '>: 检索或设置对象中的参与过渡的属性 -->
<!--<' transition-duration '>: 检索或设置对象过渡的持续时间 -->
<!--<' transition-timing-function '>: 检索或设置对象中过渡的动画类型 -->
<!--<' transition-delay '>: 检索或设置对象延迟过渡的时间 -->
<!--多个属性-->
<!--缩写方式-->
transition: border-color .5s ease-in .1s,
background-color .5s ease-in .1s,
color .5s ease-in .1s;
<!--拆分方式-->
transition-property: border-color, background-color, color;
transition-duration: .5s, .5s, .5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: .1s, .1s, .1s;
<!--所有属性-->
transition:all 2s linear 1s;
//-------------------------------
transform:
2D Transform Functions:
matrix(): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
translatex(): 指定对象X轴(水平方向)的平移
translatey(): 指定对象Y轴(垂直方向)的平移
rotate(): 指定对象的2D rotation(2D旋转),需先有 <' transform-origin '> 属性的定义
scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scalex(): 指定对象X轴的(水平方向)缩放
scaley(): 指定对象Y轴的(垂直方向)缩放
skew(): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
skewx(): 指定对象X轴的(水平方向)扭曲
skewy(): 指定对象Y轴的(垂直方向)扭曲
3D Transform Functions:
matrix3d(): 以一个4x4矩阵的形式指定一个3D变换
translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
translatez(): 指定对象Z轴的平移
rotate3d(): 指定对象的3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度,参数不允许省略
rotatex(): 指定对象在x轴上的旋转角度
rotatey(): 指定对象在y轴上的旋转角度
rotatez(): 指定对象在z轴上的旋转角度
scale3d(): 指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
scalez(): 指定对象的z轴缩放
perspective(): 指定透视距离
//--------------------------------
transform-origin:设置或检索对象以某个原点进行转换,
该属性提供2个参数值。
如果提供两个,第一个用于横坐标,第二个用于纵坐标。
如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。
对应的脚本特性为transformOrigin。
//--------------------------------
perspective:透视,在电脑上相当于到屏幕的距离
//-----------------------------
transfrom-style:flat: 指定子元素位于此元素所在平面内
preserve-3d: 指定子元素定位在三维空间内
指定某元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化。
/*1.当该属性值为「preserve-3d」时,元素将会创建局部堆叠上下文。
2.决定一个变换元素看起来是处在三维空间还是平面内,需要该元素的父元素上定义
3.<' transform-style '> 属性。 对应的脚本特性为transformStyle。 */
5.六壬神骰
//样式
<style>
.box{
width: 600px;
height: 600px;
margin: 100px auto;
/*border: 1px solid #eee;*/
font-size: 40px;
color: white;
text-align: center;
line-height: 160px;
transform-style: preserve-3d;
perspective: 3000px;
position: relative;
transition: all 2s;
transform: rotateY(45deg) rotateX(45deg);
}
.box:hover{
transform: rotateY(360deg) rotateX(360deg);
}
.box>div{
width: 160px;
height: 160px;
position: absolute;
left: 50%;
top:50%;
margin-left: -80px;
margin-top: -80px;
}
.one{
background: rgba(186,175,12,0.6);
transform: translateZ(80px);
}
.two{
background: rgba(12,210,56,0.6);
transform: translateX(-80px) rotateY(90deg);
}
.three{
background: rgba(182,42,156,0.6);
transform: translateY(-80px) rotateX(90deg);
}
.four{
background: rgba(12,210,56,0.6);
transform: translateX(80px) rotateY(-90deg);
}
.five{
background: rgba(182,42,156,0.6);
transform: translateY(80px) rotateX(-90deg);
}
.six{
background: rgba(12,175,186,0.6);
transform: translateZ(-80px);
}
</style>
//结构
<div class="box">
<div class="one">洗碗</div>
<div class="two">拖地</div>
<div class="three">做饭</div>
<div class="four">看电视</div>
<div class="five">买菜</div>
<div class="six">奖品</div>
</div>