【Web前端系列课程（一）】HTML+CSS

老夏 · 发表于 2020-4-17 16:41:11

第十二章 CSS3样式
12.2 CSS3背景

CSS3包含多个新的背景属性，它们提供了对背景更强大的控制。
CSS3背景属性如下：

属性	属性值	描述
background-size	百分比或像素	背景图像大小
background-origin	padding-box：背景图像相对内边距来定位，默认值 border-box：背景图像相对边框来定位 content-box：背景图像相对内容来定位	背景图像位置

示例代码：实现下图页面

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
width:600px;
height:600px;
border:10px dotted #00f;
padding:20px;
background:url(logo-1.png) no-repeat;
background-origin:content-box;
}
</style>
</head>
<body>
<div id="d1">
linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good linux is very good
</div>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-17 16:46:59

第十二章 CSS3样式
12.3 CSS3文本效果

CSS3包含多个新的文本特性，如下：

属性	属性值	描述
text-shadow	h-shadow：水平阴影的位置，允许负值，必填值 v-shadow：垂直阴影的位置，允许负值，必填值 blur：模糊的距离，可选值 color：阴影的颜色，可选值	文本阴影，书写格式：text-shadow: 5px 5px 5px #000;

老夏 · 发表于 2020-4-17 16:48:41

第十二章 CSS3样式
12.4 CSS3字体

      在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体。但是通过CSS3，web设计师就可以使用他们喜欢的任意字体。
      当找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。
      您"自己的"的字体是在CSS3 @font-face规则中定义的，具体使用规则如下：

@font-face
{
font-family: xzd;
src: url(xzd.otf);
font-weight:bold;
}
div{
font-family:xzd;
}

复制代码

老夏 · 发表于 2020-4-17 16:53:19

第十二章 CSS3样式
12.5 CSS3转换

通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
CSS3转换属性如下：

属性	属性值	描述
transform	translate(20px,20px)：移动坐标 translateX(20px)：延x轴移动坐标 translateY(20px)：延y轴移动坐标 rotate(20deg)：旋转角度 scale(2,3)：改变元素的宽和高，即放大 translate3d(20px,20px,20px)：移动坐标 translateZ(20px)：延Z轴移动坐标 rotate3d(20px,20px,20px,20deg)：3D旋转角度 scale3d(2,3,4)：3D改变元素，即放大	2D/3D样式转换

老夏 · 发表于 2020-4-17 21:48:05

第十二章 CSS3样式
12.6 CSS3过渡

通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3过渡属性如下：

属性	属性值	描述
transition	属性和时间	过渡

注意，CSS3过渡是元素从一种样式逐渐改变为另一种的效果，要实现这一点，必须规定两项内容：一是规定希望把效果添加到哪个CSS属性上以及规定效果的时长，二是要给这个属性一个特效，这时过渡才能生效。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background:#00f;
opacity:0.3;
transition:opacity 2s;
}
div:hover{
opacity:1;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-17 21:59:15

第十二章 CSS3样式
12.7 CSS3动画

通过CSS3，我们能够创建动画，这可以在许多网页中取代动画图片Flash动画以及JavaScript。
CSS3动画属性如下：

属性	属性值	描述
animation	自定义和时间	动画

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
background:#f00;
position:absolute;
animation:changeColor 5s;
}
@keyframes changeColor{
from{background:red;}
to{background:blue;}
}
@keyframes myfirst{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

【Web前端系列课程（一）】HTML+CSS

院长

资深讲师