CSS 之语法与规则(Rule)
一、规则
Name 名称 | Description 简介 |
---|---|
!important | 提升指定样式条目的应用优先权。 |
/*comment*/ | CSS中的注释 /* 这里是注释内容 */ |
@import | 指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明 |
@charset | 在外部样式表文件内使用。指定该样式表使用的字符编码。 |
@media | 指定样式表规则用于指定的媒体类型和条件。 |
@font-face | 设置嵌入HTML文档的OpenType字体。 |
@page | 设置页面容器的版式,方向,边空等。 |
@keyframes | 指定动画名称和动画效果。 |
二、示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>语法与规则</title> <style> #sport { position: relative; width: 500px; height: 400px; border: 1px solid #ddd; } #staff { position: absolute; z-index: 3; bottom: 10px; left: 10px; overflow: hidden; width: 180px; height: 8px; border-radius: 3px; background: #ddd; line-height: 20; -moz-animation: staff 3s linear; -webkit-animation: staff 3s linear; -o-animation: staff 3s linear; -ms-animation: staff 3s linear; animation: staff 3s linear; } #ball { position: absolute; z-index: 3; bottom: 20px; left: 90px; overflow: hidden; width: 30px; height: 30px; border-radius: 15px; box-shadow: 0 0 10px rgba(204, 102, 0, .8); background: #F6D66E; background: -moz-linear-gradient(top, #fff, #F6D66E); background: -webkit-linear-gradient(top, #fff, #F6D66E); background: -o-linear-gradient(top, #fff, #F6D66E); background: -ms-linear-gradient(top, #fff, #F6D66E); background: linear-gradient(top, #fff, #F6D66E); line-height: 20; -moz-animation: ball 3s linear; -webkit-animation: ball 3s linear; -o-animation: ball 3s linear; -ms-animation: ball 3s linear; animation: ball 3s linear; } @-moz-keyframes ball { 0% { -moz-transform: translate(0, 0); } 5% { -moz-transform: translate(-90px, -100px); } 18% { -moz-transform: translate(0, -350px); } 35% { -moz-transform: translate(200px, 0); } 46% { -moz-transform: translate(380px, -160px); } 60% { -moz-transform: translate(250px, -350px); } 78% { -moz-transform: translate(60px, 0); } 100% { -moz-transform: translate(0, 0); } } @-webkit-keyframes ball { 0% { -webkit-transform: translate(0, 0); } 5% { -webkit-transform: translate(-90px, -100px); } 18% { -webkit-transform: translate(0, -350px); } 35% { -webkit-transform: translate(200px, 0); } 46% { -webkit-transform: translate(380px, -160px); } 60% { -webkit-transform: translate(250px, -350px); } 78% { -webkit-transform: translate(60px, 0); } 100% { -webkit-transform: translate(0, 0); } } @-o-keyframes ball { 0% { -o-transform: translate(0, 0); } 5% { -o-transform: translate(-90px, -100px); } 18% { -o-transform: translate(0, -350px); } 35% { -o-transform: translate(200px, 0); } 46% { -o-transform: translate(380px, -160px); } 60% { -o-transform: translate(250px, -350px); } 78% { -o-transform: translate(60px, 0); } 100% { -o-transform: translate(0, 0); } } @-ms-keyframes ball { 0% { -ms-transform: translate(0, 0); } 5% { -ms-transform: translate(-90px, -100px); } 18% { -ms-transform: translate(0, -350px); } 35% { -ms-transform: translate(200px, 0); } 46% { -ms-transform: translate(380px, -160px); } 60% { -ms-transform: translate(250px, -350px); } 78% { -ms-transform: translate(60px, 0); } 100% { -ms-transform: translate(0, 0); } } @keyframes ball { 0% { transform: translate(0, 0); } 5% { transform: translate(-90px, -100px); } 18% { transform: translate(0, -350px); } 35% { transform: translate(200px, 0); } 46% { transform: translate(380px, -160px); } 60% { transform: translate(250px, -350px); } 78% { transform: translate(60px, 0); } 100% { transform: translate(0, 0); } } @-moz-keyframes staff { 0% { -moz-transform: translate(0, 0); } 6% { -moz-transform: translate(260px, 0); } 20% { -moz-transform: translate(300px, 0); } 30% { -moz-transform: translate(300px, 0); } 40% { -moz-transform: translate(200px, 0); } 65% { -moz-transform: translate(40px, 0); } 79% { -moz-transform: translate(0, 0); } 100% { -moz-transform: translate(0, 0); } } @-webkit-keyframes staff { 0% { -webkit-transform: translate(0, 0); } 6% { -webkit-transform: translate(260px, 0); } 20% { -webkit-transform: translate(300px, 0); } 30% { -webkit-transform: translate(300px, 0); } 40% { -webkit-transform: translate(200px, 0); } 65% { -webkit-transform: translate(40px, 0); } 79% { -webkit-transform: translate(0, 0); } 100% { -webkit-transform: translate(0, 0); } } @-o-keyframes staff { 0% { -o-transform: translate(0, 0); } 6% { -o-transform: translate(260px, 0); } 20% { -o-transform: translate(300px, 0); } 30% { -o-transform: translate(300px, 0); } 40% { -o-transform: translate(200px, 0); } 65% { -o-transform: translate(40px, 0); } 79% { -o-transform: translate(0, 0); } 100% { -o-transform: translate(0, 0); } } @-ms-keyframes staff { 0% { -ms-transform: translate(0, 0); } 6% { -ms-transform: translate(260px, 0); } 20% { -ms-transform: translate(300px, 0); } 30% { -ms-transform: translate(300px, 0); } 40% { -ms-transform: translate(200px, 0); } 65% { -ms-transform: translate(40px, 0); } 79% { -ms-transform: translate(0, 0); } 100% { -ms-transform: translate(0, 0); } } @keyframes staff { 0% { transform: translate(0, 0); } 6% { transform: translate(260px, 0); } 20% { transform: translate(300px, 0); } 30% { transform: translate(300px, 0); } 40% { transform: translate(200px, 0); } 65% { transform: translate(40px, 0); } 79% { transform: translate(0, 0); } 100% { transform: translate(0, 0); } } </style> </head> <body> <div id="sport"> <span id="ball">弹球</span> <span id="staff">滑杆</span> </div> </body> </html>