HTML跳动的爱心

图片

目录

写在前面

HTML简介

跳动的爱心

代码分析

运行结果

推荐文章

写在后面

写在前面

哎呀，这是谁的小心心？跳得好快吖！

HTML简介

老生常谈啦，咱们还是从HTML开始吧！

HTML是超文本标记语言（HyperText Markup Language）的缩写，是一种用来创建网页的标记语言。它由一系列的标签组成，每个标签用于指示网页中某个元素的开始和结束，以及对元素进行各种操作和设置。HTML最早是由李爵士·伯纳斯-李（Sir Tim Berners-Lee）于1989年发明的，当时他正在瑞士的欧洲核子研究组织（CERN）工作。HTML的设计初衷是为了在科研人员之间共享文档和信息。随着互联网的发展，HTML逐渐成为了创建网页的标准工具。

HTML的基本结构是由开始标签和结束标签组成的。开始标签用尖括号(<>)括起来，结束标签在标签名前加上斜杠(/)。标签中可以包含属性，用于设置元素的各种属性和样式。例如，<p>是段落标签，可以创建一个段落，<h1>~<h6>是标题标签，用于创建不同级别的标题。除了标签和属性之外，HTML还包含了一些特殊字符和实体，用于表示一些特殊的符号和语义。例如，&lt;表示小于号(<)，&nbsp;表示空格。在HTML中，元素可以嵌套使用，也可以使用一些特殊的标签和属性对元素进行各种操作和设置。例如，<a>标签可以创建一个链接，<img>标签可以插入一张图片，<table>标签可以创建一个表格。HTML还支持一些特殊的元素和标签，用于描述网页的结构和语义。例如，<head>标签用于定义网页的头部信息，<body>标签用于定义网页的主体内容，<header>标签用于定义网页的头部，<nav>标签用于定义导航栏，<footer>标签用于定义页脚。

HTML的语法规则相对简单，容易学习和理解。它是一种开放的标准，任何人都可以使用和扩展。随着HTML的不断发展，已经发布了多个版本，最新的版本是HTML5，它引入了许多新的元素和功能，提供了更丰富的网页设计和交互效果。总之，HTML是一种用于创建网页的标记语言，它通过一系列的标签和属性，描述了网页的结构、样式和语义。它是互联网的基础之一，为人们提供了创建和共享信息的平台。

跳动的爱心

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Love</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body,
        ul,
        li,
        ol,
        dl,
        dd,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        img {
            display: block;
            border: none;
        }

        ol,
        ul {
            list-style: none;
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        html {
            height: 100%;
            background: -webkit-radial-gradient(center, pink, white);
        }

        .heart {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            transform: rotate(45deg);
            animation: move 2s infinite alternate;
        }

        .heart div {
            position: absolute;
            width: 200px;
            height: 200px;
            background: red;
        }

        .heart .middle {
            right: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
        }

        .heart .left {
            left: 0;
            bottom: 0;
            border-radius: 50%;
        }

        .heart .right {
            top: 0;
            right: 0;
            border-radius: 50%;
        }

        .heart p {
            width: 200px;
            height: 30px;
            font: bold 25px/30px "";
            text-align: center;
            color: #fff;
        }

        .heart p {
            position: absolute;
            right: 0;
            bottom: 85px;
            transform: rotate(-45deg);
        }

        @-webkit-keyframes move {
            10% {
                transform: rotate(45deg) scale(1.1);
                text-shadow: 0 0 5px #fff;
            }

            20% {
                transform: rotate(45deg) scale(1.2);
                text-shadow: 0 0 5px #fff;
            }

            30% {
                transform: rotate(45deg) scale(1.3);
                text-shadow: 0 0 5px #fff;
            }

            40% {
                transform: rotate(45deg) scale(1.2);
                text-shadow: 0 0 5px #fff;
            }

            50% {
                transform: rotate(45deg) scale(1.3);
                text-shadow: 0 0 5px #fff;
            }

            60% {
                transform: rotate(45deg) scale(1.2);
                text-shadow: 0 0 5px #fff;
            }

            70% {
                transform: rotate(45deg) scale(1.3);
                text-shadow: 0 0 5px #fff;
            }

            80% {
                transform: rotate(45deg) scale(1.2);
                text-shadow: 0 0 10px #fff;
            }

            90% {
                transform: rotate(45deg) scale(1.1);
                text-shadow: 0 0 5px #fff;
            }
        }
    </style>
</head>

<body>
    <div class="heart">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

代码分析

这是一个简单的HTML页面，实现了一个心形动画效果。下面是对代码的详细分析：

1. `<!DOCTYPE html>`：声明文档类型为HTML。

2. `<html>`：HTML开始标签，并指定语言为英语。

3. `<head>`：头部标签，用于包含页面的元数据和引用外部资源。

4. `<meta charset="UTF-8">`：指定字符编码为UTF-8。

5.`<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">`：设置页面的视口尺寸。

6. `<meta http-equiv="X-UA-Compatible" content="ie=edge">`：设置IE浏览器的兼容性模式。

7. `<title>Love</title>`：设置页面的标题。

8. `<style type="text/css">`：内联CSS样式开始标签。

9. `* { margin: 0; padding: 0; }`：设置所有元素的外边距和内边距为0。

10. `body, ul, li, ol, dl, dd, p, h1, h2, h3, h4, h5, h6 { margin: 0; }`：设置部分元素的外边距为0。

11. `a { text-decoration: none; color: inherit; }`：设置链接元素的文本装饰为无，并继承颜色。

12. `img { display: block; border: none; }`：设置图片元素的显示为块级元素，并去除边框。

13. `ol, ul { list-style: none; }`：去除有序列表和无序列表的默认样式。

14. `.clearfix:after { content: ""; display: block; clear: both; }`：创建一个伪元素清除浮动。

15. `.fl { float: left; }`：设置元素浮动在左侧。

16. `.fr { float: right; }`：设置元素浮动在右侧。

17. `html { height: 100%; background: -webkit-radial-gradient(center, pink, white); }`：设置HTML元素的高度为100%，并设置背景为一个径向渐变。

18. `.heart { position: relative; width: 300px; height: 300px; margin: 200px auto; transform: rotate(45deg); animation: move 2s infinite alternate; }`：设置心形容器的样式，包括相对定位、宽度和高度、垂直居中、旋转和动画效果。

19. `.heart div { position: absolute; width: 200px; height: 200px; background: red; }`：定义心形的三个部分的样式，包括绝对定位、宽度和高度、背景为红色。

20. `.heart .middle { right: 0; bottom: 0; width: 200px; height: 200px; }`：定义中间部分的样式，设置其位置和尺寸。

21. `.heart .left { left: 0; bottom: 0; border-radius: 50%; }`：定义左边的部分的样式，设置其位置和边框半径为50%。

22. `.heart .right { top: 0; right: 0; border-radius: 50%; }`：定义右边的部分的样式，设置其位置和边框半径为50%。

23. `.heart p { width: 200px; height: 30px; font: bold 25px/30px ""; text-align: center; color: #fff; }`：定义心形内部的文本样式，包括宽度和高度、字体加粗、字体大小和行高、居中对齐和颜色为白色。

24. `.heart p { position: absolute; right: 0; bottom: 85px; transform: rotate(-45deg); }`：定义心形内部的文本的位置和旋转。

25. `@-webkit-keyframes move { ... }`：定义一个动画关键帧，实现心形的旋转和缩放效果。

在`<body>`标签中，有一个心形的动画效果，使用一个容器（`.heart`）和三个部分（`.left`、`.middle`、`.right`）组成。通过CSS样式定义了容器和部分的样式，并通过动画关键帧（`@-webkit-keyframes`）实现旋转和缩放效果。最后，将容器放在页面的中央位置（`margin: 200px auto`）。

运行结果

图片

推荐文章

序号目录直达链接
1HTML实现3D相册HTML实现3D相册-CSDN博客
2HTML元素周期表HTML元素周期表-CSDN博客
3HTML黑客帝国字母雨HTML黑客帝国字母雨_字母雨html-CSDN博客
4HTML五彩缤纷的爱心HTML五彩缤纷的爱心-CSDN博客
5HTML飘落的花瓣HTML飘落的花瓣-CSDN博客
6HTML哆啦A梦HTML哆啦A梦_html哆啦a梦代码-CSDN博客
7HTML爱情树HTML爱情树-CSDN博客
8HTML新春烟花盛宴HTML新春烟花盛宴-CSDN博客
9HTML想见你HTML想见你-CSDN博客
10HTML蓝色爱心HTML蓝色爱心-CSDN博客
11HTML跳动的爱心https://want595.blog.csdn.net/article/details/139137326
12HTML橙色爱心HTML橙色爱心-CSDN博客
13HTML大雪纷飞https://want595.blog.csdn.net/article/details/139136829
14
15
16
17
18
19
20
21
22
23
24
25
26
27

写在后面

我是一只有趣的兔子，感谢你的喜欢！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/645326.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据结构--二叉搜索树

数据结构--二叉搜索树

目录 二叉搜索树的概念 二叉树的实现 结点类 函数接口总览 实现二叉树 二叉搜索树的应用 K模型 KV模型 二叉搜索树的性能分析 二叉搜索树的概念 二叉搜索树&#xff08;Binary Search Tree&#xff0c;简称BST&#xff09;是一种特殊的二叉树&#xff0c;其具有以下几…
阅读更多...
Installing Tinyproxy on CentOS 7 测试可用

Installing Tinyproxy on CentOS 7 测试可用

Installing Tinyproxy on CentOS 7 For RHEL/CentOS 7 systems, Tinyproxy is part of EPEL (Extra Packages for Enterprise Linux). Install EPEL on CentOS 7 yum install epel-release -y yum update -y Install Tinyproxy on CentOS 7 yum install tinyproxy -y 编辑…
阅读更多...
重开之数据结构(二刷)

重开之数据结构(二刷)

引言: 由于前段时间学习效率不高,导致后面复习前面数据结构没有一个大纲,因此打算重新来学习以下数据结构,期望再次把数据结构学透,并有深刻的印象.并且记录每一次的学习记录 以便于后续复习 二分查找 需求:在有序数组arr内,查找target值 如果找到返回索引位置如果找不到返回…
阅读更多...
使用python对指定文件夹下的pdf文件进行合并

使用python对指定文件夹下的pdf文件进行合并

使用python对指定文件夹下的pdf文件进行合并 介绍效果代码 介绍 对指定文件夹下的所有pdf文件进行合并成一个pdf文件。 效果 要合并的pdf文件&#xff0c;共计16个1页的pdf文件。 合并成功的pdf文件&#xff1a;一个16页的pdf文件。 代码 import os from PyPDF2 import …
阅读更多...
3款简洁个人网站引导页（附带源码）

3款简洁个人网站引导页（附带源码）

3款个人网站引导页 效果图及部分源码1.个人页2.引导页3.导航页 领取源码下期更新预报 效果图及部分源码 1.个人页 部分源码 * {margin: 0;padding: 0; }body {background-image: linear-gradient(to left, rgba(255, 0, 149, 0.2), rgba(0, 247, 255, 0.2)), url(../img/bg.j…
阅读更多...
贪心算法4（c++）

贪心算法4（c++）

过河的最短时间 题目描述 输入 在漆黑的夜里&#xff0c;N位旅行者来到了一座狭窄而且没有护栏的桥边。如果不借助手电筒的话&#xff0c;大家是无论如何也不敢过桥去的。不幸的是&#xff0c;N个人一共只带了一只手电筒&#xff0c;而桥窄得只够让两个人同时过&#xff0c;如果…
阅读更多...
Spark搭建 Standalone模式详细步骤

Spark搭建 Standalone模式详细步骤

Standalone模式概述&#xff1a; Standalone模式是Spark自带的一种集群模式&#xff08;本地集群&#xff0c;不依赖与外部集群&#xff0c;比如Yarn&#xff09;&#xff0c;可以真实地在多个机器之间搭建Spark集群的环境。 Standalone是完整的Spark运行环境,其中: Master角…
阅读更多...
QGraphicsView实现简易地图16『爆炸效果』

QGraphicsView实现简易地图16『爆炸效果』

前文链接&#xff1a;QGraphicsView实现简易地图15『测量面积』 一种简单的爆炸波扩散效果 动态演示效果&#xff1a; 静态展示图片&#xff1a; 核心代码&#xff1a; #pragma once #include "../AbstractGeoItem.h" #include "DataStruct/GeoData.h"…
阅读更多...
Minecraft服务器如何搭建

Minecraft服务器如何搭建

Minecraft这是原版英文名称&#xff0c;在中国大陆被译为《我的世界》&#xff0c;这款游戏很火爆。台湾的很多小伙伴也在玩&#xff0c;其译名为《我的创世神》。现在这款游戏在国内已经被网易代理了。因为这款游戏开源&#xff0c;所以任何人都可以搭建服务器端&#xff0c;如…
阅读更多...
Aloha机械臂的mujoco仿真问题记录

Aloha机械臂的mujoco仿真问题记录

今天在测试ACT代码时&#xff0c;遇到了仿真中的机械臂无法摆放正确的姿势来抓去红色方块。 后来经过测试&#xff0c;发现应该是python包的版本问题有误&#xff0c;下面记录下正确的包版本&#xff1a; 官方给出的包&#xff1a; conda create -n aloha python3.8.10 conda…
阅读更多...
LearnOpenGL（二十）之立方体贴图

LearnOpenGL（二十）之立方体贴图

一、创建立方体贴图 首先&#xff0c;生成一个纹理&#xff0c;并将其绑定到纹理目标GL_TEXTURE_CUBE_MAP&#xff1a; unsigned int textureID; glGenTextures(1, &textureID); glBindTexture(GL_TEXTURE_CUBE_MAP, textureID); 因为立方体贴图包含有6个纹理&#xff0…
阅读更多...
【Spring Boot】分层开发 Web 应用程序（含实例）

【Spring Boot】分层开发 Web 应用程序（含实例）

分层开发 Web 应用程序 1.应用程序分层开发模式&#xff1a;MVC1.1 了解 MVC 模式1.2 MVC 和三层架构的关系 2.视图技术 Thymeleaf3.使用控制器3.1 常用注解3.1.1 Controller3.1.2 RestController3.1.3 RequestMapping3.1.4 PathVariable 3.2 将 URL 映射到方法3.3 在方法中使用…
阅读更多...
打卡信奥刷题（19）用Scratch图形化工具信奥B3972 [语言月赛 202405] 二进制 题解

打卡信奥刷题（19）用Scratch图形化工具信奥B3972 [语言月赛 202405] 二进制 题解

进制转换是经典的编程题&#xff0c;尤其是10进制转换为2进制。方法是拿给定的数&#xff0c;不断地除2&#xff0c;将余数放在对应的位置&#xff0c;剩下的数为对应数除2向下取整 [语言月赛 202405] 二进制 题目描述 在介绍十进制转二进制的篇目中&#xff0c;我们总会看到…
阅读更多...
GDPU JavaWeb mvc模式

GDPU JavaWeb mvc模式

搭建一个mvc框架的小实例。 简易计算器 有一个名为inputNumber.jsp的页面提供一个表单&#xff0c;用户可以通过表单输入两个数和运算符号提交给Servlet控制器&#xff1b;由名为ComputerBean.java生成的JavaBean负责存储运算数、运算符号和运算结果&#xff0c;由名为handleCo…
阅读更多...
2024最新 Jenkins + Docker实战教程（二） - Jenkins相关配置

2024最新 Jenkins + Docker实战教程（二） - Jenkins相关配置

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…
阅读更多...
鸿蒙 DevEcoStudio:发布进度条通知

鸿蒙 DevEcoStudio:发布进度条通知

使用notificationManager及wantAgent实现功能import notificationManager from ohos.notificationManager import wantAgent from ohos.app.ability.wantAgent Entry Component struct Index {State message: string 发布进度条通知progressValue: number0async publicDownloa…
阅读更多...
24李林跌落神坛，880还刷吗？还是换1000、900、660？

24李林跌落神坛，880还刷吗？还是换1000、900、660？

“李林今年跌落神坛了&#xff01;” “全是固定题型没新题&#xff0c;结果今年考的全是新题。” 880是“老真题的神”&#xff0c; 遇到24年&#xff0c;冷门考点多&#xff0c;计算量又大&#xff0c;就不灵了。 但“老真题”&#xff0c;还是得刷。就像往年真题是要刷的…
阅读更多...
传输层——UDP

传输层——UDP

在学习计算机网络的过程中&#xff0c;我们知道OSI七层协议模型&#xff0c;但是在实际开发应 用中我们发现OSI七层协议模型并不适合实施&#xff0c;因为OSI上三层通常都是由开 发人员统一完成的&#xff0c;这三层之间在实现过程中没有一个明确的界限&#xff0c;所以我 们更…
阅读更多...
001集—创建、写入、读取文件fileopen函数——vb.net

001集—创建、写入、读取文件fileopen函数——vb.net

此实例为在指定路径下创建一个txt文本文件&#xff0c;在文本文件内输入文字&#xff0c;并弹窗显示输入文字&#xff0c;代码如下&#xff1a; Public Class Form1Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.ClickDim testcontent As Str…
阅读更多...
基于CNN+LSTM深度学习网络的时间序列预测matlab仿真,并对比CNN+GRU网络

基于CNN+LSTM深度学习网络的时间序列预测matlab仿真,并对比CNN+GRU网络

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 CNN基础 4.2 LSTM原理 4.3 GRU原理 4.4 CNNLSTM与CNNGRU对比 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心程序 ......................…
阅读更多...
最新文章

Copyright @ 2022~2023