多媒体查询CSS3单词，字体引用，动画效果，scale缩放，旋转放大过渡动画【诗书画唱】
内容概括：
CSS3径向渐变.html
CSS3文字阴影效果.html
text-shadow
CSS3字体引用.html
@font-face
CSS3的2D转换位移.html
/*往右边移动100px，往下移动200px*/
transform: translate(100px,200px);
CSS3的2D转换旋转.html
CSS3的2D转换拉伸.html
scale(x,y) 对元素进行缩放
X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。
transform:scale(2,2.5);
CSS3的2D转换倾斜.html
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
CSS3的3D转换旋转.html
CSS2过渡.html START
transform: rotate(180deg);
transition: width 2s,height 2s,transform 2s;
随鼠标的悬停而发生变化的旋转放大的过渡动画
CSS3动画效果.html
CSS3跳动的心.html
CSS3多媒体查询.html
页面上画出一个扇形
单词
心形跳动效果
推荐：
【CSS】绘制一个任意角度的扇形：
https://blog.csdn.net/a5534789/article/details/80102048
多媒体查询：
https://www.runoob.com/css3/css3-mediaqueries.html
CSS3径向渐变.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a {
width: 200px;
height: 100px;
background-image: radial-gradient(circle,red 5%,green 15%,blue 60%);
}
#b {
height: 200px;
background-image: repeating-radial-gradient(red,yellow 10%,green 15%);
border-radius: 50%;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>
CSS3径向渐变.html END
CSS3文字阴影效果.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
font-size: 50px;
text-shadow: 5px 5px 1px #808080;
}
</style>
</head>
<body>
<div>Hello world</div>
</body>
</html>
CSS3文字阴影效果.html END
CSS3字体引用.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@font-face {
font-family: myFt1;/*给字体取了一个名字，方便在后面的程序中引用*/
src: url('css/f1.ttf');/*字体文件的路径*/
}
@font-face {
font-family: myFt2;
src: url('css/f2.ttf');
}
#a {
font-family: myFt1;
font-size: 50px;
font-weight: bold;
}
#b {
font-family: myFt2;
font-size: 50px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="a">临兵斗者皆阵列在前</div>
<div id="b">清澈的爱</div>
</body>
</html>
CSS3字体引用.html END
CSS3的2D转换位移.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid red;
/*往右边移动100px，往下移动200px*/
transform: translate(100px,200px);
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
CSS3的2D转换位移.html END
CSS3的2D转换旋转.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid red;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="a">Hello world</div>
</body>
</html>
CSS3的2D转换旋转.html END
CSS3的2D转换拉伸.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a {
width: 200px;
height: 200px;
transform: scale(0.5,0.6);
}
</style>
</head>
<body>
<img id="a" src="img/23.png" />
</body>
</html>
推荐文章：
https://www.cnblogs.com/sunbjj/p/6195920.html
scale(x,y) 对元素进行缩放
X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。
transform:scale(2,2.5);
CSS3的2D转换拉伸.html END
CSS3的2D转换倾斜.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid red;
transform: skew(30deg,45deg);
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
CSS3的2D转换倾斜.html END
CSS3的3D转换旋转.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid red;
transform: rotateX(180deg);
}
#b {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div id="a">ABC</div>
<div id="b">DEF</div>
</body>
</html>
CSS3的3D转换旋转.html END
CSS2过渡.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
div {
height: 100px;
width: 100px;
background-color: red;
transition: width 2s,height 2s,transform 2s;
}
</style>
</head>
<body>
<div id="a">ABC</div>
</body>
</html>
随鼠标的悬停而发生变化的旋转放大的过渡动画
CSS2过渡.html END
CSS3动画效果.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@keyframes one{
from{background-color: red;}
to{background-color: blue;}
}
@keyframes two{
0% {
background-color: red;
width: 0px;
}
25% {
background-color: yellow;
width: 100px;
}
50% {
background-color: green;
width: 200px;
}
100% {
background-color: blue;
width: 300px;
}
}
#a {
width: 200px;
height: 200px;
animation: two 5s;
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
CSS3动画效果.html END
CSS3跳动的心.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
width: 100%;
text-align: center;
}
#heart {
position: relative;
width: 300px;
height: 300px;
margin: 200px auto;
background-color: transparent;
transform: rotate(45deg);
animation: jump 2s infinite;
}
#heart div {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
#left {
border-radius: 50%;
left: 0;
bottom: 0;
}
#right {
border-radius: 50%;
top: 0;
right: 0;
}
#center {
right: 0;
bottom: 0;
}
@keyframes jump{
10%{
transform: scale(1.1) rotate(45deg);
}
20%{
transform: scale(1.2)rotate(45deg);
}
30%{
transform: scale(1.3)rotate(45deg);
}
40%{
transform: scale(1.4)rotate(45deg);
}
50%{
transform: scale(1.3)rotate(45deg);
}
60%{
transform: scale(1.2)rotate(45deg);
}
70%{
transform: scale(1.3)rotate(45deg);
}
80%{
transform: scale(1.4)rotate(45deg);
}
90%{
transform: scale(1.2)rotate(45deg);
}
}
</style>
</head>
<body>
<div id="heart">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
</html>
CSS3跳动的心.html END
CSS3多媒体查询.html START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a {
width: 200px;
height: 200px;
background-color: pink;
}
/*当屏幕的宽度大于480像素时，div的背景色就显示为蓝色*/
@media screen and (min-width: 480px) {
#a {
background-color: blue;
}
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
CSS3多媒体查询.html END
作业 START
1、页面上画出一个扇形
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.shanXing{
box-sizing: border-box; width: 100px; border: solid 50px transparent;
border-right-color: black; border-radius: 50%;
}
</style>
</head>
<body>
<div class="shanXing"></div>
</body>
</html>
2、心形跳动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
width: 100%;
text-align: center;
}
#heart {
position: relative;
width: 300px;
height: 300px;
margin: 200px auto;
background-color: transparent;
transform: rotate(45deg);
animation: jump 2s infinite;
}
#heart div {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
#left {
border-radius: 50%;
left: 0;
bottom: 0;
}
#right {
border-radius: 50%;
top: 0;
right: 0;
}
#center {
right: 0;
bottom: 0;
}
@keyframes jump{
10%{
transform: scale(1.1) rotate(45deg);
}
20%{
transform: scale(1.2)rotate(45deg);
}
30%{
transform: scale(1.3)rotate(45deg);
}
40%{
transform: scale(1.4)rotate(45deg);
}
50%{
transform: scale(1.3)rotate(45deg);
}
60%{
transform: scale(1.2)rotate(45deg);
}
70%{
transform: scale(1.3)rotate(45deg);
}
80%{
transform: scale(1.4)rotate(45deg);
}
90%{
transform: scale(1.2)rotate(45deg);
}
}
</style>
</head>
<body>
<div id="heart">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
</html>
推荐效果：
https://www.17sucai.com/pins/demo-show?id=27638
作业 END
单词 START
