Css3的一些属性：
<style type="text/css"> *{ text-align: center; /*这种方法自己参考*/ /* background-image: linear-gradient(0deg, white, whitesmoke);*/ /*颜色写法的模式*/ /*方法一color+颜色单词*/ color: red; /*方法二color+#后六的字符*/ color: #FF0000; /*方法三定义RGB模式*/ color: rgb(64,423,154); color: rgb(24%,123%,67%); /*背景色的定义方法一*/ background-color: rgba(223,124,67,0.6); /*背景色的定义方法二*/ background-color: rgba(40%,30%,67%,0.6); } /*自定义字体内容学习模块*/ @font-face { /*字体的名称为F*/ font-family: f; /*src: url('STCAIYUN.TTF');*/ /*引入字体模块*/ src: url('YUGOTHB.TTC'); } h1{ /*字体名称*/ font-family: f; } </style>
上面代码是一些基础操作（色彩的设置，字体的定义，背景色彩的设置）
请看下面效果图
进入第一步部分：自定义的字体设置，如何自定一个字体呢？
<style> /*自定义字体内容学习模块*/ @font-face { /*字体的名称为F*/ font-family: f; /*src: url('STCAIYUN.TTF');*/ /*引入字体模块*/ src: url('YUGOTHM.TTC'); } h1{ /*字体名称*/ font-family: f; } </style>
上面的代码是自定义的字体的方式：
思考用什么样的方式实现上面代码的效果呢!
思考用什么样的方式实现上面代码的效果呢!
思考用什么样的方式实现上面代码的效果呢!
Css3动画的：《位移》《放大缩小》《旋转》
!--Css学习内容二动画效果--> <style type="text/css"> div{ width: 100px; height: 100px; background: pink; animation-name: k; animation-duration: 15s; /*动画运行运动曲线*/ animation-timing-function: ease; animation-timing-function: ease-in-out; animation-timing-function: ease-out; /*动画播放次数*/ animation-iteration-count: 3; /*动画是否反向*/ animation-direction: alternate; animation-direction: alternate-reverse; /*动画初始*/ animation-fill-mode: backwards; animation-fill-mode: forwards; animation-fill-mode: both; /*连写*/ /*animation: move 4s ease 2s infinite alternate forwards;*/ } div:hover{ animation-play-state: paused; } /*动画的效果图*/ @keyframes k{ 15%{ transform: translate(2200px,0); background: lavender; font-size: 50px; height: 300px; } 20%{ transform: translate(2200px,500px); width: 200px; background: royalblue; } 35%{ transform: translate(0px,500px); background-color: #FF0000; } 45%{ transform: translate(1000px,0); height: 200px; background: lavender; font-size: 50px; } 55%{ transform: translate(1000px,500px); width: 10px; background: royalblue; height: 20px; } 65%{ transform: translate(0px,500px); height: 20px; background: peachpuff; font-size: 20px; } 75%{ transform: translate(0px,500px); height: 20px; background: yellow; font-size: 20px; } 85%{ transform: translate(0px,500px); height: 20px; background: palevioletred; font-size: 20px; } 95%{ transform: translate(0px,500px); height: 20px; background: pink; font-size: 20px; } 100%{ transform: translate(0px,0px); } } </style>
上面代码是css的样式
<body> <div style="background: gray; float: left;" >1</div> <div style="background: red; float:right;">2</div> <div style="background: khaki; float: initial;" >3</div> <div style="background: crimson; float: left;" >1</div> <div style="background: #1E90FF; float:right;">2</div> <div style="background: khaki; float: initial;" >3</div> <div style="background: salmon; float: right;">4</div> <div style="background: mediumpurple;">5</div> <div style="background: skyblue;">6</div> <div style="background: salmon; float: right;">4</div> <div style="background: mediumpurple;">5</div> <div style="background: lightblue;">6</div> <div style="background: gray; float: left;" >1</div> <div style="background: red; float:right;">2</div> <div style="background: khaki; float: initial;" >3</div> <div style="background: crimson; float: left;" >1</div> <div style="background: #1E90FF; float:right;">2</div> <div style="background: khaki; float: initial;" >3</div> <div style="background: salmon; float: right;">4</div> <div style="background: mediumpurple;">5</div> <div style="background: skyblue;">6</div> <div style="background: salmon; float: right;">4</div> <div style="background: mediumpurple;">5</div> <div style="background: lightblue;">6</div> </body>
上面的代码是主体内容
解说：
@1 定义动画的名称。
animation-name: k;
@2 定义动画运行运动曲线
animation-timing-function: ease;
animation-timing-function: ease-in-out;
animation-timing-function: ease-out;
@3 动画播放次数
animation-iteration-count: 3;
@4动画是否反向
animation-direction: alternate;
animation-direction: alternate-reverse
@5/*动画初始*/
animation-fill-mode: backwards;
animation-fill-mode: forwards;
animation-fill-mode: both;
@6鼠标停在运动对象时的效果div:hover{ animation-play-state: paused;}
@7/*定义字体的步数*/
animation: move 10s steps(28)forwards;
