H5C3
课程目标
-
掌握css3选择器使用
-
掌握css3颜色的使用
-
掌握css3阴影的使用
-
掌握css3更新盒模型
-
掌握css3渐变的使用
-
掌握css3背景尺寸设置
-
掌握css3过渡的使用
-
掌握css3转换的使用
-
掌握css3动画的使用
课程内容
选择器
属性选择器
-
E[attr=value]
选中E元素中属性有attr的且属性值为value的元素 -
E[attr^=value]
选中E元素中属性有attr的且属性值以value开头的元素 -
E[attr$=value]
选中E元素中属性有attr的且属性值以value结尾的元素 -
E[attr*=value]
选中E元素中属性有attr的且属性值包含value的元素
伪类序号选择器
-
E:first-child
选中E元素的父元素下所有的子元素的第一个元素,如果类型为E选中否则无效 -
E:last-child
选中E元素的父元素下所有的子元素的最后一个元素,如果类型为E选中否则无效 -
E:nth-child(n)
选中E元素的父元素下所有的子元素的第n个元素,如果类型为E选中否则无效 -
E:nth-last-child(n)
选中E元素的父元素下所有的子元素的倒数第n个元素,如果类型为E选中否则无效
伪元素选择器
-
E::before
选中E元素的内容前伪元素 -
E::after
选中E元素的内容前伪元素
颜色
rgba
-
rgba(R,G,B,A)
-
R:红色值。
G:绿色值。
B:蓝色值。
A:Alpha透明度。取值0~1之间。
阴影
text-shadow
-
text-shadow: h-shadow v-shadow blur color;
-
h-shadow:阴影横向偏移
-
v-shadow:阴影纵向偏移
-
blur:阴影模糊度
-
color:阴影颜色
box-shadow
-
box-shadow: h-shadow v-shadow blur spread color inset;
-
h-shadow:阴影横向偏移
-
v-shadow:阴影纵向偏移
-
blur:阴影模糊度
-
spread:阴影的延伸
-
color:阴影颜色
-
inset:内阴影
盒模型
box-sizing
-
box-sizing: content-box|border-box|inherit;
-
content-box:从内容开始计算宽度
-
border-box:从边框开始计算宽度
-
inherit:继承
渐变
linear-gradient
-
background-image:linear-gradient(direction,startColor,endColor)
-
direction:渐变方向
to right|left|top|bottom
可以使用角度deg
-
startColor:渐变开始颜色
-
endColor:渐变结束颜色
radial-gradient
-
background-image:radial-gradient(radius at position,startColor,endColor)
-
radius:半径
-
position:放射原点定位
-
startColor:渐变开始颜色
-
endColor:渐变结束颜色
背景尺寸
background-size
-
background-size: length|percentage|cover|contain;
-
length:宽度 高度 单位
px
-
percentage:宽度 高度 单位
%
-
cover:等比缩放背景完全铺满容器,多余被裁剪
-
contain: 等比缩放背景完全显示在容器内容,可能铺不满
过渡
transition
-
transition
需要过渡的属性 过渡时间 过渡的动画速度函数 过渡的延时时间 -
transition-property
需要过渡的属性 -
transition-duration
过渡时间单位秒 -
transition-timing-function
过渡的动画速度函数 如:ease
linear
-
transition-delay
过渡的延时时间单位秒
转换
transform
-
transform
转换属性 属性值为不同的转换形式 -
scale
缩放 -
translate
位移 -
rotate
旋转 -
skew
倾斜 -
transform-origin
转换中心
动画
animation
-
animation
动画属性 -
animation-name
动画序列名称 -
animation-duration
动画时长 -
animation-timing-function
动画速度函数 -
animation-delay
动画延时 -
animation-iteration-count
动画执行次数 无数次infinite
-
animation-direction
动画播放方向 默认normal
逆播放alternate
-
animation-play-state
动画的播放状态 默认running
暂停paused
-
animation-fill-mode
动画结束状态 默认backwards
保持forwards
扩展内容
3d转换
3d转换属性
-
translateX
x轴方向的位移 -
translateY
y轴方向的位移 -
translateZ
z轴方向的位移 -
rotateX
绕x轴旋转 -
rotateY
绕y轴旋转 -
rotateZ
绕z轴旋转
透视
-
透视
perspective:200px
-
在2d平面产生近大远小视觉立体,但是只是效果二维的
-
原理:
-
a. 模拟人类的视觉位置,可认为安排一只眼睛去看 b. 距离电脑平面的距离为视距 c. 距离视觉点越近的在电脑平面成像越大,越远成像越远
-
特点:只是显示3d图像的近大远小效果,无法呈现3d的三维成像的特点,如遮挡
-
使用场景:只是辅助性的帮助开发者检查3d效果
3d呈现
-
3d呈现
transform-style:preserve-3d
-
在2d平面产生近大远小视觉立体,但是只是效果二维的
-
原理:
-
a. 第一张图是没有使用3d呈现的 无3d效果b. 第二张图是使用了3d呈现的 出现遮挡三维立体效果
-
特点:真正意义的3d呈现,三维立体,有遮挡
-
使用场景:在3d立体图形的构建使用
案例3d切割轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 560px;
height: 300px;
margin: 100px auto;
border: 1px solid #ccc;
position: relative;
}
.box ul {
position: absolute;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.box ul li {
width: 112px;
height: 300px;
float: left;
position: relative;
/*3D呈现*/
transform-style: preserve-3d;
/*加过渡*/
transition: all 1s;
}
/*1. 拼背景*/
.box ul li span {
background: url("images/1.jpg") no-repeat;
}
.box ul li:nth-child(2) span {
background-position: -112px 0;
}
.box ul li:nth-child(3) span {
background-position: -224px 0;
}
.box ul li:nth-child(4) span {
background-position: -336px 0;
}
.box ul li:nth-child(5) span {
background-position: -448px 0;
}
.box ul li span:nth-child(1) {
transform: translateZ(150px);
}
.box ul li span:nth-child(2) {
background-image: url("images/2.jpg");
transform: rotateX(90deg) translateZ(150px);
}
.box ul li span:nth-child(3) {
background-image: url("images/3.jpg");
transform: rotateX(180deg) translateZ(150px);
}
.box ul li span:nth-child(4) {
background-image: url("images/4.jpg");
transform: rotateX(270deg) translateZ(150px);
}
/*2. 拼立体容器*/
.box ul li span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.box a {
width: 40px;
height: 60px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 120px;
text-decoration: none;
line-height: 60px;
text-align: center;
color: #fff;
font-size: 20px;
}
.box .prev {
left: 0;
}
.box .next {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
<a class="prev" href="javascript:;"><</a>
<a class="next" href="javascript:;">></a>
</div>
<!--
归类:称为 实体
> <
-->
<script src="js/jquery.min.js"></script>
<script>
/*需求:*/
/*1. 点击上一张切换当上一张图片*/
/*2. 点击下一张切换当下一张图片*/
$(function () {
/*节流阀 */
var flag = true;
/*轮播图的核心 索引*/
var index = 0;
$('.prev').on('click', function () {
if(!flag) return;
flag = false;
index--;
/*旋转的角度 = - 索引 * 90deg */
$('li').css('transform', 'rotateX(' + (-index * 90) + 'deg)').each(function (i, item) {
/*设置不同的过渡延时时间 0 0.25 0.5 ... */
$(this).css('transition-delay', i * 0.25 + 's');
});
console.log(index);
});
$('.next').on('click', function () {
if(!flag) return;
flag = false;
index++;
/*旋转的角度 = - 索引 * 90deg */
$('li').css('transform', 'rotateX(' + (-index * 90) + 'deg)').each(function (i, item) {
/*设置不同的过渡延时时间 0 0.25 0.5 ... */
$(this).css('transition-delay', i * 0.25 + 's');
});
console.log(index);
});
/*点击按钮的时候 锁上*/
/*最后一个LI过渡完成 开锁*/
/*知识点:怎么去监听过渡执行完成 transitionend */
/*有5个LI元素都会执行过渡 监听最后一个LI的过渡结束 */
$('li:last-child').on('transitionend',function () {
flag = true;
});
});
</script>
</body>
</html>
"我是Spirit_Breeze,中文<晟世清风>,在这纷纷乱世之中,祈望能有一股清流之风."本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究,欢迎研究讨论,转载请备注地址和作者,谢谢