前端网页html入门,制作日蚀爱心

最新推荐文章于 2022-12-29 09:13:34 发布
最新推荐文章于 2022-12-29 09:13:34 发布
阅读量590 收藏 1
点赞数
分类专栏： JAVA
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43944305/article/details/104092055
版权 
<!doctype html><!--声明文档类型为网页 H5 DTD xhtml 1.0 html 4.01-->
<html>
	<head><!--设置网页基本信息,负责对外通信-->
		<title><!--网页的标题--></title>
		<meta charset='utf-8'><!--设置网页的编码格式,utf-8支持中文,还有gb2312 gbk国内有效-->
		<meta name='keywords' content='这个是网页关键词,方便搜索引擎搜索'>
		<meta name='description' content='设置网页描述信息,免费的广告位'>
		<style><!--统一存放页面元素样式的区域-->
			*{<!--通配符选择器,选择页面的所有标签-->
				margin:0;<!--清除页面外边距-->		
			}
			/*css复合型写法
				margin:100px;四个方向
				margin:20px 30px;上下  左右
				margin:30px 40px 50px;上 	左右		下
				margin:20px 30px 40px 50px;上右下左,顺序.
			css单例写法
				margin-top:100px;
				margin-right:200px;
				margin-bottom:100px;
				margin-left:100px;
			相对定位居中方式,父级是body
				left:50%;<!--div左端距离相对定位父级的左端50%的父级长度-->
				top:50%;<!--div上端距离相对定位父级的上端50%的父级高度-->
				margin-left:-50px;<!--自身宽度的一半-->
				margin-top:-50px;<!---自身高度的一半-->
			另一种直接居中大法
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				margin:auto;
			*/
			html{
				height:100%;<!--继承浏览器,或者写成inherit-->
			}
			body{<!---->
				position:relative;<!--相对定位父级-->
				height:inherit;<!--继承html-->
			}
			#wrap{<!--id选择器,#+id{样式}-->
					left:50%;<!--div左端距离相对定位父级的左端50%的父级长度-->
					top:50%;<!--div上端距离相对定位父级的上端50%的父级高度-->
					position:absolute;<!--绝对定位子元素-->
					width:100px;<!--属性名称:属性值(单位)-->
					height:100px;
					background-color:#368;
			
			}
		</style>
	</head>
	<!--DIV:盒子模型,在网页上划分区域的元素.CSS:修饰页面上元素的样式,宽度,高度,位置,边框,背景-->
	<body><!--网页主题信息,给人看的-->
		<div id='wrap'><!--id命名可以通过id找到具体的某一个标签,唯一性-->
		</div>

		<div class='qqq'> <!--class命名非唯一可复用,表示一组标签-->
		</div>
	</body>
</html>

网格布局居中

<!doctype html><!--声明文档类型为网页 H5 DTD xhtml 1.0 html 4.01-->
<html>
	<head>
		<title>这是一个标题</title>
		<meta charset='utf-8'>
		<meta name='keywords' content='这个是关键词'>
		<meta name='description' content='网页描述,免费的广告位'>
		<style>
			*{<!--通配符选择器,选择页面的所有标签-->
				margin:0;	
			}
			html{
				height:100%;
			}
			body{
				display:grid;/*网格式布局*/
				height:inherit;
			}
			#wrap{
				margin:auto;/*自动计算页边距*/
				width:100px;
				height:100px;
				background-color:#368;
			}
			#wrap .love{
				width:100px;
				height:150px;
				background-color:red;
			}
		</style>
	</head>
	<body><!--网页主题信息,展示内容给人看的地方-->
	
		<div id='wrap'>
			<div class='love'>
			</div>
		</div>
	</body>

</html>

伪元素

在这里插入图片描述

下面这种空的div标签不太规范,会让百度降低评分,不利于搜索关键词后的百度排名
在这里插入图片描述

任何一个元素都自带before和after,伪元素本身是一个行内元素,他无法设置行高,可以变成块级元素才可以.或者采用相对定位,相对定位的元素都会强制变成块级元素

在这里插入图片描述

css3圆角属性

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

css3的形变操作transform,例如顺时针旋转45度,逆时针就写成负的

在这里插入图片描述
在这里插入图片描述

对矩形的4个角的X轴和Y轴的圆角半径分别设置

在这里插入图片描述

在这里插入图片描述

提取公共样式,封装,防止代码重复

在这里插入图片描述

选择同一个class的第2个div

在这里插入图片描述

利用css3的transform移动,例如向上移动Y轴,向右移动X轴

在这里插入图片描述

在这里插入图片描述

CSS3执行动画

在这里插入图片描述

改变颜色动画
在这里插入图片描述

html中的css样式中声明全局变量,和使用

在这里插入图片描述

下面是爱心日蚀的html代码

<!doctype html><!--声明文档类型为网页 H5 DTD xhtml 1.0 html 4.01-->
<html>
	<head>
		<title>这是一个标题</title>
		<meta charset='utf-8'>
		<meta name='keywords' content='这个是关键词'>
		<meta name='description' content='网页描述,免费的广告位'>
		<style>
			*{
				margin:0;	
			}
			html{
				height:100%;
				--testTime:10s;
			}
			body{
				display:grid;
				height:inherit;
				background-color:skyblue;
				animation:changeColor var(--testTime) linear infinite;
			}
			#wrap{
				margin:auto;
				width:100px;
				height:100px;
			}
			
			#wrap .love{
				position:relative;
				width:200px;
				height:180px;
			}
			
			
			#wrap .love:before
			,#wrap .love:after{
				position:absolute;
				content:'';
				width:100px;
				height:150px;
				background-color:yellow;
			}
			
			#wrap .love:before{
				left:24px;
				/*左上 右上 右下 左下,也是顺时针,这里的值代表的是圆角的半径*/
				border-radius:50px 50px 0px 0px;
				transform:rotate(-45deg);
			}
			
			
			#wrap .love:after{
				left:60px;
				/*左上 右上 右下 左下,也是顺时针,这里的值代表的是圆角的半径*/
				border-radius:50px 50px 0px 0px;
				transform:rotate(45deg);
			}
			
			#wrap .love:nth-of-type(2){
				transform:translateY(-180px) translateX(200px);
				/*css3执行动画 动画名称 事件 运动曲线 运动次数*/
				/*css3执行动画,匀速运动animation:move 6s linear,匀速运动3次animation:move 6s linear 3,一直运动animation:move 6s linear infinite*/
				animation:move var(--testTime) linear infinite;
				
			}
			
			#wrap .love:nth-of-type(2):before
			,#wrap .love:nth-of-type(2):after{
				background-color:skyblue;
				animation:changeColor var(--testTime) linear infinite;
			}
			
			@keyframes move{
				0%{transform:translateY(-180px) translateX(200px);}
				100%{transform:translateY(-180px) translateX(-200px);}
			}
			
			
			@keyframes changeColor{
				0%{background-color:skyblue;}
				50%{background-color:black;}
				100%{background-color:skyblue;}
			}
			
			
			
			
			
		</style>
	</head>
	<body><!--网页主题信息,展示内容给人看的地方-->
	
		<div id='wrap'>
			<div class='love'>
				
			</div>
			<div class='love'>
				
			</div>
		</div>
	</body>

</html>
好大的月亮
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html爱心特效代码
梦游星海的博客
10-26 44万+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywor...
web前端:动态七彩闪烁爱心
最新发布
SupermarketX的博客
05-18 1324
【代码】web前端:动态七彩闪烁爱心。
HTML画出心形
weixin_44261821的博客
09-10 2万+
心形一 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #MyCanvas { border: 1px solid lightblue; ...
HTML5 Canvas樱花树木js特效
ICode联盟
01-14 1990
下载地址 HTML5 Canvas樱花树木特效是一款基于canvas绘制纤细的樱花树开满了背景，遍地开满的樱花树背景特效。 dd:
HTML 动态爱心代码
weixin_57206174的博客
11-20 6万+
超级简单的动态爱心代码，手中有电脑即可完成。大家不要试图用这个去表白，说实话过于土味！
日蚀主题网页模板
01-22
日蚀主题网页模板
开箱|二代天使光圈，日蚀风扇
08-31
【Huan】_開箱_二代天使光圈，日蝕風扇
java实现下载文件源码-flux:日蚀通量
06-05
日蚀通量 项目“Eclipse Flux”是评估未来可能的基于云的开发人员工具的原型工作。 基本思想基于 Git 感知项目同步机制（您可以将其视为代码的 DropBox），该机制使项目在不同的机器和服务之间保持同步。 虽然存储和...
三菱汽车蓝瑟和日蚀两车型联合上市方案.pptx
09-29
三菱汽车蓝瑟和日蚀两车型联合上市方案.pptx
UNO-Eclipse：用Eclipse IDE制作的UNO游戏
02-12
日蚀 Eclipse IDE中的UNO游戏
html爱心页面
11-06
我能抽象出整个世界．．． 但是我不能抽象出你．．． 因为你在我心中是那么的具体．．． 所以我的世界并不完整．．． 我可以重载甚至覆盖这个世界里的任何一种方法．．． 但是我却不能重载对你的思念．．． 也许命中注定了 你在我的世界里永远的烙上了静态的属性．．． 而我不慎调用了爱你这个方法．．． 当我义无返顾的把自己作为参数传进这个方法时．．． 我才发现爱上你是一个死循环．．． 它不停的返回对你的思念压入我心里的堆栈．．． 在这无尽的黑夜中．．． 我的内存里已经再也装不下别人．．． 我不停的向系统申请空间．．． 但却捕获一个异常－－－我爱的人不爱我．．． 为了解决这个异常．．． 我愿意虚拟出最后一点内存．．． 把所有我能实现的方法地址压入堆栈．．． 并且在栈尾压入最后一个方法－－－将字符串＂我爱你，你爱我吗？＂传递给你．．． 如果返回值为真－－我将用尽一生去爱你．．． 否则－－我将释放掉所有系资源．
实现情人节动态爱心效果（附代码h5+css+js）
05-20
3daixin body{ background:black; } .heart3d{ position:relative; width: 100px; height: 160px; margin:50px auto; animation: rot 20s linear infinite;/*自定义旋转旋转名称 20s 匀速旋转 无限重复*/ transform-style:preserve-3d; } /*关键帧：定义改变的值*/ @keyframes rot{ form{transform: rotateY(0deg)} to{transform:rotateY(360deg)} } .heart3d div{ position: absolute; left:0; top:0; width: 100px; height: 160px; border: 2px solid red; border-left:0; border-bottom: 0; /*margin:50px auto;*/ border-radius:50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 斜杠后面是竖直方向 顺序是顺时针*/ transform: rotate(45deg); } var heart3d=//定义一个变量来保存 //获取元素 //在文档里面get获取元素 document.getElementsByClassName("heart3d")[0]; //在控制台里面的输出 console.log(heart3d) for (var i=0;i<36;i++) //for循环 循环变量 定义一个i变量 初始值0 循环36次 自己循环一次 { var oDiv =document.createElement("div");//在文档里面创建元素 oDiv.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)"; heart3d.appendChild(oDiv);//往它里面添加子元素
浪漫程序员 HTML5爱心动画
07-04
HTML5爱心动画HTML5爱心动画
如何动态显示爱心HTML,css 如何在html页面上输出一个“爱心”呢？
weixin_34811747的博客
06-08 1793
摘要:下文讲述使用css脚本在页面上绘制一个“爱心”形状的方法分享,如下所示:“爱心”是html中常用的一种形状，那么如何使用css脚本在html上绘制一个”爱心”呢？实现思路:1.绘制两个长方形并设置长方形的圆角边框2.对绘制的长方形进行旋转，拼接处“爱心”形状如下所示:例:使用css绘制一个“爱心”形状的示例分享maomao365.com css 绘制 "爱心" 的示例分享----将div转换...
HTML+CSS+JS实现 ❤️酷炫情人节爱心动画特效❤️
java李阳勇的博客
09-11 4579
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示：文末获取源码 代码目录： 主要代码实现： CSS样式： * { margin: 0; padding: 0; list-style-type: none; } body { font-family: san
HTML实现爱心树表白动画
qq_42680327的博客
12-24 1万+
谁说程序员不浪漫，其实有些程序还是很浪漫的好嘛！如果你是一个单身程序员，那么赶紧的拿下这个资源吧！里面的文字直接替换成你想要加的内容就行。 效果图： 源码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">...
跨年烟花 html 代码汇总
热门推荐
一些笔记
01-01 6万+
关于烟花代码的汇总
三款html版女朋友表白告白代码，动态爱心表白代码，总有一款适合你，可定制表白内容
Python代码大全
12-29 3328
三款html版女朋友表白告白代码，动态爱心表白代码，总有一款适合你，可定制表白内容。
情人节-动态爱心背景（html5+css+js）
weixin_42449711的博客
07-21 7616
一、效果图 二、源代码 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;情人节爱心背景&lt;/title&gt; &lt;style&gt; body{ overflow: hidden; margin: 0; } h1{
【爱心跳动——HTML实现 （效果+代码）】| 前端面试：解释什么是浏览器的同源策略（Same-Origin Policy）以及限制。
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
02-12 2万+
目录效果代码说明 效果 代码 爱心跳动.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> <style> *{ padding: 0; margin: 0; } body{

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值