CSS基本使用，五分钟回顾版

最新推荐文章于 2024-07-24 11:39:30 发布

带你吃饭就好

最新推荐文章于 2024-07-24 11:39:30 发布

阅读量105

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_43722571/article/details/97371719

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

	定义一个标签的动画

	首先给这个标签设定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

带你吃饭就好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基本使用，五分钟回顾版

定义一个标签的动画首先给这个标签设定animation属性，例如： animation: wh_rotate 8s linear infinite; 动画：动画名称动画时间动画方式（这里是线性）动画结束（这里一直循环）然后要单独给动画设置动作使用 @keyframes wh_rotate{ from{transform: rotate(0deg)}...
复制链接

扫一扫

专栏目录