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`)。

运行结果

图片

推荐文章

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

写在后面

我是一只有趣的兔子,感谢你的喜欢!

上一篇:Mongodb安装和简单操作


下一篇:SheetJS V0.17.5 导入 Excel 异常修复 Invalid HTML:could not find<table>