动画效果
<html lang="en"> <head> <meta charset="UTF-8"> <style> @keyframes colorchange { 0%{ color: red; } 20%{ color: yellow; } 50%{ color: darkorange; } 80%{ color:rosybrown; } 100%{ color: deeppink; } } p{ font-size: 50px; /*动画名称*/ animation-name: colorchange; /*动画时长*/ animation-duration: 2s; /*动画速度曲线*/ animation-timing-function:linear; /*动画延迟时间*/ /* transition-delay: 2s;*/ /*动画播放次数 Infinite：无限次数播放*/ animation-iteration-count:infinite; /*动画在下一个是否逆向播放*/ animation-direction: alternate;/*alternate：反向 normal正常*/ /*动画完样式不改变；backwards：保留最后一个样式；forwards：保留最初的样式*/ animation-fill-mode: backwards; } </style> <title>动画</title> </head> <body> <p>杰瑞教育</p> </body> </html>
结果图：
略，图片中文字会随着时间推移变化，最后回复到原来的颜色。
页面展开收缩
<html lang="en"> <head> <meta charset="UTF-8"> <style> #container { 200px; height: 50px; background-color: #878787; } #top { 150px; height: 100%; float: right; background-color: yellow; } #hidden { 150px; height: 0px; background-color: red; position: relative; top: 50px; transition: all 1s ease; overflow: hidden; } #top:hover #hidden { height: 300px; } </style> <title>页面展开收缩</title> </head> <body> <div id="container"> <div id="top"> <div id="hidden"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> </div> </body> </html>
结果图：
响应式布局
<html lang="en"> <head> <meta charset="UTF-8"> <style> /*当你的设备宽度大于900px的时候，采用该样式*//*第一种方法*/ /* @media (min- 900px) { }*/ /*当你的设备宽度小于900px的时候，采用该样式*/ /* @media (max- 900px){ }*/ @import url(../../css/min.css) all and (max- 900px); @import url(../../css/max.css) all and (min- 900px);/*第二种方法*/ </style> <link rel="stylesheet" href="../../css/max.css" media="all and (min-900px)"> <link rel="stylesheet" href="../../css/min.css" media="all and (max-900px)"><!--第三种方法--> <title>响应式布局</title> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>
结果图：
