定义一个标签的动画
首先给这个标签设定animation属性,例如:
animation: wh_rotate 8s linear infinite;
动画:动画名称 动画时间 动画方式(这里是线性) 动画结束(这里一直循环)
然后要单独给动画设置动作 使用
@keyframes wh_rotate{
from{transform: rotate(0deg)}
to{transform: rotate(-360deg)}
}
可以定义一个旋转的动画
那个标签使用了animation属性,名称为wh_rotate 的话就开始旋转
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ps:这里的几个animation是针对不同浏览器的,使得一下几个浏览器都适用
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Safari and Chrome */
@keyframes 规定动画。
animation 动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode 规定对象动画时间之外的状态。
alt=“文件被破坏了哦” 是搭配image标签一起使用,当找不到图片时,就显示文字”文件被破坏了”
z-index 显示优先级比如給z-index=-1 这个标签就不会优先显示出来容易被遮挡 给它赋值为10,就很难被覆盖,距离用户更近
transform: rotate(45deg); 元素移动方式有多种,这里的rotate是旋转,还有平移等例如 translate(5px, 5px)就是把这个元素向下向左都移动5px
transform-origin:20% 40%; 这个中心是这个标签得位置,比如100%,0,就是右上角,100%,100%,就是右下角
动画参考地址 https://www.runoob.com/cssref/css-animatable.html .
“< a href=“www.baidu.com” target=“_blank” name=”#three">" target是选择哪个窗口打开这个超链接,_blank在新建窗口name是跳转到这个name,其他标签name如果等于three,这里就可以直接跳到这个那个标签 表示空格br/ 换行符
标签,表示保留预设格式,里面写空格就不需要用空格符,直接打空格< dl>声明定义列表
< dt>声明列表项
< dd>定义列表内容
< /dl>
有序列表,出来之后,每个li前面有序号1,2,3
< ol>
< li>
< li>
< /ol>
无序列表,出来之后,每个li前面是一个" · "
< ul>
< li>
< li>
< /ul>
ps:有序列表里面全部是< li>标签,列表嵌套的话,嵌套列表的ul或则ol也是写在li里面
斜体标签 加粗 图片标签可以加上title属性,指着图片可以显示信息
~
块集元素独立占一行
行级元素不支持设置长宽高,内容撑开高度 < a> < strong> < em>
但是行级元素可以设置行高line-height。
ps:span是一个特殊的行级标签,和div(块级标签)一样,没有任何语义(样式)。
通常用来着重显示某行文字中的某个单词
< img>其他属性和行级元素相似,但是可以设置宽高,所以他不属于行级元素也不属于其他元素,不设置的话也是内容撑开高度
< input> size属性是定义输入框长短 maxlength是定义可接受字符长度
<input type=“radio” name=“gender” value=“boy”/ checked>男 checked标记属性,默认选择 男 在h5之前应该写成checked=“checked”
用表格的时候 colspan:单元格占用表格列数
rowspan 单元格占用表格行数
border-collapse: collapse;这个属性是给table的,表明每个项可以合在一起
< video src="" autoplay controls> 自动播放和控制条
< audio src="" autoplay controls> 播放音频
< embed src="" > 播放flash