多媒體查詢CSS3單詞，字體引用，動畫效果，scale縮放，旋轉(zhuǎn)放大過渡動畫【詩書畫唱】
內(nèi)容概括：
CSS3徑向漸變.html
CSS3文字陰影效果.html
text-shadow
CSS3字體引用.html
@font-face?
CSS3的2D轉(zhuǎn)換位移.html
/*往右邊移動100px，往下移動200px*/
transform: translate(100px,200px);
CSS3的2D轉(zhuǎn)換旋轉(zhuǎn).html
CSS3的2D轉(zhuǎn)換拉伸.html
scale(x,y) 對元素進行縮放
X表示水平方向縮放的倍數(shù) | Y表示垂直方向的縮放倍數(shù)
Y是一個可選參數(shù)，沒有設(shè)置的話，則表示X，Y兩個方向的縮放倍數(shù)是一樣的。并以X為準(zhǔn)。
transform:scale(2,2.5);??
CSS3的2D轉(zhuǎn)換傾斜.html
skew(x-angle,y-angle)定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。
CSS3的3D轉(zhuǎn)換旋轉(zhuǎn).html
CSS2過渡.html START
transform: rotate(180deg);
transition: width 2s,height 2s,transform 2s;
隨鼠標(biāo)的懸停而發(fā)生變化的旋轉(zhuǎn)放大的過渡動畫
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轉(zhuǎn)換位移.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轉(zhuǎn)換位移.html END
CSS3的2D轉(zhuǎn)換旋轉(zhuǎn).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轉(zhuǎn)換旋轉(zhuǎn).html END
CSS3的2D轉(zhuǎn)換拉伸.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表示水平方向縮放的倍數(shù) | Y表示垂直方向的縮放倍數(shù)
Y是一個可選參數(shù)，沒有設(shè)置的話，則表示X，Y兩個方向的縮放倍數(shù)是一樣的。并以X為準(zhǔn)。
transform:scale(2,2.5);??
CSS3的2D轉(zhuǎn)換拉伸.html END
CSS3的2D轉(zhuǎn)換傾斜.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 傾斜轉(zhuǎn)換。
CSS3的2D轉(zhuǎn)換傾斜.html END
CSS3的3D轉(zhuǎn)換旋轉(zhuǎn).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轉(zhuǎn)換旋轉(zhuǎn).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>
隨鼠標(biāo)的懸停而發(fā)生變化的旋轉(zhuǎn)放大的過渡動畫
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;
}
/*當(dāng)屏幕的寬度大于480像素時，div的背景色就顯示為藍色*/
@media screen and (min-width: 480px) {
#a {
background-color: blue;
}
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
CSS3多媒體查詢.html END
作業(yè) 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
作業(yè) END
單詞 START
