[网页编程]-07 CSS3 中的常用属性

prtyaa
prtyaa 2023-12-27 16:09:48 65632
分类专栏： 资讯

CSS3中出现了许多好玩的动画效果以及图形处理,大家来体验一下吧,

知识点:

<body>
		<!-- 先说明一下 后面lef就是和前面一样的类选择器 -->
		<div class="cen lef"></div>
		<div class="cen c"></div>
		<div class="cen rig"></div>
		
	</body>

实际上 cen 和 lef 是两个分别的别名 是可以当做单独的Class来操作

兴趣练习:

跳动心形 CSS文件代码

/* css3中的动画调用 */
			@keyframes aj{
				0%{
					transform: scale(1) rotate(45deg);
				}
				50%{
					transform: scale(1.1)rotate(45deg);
				}
				100%{
					transform: scale(1)rotate(45deg);
				}
			}

HTML文件代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: #FFD700;
			}
			.cen{
				width: 200px;
				height: 200px;
				background-color: #d5093c;
				
				/* 添加阴影 水平方向偏移 垂直方向偏移 模糊度 颜色 */
				box-shadow: 0px 0px 80px #d5093c;
				/* 执行动画的调用 11s是指定跳动时间  aj是下面css3的动画名称 */
				animation: 1s aj infinite;
				
			}
			.lef{
				/* 倒圆角指令 */
				border-radius: 100px ;
				
				/* 第一个参数左上 第二个参数右下 */
				/* border-radius: 10px 60px ; */
				
				/* 绝对定位 */
				position: absolute;
				top:200px;
				left: 200px;
				
				
				
			}
			.c{
				/* 角度旋转 */
				transform: rotate(45deg);
				/* 绝对定位 */
				position: absolute;
				top:271px;
				left: 271px;
			}
			.rig{
				border-radius: 100px;
				/* 绝对定位 */
				position: absolute;
				top:200px;
				left: 341px;
			}
			
			/* css3中的动画调用 */
			@keyframes aj{
				0%{
					transform: scale(1) rotate(45deg);
				}
				50%{
					transform: scale(1.1)rotate(45deg);
				}
				100%{
					transform: scale(1)rotate(45deg);
				}
			}
			
			
			
		</style>
	</head>
	<body>
		<!-- 先说明一下 后面lef就是和前面一样的类选择器 -->
		<div class="cen lef"></div>
		<div class="cen c"></div>
		<div class="cen rig"></div>
		
	</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31551
赞同 0
评论 0 条

相关文章

  • [网页编程]-09 JavaScript Array数组 2023-12-27 65658 浏览

    数组声明的四种方式方式一最常用的,简略的声明了数组,但是没给长度vararr4=["你好数组!",123,newDate(),false];方式二只是声明了数组,但是给有给定长度和内容vararr=newArray();方式三声明了数组以及长度,但是没有给定数组内具体内容vararr2=newArray(5);方式四声明了数组以及其中的内容,但是没有给定具体长度vararr3=newArray("

  • [网页编程]-16 JavaScript Document节点获取 2023-12-27 66747 浏览

    元素节点的获取有两种方式,第一种是直接获取,第二种是间接获取1.直接获取(三种)1.1方式1id方式直接获得获得的是单个对象/*直接获取节点对象的方式*/functiondemo1(){//方式1:id方式直接获得获

  • [网页编程]-15 JavaScript Document节点 2023-12-27 65132 浏览

    document节点,可以简单的理解为就是我们网页内显示的内容的全部标签,节点呈树形结构下方两图一致蓝色元素节点橙色属性节点绿色文本节点

  • [网页编程]-14 JavaScript Bom对象中常用属性 2023-12-27 66067 浏览

    Navigator返回由客户机发送到服务器的user-agent的头部信息(用户代理对象)判断是移动端还是PC端Locationurl:查看地址href:查看主机地址hostname:主机地址port:端口号/*Lo

  • [网页编程]-13 JavaScript BOM对象中常用的方法 2023-12-27 64805 浏览

    注意,下面所有方法中的Window是可以省略的弹窗第一种只有确定按钮/*三种弹框方式*///第一种functiontk1(){//window可以省window.alert("第一种弹框方式");}

  • [网页编程]-12 JavaScript BOM和DOM对象 2023-12-27 64129 浏览

    简单的来说,整个浏览器的结构就是BOM这包括着浏览器的全部而Dom就是中间我们浏览内容的那一块Bom包含Dom●什么是BOM●BOM是Browser0bjectModel的简写，即浏览器对象模型。●BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法●BOM没有统一的标准(每种客户端都可以自定标准)。●BOM的顶层是window对象●什么是DOM●DOM;是DocumentObjectMo

  • [网页编程]-11 JavaScript 键盘code表 2023-12-27 66576 浏览

    keycode8=BackSpaceBackSpacekeycode9=TabTabkeycode12=Clearkeycode13=Enterkeycode16=Shift_Lkeycode17=Control_Lkeycode18=Alt_Lkeycode19=Pausekeycode20=Caps_Lockkeycode27=EscapeEscapekeycode32=spacespacek

  • [网页编程]-10 JavaScript event事件 2023-12-27 65610 浏览

    满足某些条件就会被触发例如单击常用操作:单击事件:onclick最常用双击事件:ondblclick获得焦点事件:onfocus失去焦点事件:onblur鼠标移动事件:onmousemove鼠标离开事件:onmouseout鼠标抬起事件:onmouseover键盘抬起事件:onkeyup页面加载事件:onload要一个操作触发多个事件只需要在事件中以分号隔开即可

  • [网页编程]-03 JavaScript 变量 2023-12-27 67192 浏览

    【1】JS中变量的声明var变量名=值；【2】JS中变量的使用注意的事项A、js中的变量的名称和java中标识符的命名保持一致就可以了。B、js中变量名称是可以重复的，但是后者的名称会把前者的名称值覆盖C、js中末尾即使没有分号结束也是可以的，但是不推荐大家这样书写。

  • [网页编程]-04 JavaScript 数据类型 2023-12-27 68249 浏览

    JS中的数据类型number（数字类型的数据）string（字符串类型）boolean（布尔数据类型）object（对象类型）JS中特殊数据类型undefined(未定义)NaN(不是一个数字)notanumbernull(空对象)

    • 关注我们

      信创开放社区公众号二维码

      扫一扫关注公众号

      信创开放社区交流群

      添加我为好友，拉您入交流群！

    添加我为好友，拉您入交流群！

    请使用微信扫一扫!