如何在段落中内联这个CSS“心形”动画

Question

我找到了一些CSS代码，可以将一些拼图组装成一个心形。但是，我无法将其与我的HTML段落一起显示为图标。

由于该CSS使用了许多其他定位方式，因此它相当复杂。我能否通过快速hack来使其内联呈现，还是需要更改大量CSS？

我已经尝试将方向更改为内联等，但似乎不起作用。

/*!
 * Start Bootstrap - Grayscale Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    width: 100%;
    height: 100%;
    font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #fff;
    background-color: #000;
}

html {
    width: 100%;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: left !important;
}

p {
    margin: 0 0 25px;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
}

@media(min-width:768px) {
    p {
        margin: 0 0 35px;
        font-size: 20px;
        line-height: 1.6;
    }
}

a {
    color: #42dca3;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:focus {
a:hover,
    text-decoration: none;
    color: #1d9b6c;
}

.light {
    font-weight: 400;
    font-size: 18px;
    font-family: Verdana;
}

.navbar-custom {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #000;
}

.navbar-custom .navbar-brand {
    font-weight: 700;
}

.navbar-custom .navbar-brand:focus {
    outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
    outline: 0;
}

.navbar-custom a {
    color: #fff;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover {
    outline: 0;
    color: rgba(255,255,255,.8);
    background-color: transparent;
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
    outline: 0;
    background-color: transparent;
}

.navbar-custom .nav li.active {
    outline: 0;
}

.navbar-custom .nav li.active a {
    background-color: rgba(255,255,255,.3);
}

.navbar-custom .nav li.active a:hover {
    color: #fff;
}

@media(min-width:768px) {
    .navbar-custom {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .navbar-custom.top-nav-collapse {
        padding: 0;
        border-bottom: 1px solid rgba(255,255,255,.3);
        background: #000;
    }
}

@-webkit-keyframes pulse {    
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes pulse {    
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

.content-section {
    padding-top: 100px;
}

@media(min-width:767px) {
    .content-section {
        padding-top: 100px;
    }
}


img::selection {
    background: 0 0;
}

img::-moz-selection {
    background: 0 0;
}

body {
    webkit-tap-highlight-color: rgba(255,255,255,.2);
}

.heart {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 40%;
  overflow: hidden;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  will-change: transform;
}
.heart:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: animation 3.2s cubic-bezier(1, 0, 0, 1) 0.5s infinite both alternate;
  animation: animation 3.2s cubic-bezier(1, 0, 0, 1) 0.5s infinite both alternate;
  background-image: -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #871515 6.2625%, transparent 6.2625%);
  background-image: linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(45deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(135deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(45deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(135deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(45deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(135deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(45deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(135deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(135deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(135deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(135deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(45deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(135deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%);
  background-position: 12px 17px, 37px 1px, 3px 36px, 33px 27px, 1px 38px, 12px 18px, 39px 20px, 34px 33px, 26px 9px, 17px 30px, 21px 15px, 32px 34px, 30px 18px, 24px 35px, 18px 17px, 32px 21px, 33px 21px, 28px 7px, 13px 38px, 13px 20px, 26px 9px, 33px 32px, 16px 7px, 7px 11px, 38px 25px, 4px 25px, 34px 15px, 13px 33px, 32px 19px, 14px 11px, 28px 18px, 5px 8px, 5px 25px, 15px 14px, 30px 15px, 2px 14px, 23px 40px, 10px 37px, 34px 20px, 8px 18px, 32px 37px, 16px 7px, 23px 9px, 13px 32px, 33px 31px, 26px 3px, 31px 2px, 27px 40px, 23px 2px, 11px 8px;
}
@-webkit-keyframes animation {
  50%, 100% {
    background-position: 10px 10px, 10px 10px, 5px 15px, 5px 15px, 10px 20px, 10px 20px, 15px 5px, 10px 10px, 10px 10px, 15px 15px, 10px 15px, 15px 20px, 15px 20px, 10px 25px, 15px 25px, 15px 10px, 15px 10px, 20px 15px, 20px 15px, 15px 20px, 15px 20px, 20px 25px, 20px 25px, 15px 30px, 20px 30px, 25px 10px, 20px 10px, 25px 15px, 20px 15px, 25px 20px, 25px 20px, 20px 25px, 20px 25px, 25px 30px, 20px 30px, 25px 5px, 30px 10px, 30px 10px, 25px 15px, 25px 15px, 30px 20px, 25px 20px, 30px 25px, 25px 25px, 30px 10px, 30px 10px, 35px 15px, 35px 15px, 30px 20px, 30px 20px;
  }
}
@keyframes animation {
  50%, 100% {
    background-position: 10px 10px, 10px 10px, 5px 15px, 5px 15px, 10px 20px, 10px 20px, 15px 5px, 10px 10px, 10px 10px, 15px 15px, 10px 15px, 15px 20px, 15px 20px, 10px 25px, 15px 25px, 15px 10px, 15px 10px, 20px 15px, 20px 15px, 15px 20px, 15px 20px, 20px 25px, 20px 25px, 15px 30px, 20px 30px, 25px 10px, 20px 10px, 25px 15px, 20px 15px, 25px 20px, 25px 20px, 20px 25px, 20px 25px, 25px 30px, 20px 30px, 25px 5px, 30px 10px, 30px 10px, 25px 15px, 25px 15px, 30px 20px, 25px 20px, 30px 25px, 25px 25px, 30px 10px, 30px 10px, 35px 15px, 35px 15px, 30px 20px, 30px 20px;
  }
}

span {
  display: inline-block
}
span:first-of-type {
  margin-right: 10px
}
span:last-of-type {
  margin-left: 40px
}

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

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>About</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/about.css" rel="stylesheet">
    <link href="css/heart.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <!-- Navigation -->
    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <i class="fa fa-bars"></i>
                </button>
                 <a class="navbar-brand page-scroll" href="index.html">
                     <span class="name">Hello</span>
                     <span name="surname">World </span>
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#download">Download</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- About Section -->
    <section id="about" class="container content-section text-center">
        <div class="row">
            <div class="col-xs-12 col-sm-8">
                <h2>Hi there!</h2>
                <p>Lore ipmaosdkfna;lskdnf;alksdnf;aklsjdf a;lsdkjf;alskdjf;alksdjf;alskdjfa;lskdjf;a.asfasdf</p>
                <p>
  <span>I</span><span class="heart"></span><span>code</span>
</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-8">
             
            </div>
        </div>
    </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script>
        function collapseNavbar() {
                $(".navbar-fixed-top").addClass("top-nav-collapse");
        }

        $(window).scroll(collapseNavbar);
        $(document).ready(collapseNavbar);

        // jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function() {
            $('a.page-scroll').bind('click', function(event) {
                var $anchor = $(this);
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500, 'easeInOutExpo');
                event.preventDefault();
            });
        });

        // Closes the Responsive Menu on Menu Item Click
        $('.navbar-collapse ul li a').click(function() {
          if ($(this).attr('class') != 'dropdown-toggle active' && $(this).attr('class') != 'dropdown-toggle') {
            $('.navbar-toggle:visible').click();
          }
        });

    </script>

</body>

</html>

心形应该显示在中间。但是这并没有发生。

编辑：更新帖子

- gabbar0x

Answer 1

您可以使用p标签（也可以是其他标签）将所有文本包装起来，并使用span标签将每个单词包装起来，在对代码进行一些微调后，您就可以轻松实现：

body {
  background-color: #222;
}
.heart {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 40%;
  overflow: hidden;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  will-change: transform;
}
.heart:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: animation 3.2s cubic-bezier(1, 0, 0, 1) 0.5s infinite both alternate;
  animation: animation 3.2s cubic-bezier(1, 0, 0, 1) 0.5s infinite both alternate;
  background-image: -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #871515 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #eb7d7d 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #b31c1c 6.2625%, transparent 6.2625%), -webkit-linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), -webkit-linear-gradient(225deg, #e45151 6.2625%, transparent 6.2625%), -webkit-linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), -webkit-linear-gradient(315deg, #871515 6.2625%, transparent 6.2625%);
  background-image: linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(45deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(135deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(45deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(135deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(45deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(135deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(45deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(135deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%), linear-gradient(135deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(135deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(135deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(135deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(45deg, #eb7d7d 6.2625%, transparent 6.2625%), linear-gradient(135deg, #b31c1c 6.2625%, transparent 6.2625%), linear-gradient(-45deg, #c91f1f 6.2625%, transparent 6.2625%), linear-gradient(-135deg, #e45151 6.2625%, transparent 6.2625%), linear-gradient(45deg, #e03b3b 6.2625%, transparent 6.2625%), linear-gradient(135deg, #871515 6.2625%, transparent 6.2625%);
  background-position: 12px 17px, 37px 1px, 3px 36px, 33px 27px, 1px 38px, 12px 18px, 39px 20px, 34px 33px, 26px 9px, 17px 30px, 21px 15px, 32px 34px, 30px 18px, 24px 35px, 18px 17px, 32px 21px, 33px 21px, 28px 7px, 13px 38px, 13px 20px, 26px 9px, 33px 32px, 16px 7px, 7px 11px, 38px 25px, 4px 25px, 34px 15px, 13px 33px, 32px 19px, 14px 11px, 28px 18px, 5px 8px, 5px 25px, 15px 14px, 30px 15px, 2px 14px, 23px 40px, 10px 37px, 34px 20px, 8px 18px, 32px 37px, 16px 7px, 23px 9px, 13px 32px, 33px 31px, 26px 3px, 31px 2px, 27px 40px, 23px 2px, 11px 8px;
}
@-webkit-keyframes animation {
  50%, 100% {
    background-position: 10px 10px, 10px 10px, 5px 15px, 5px 15px, 10px 20px, 10px 20px, 15px 5px, 10px 10px, 10px 10px, 15px 15px, 10px 15px, 15px 20px, 15px 20px, 10px 25px, 15px 25px, 15px 10px, 15px 10px, 20px 15px, 20px 15px, 15px 20px, 15px 20px, 20px 25px, 20px 25px, 15px 30px, 20px 30px, 25px 10px, 20px 10px, 25px 15px, 20px 15px, 25px 20px, 25px 20px, 20px 25px, 20px 25px, 25px 30px, 20px 30px, 25px 5px, 30px 10px, 30px 10px, 25px 15px, 25px 15px, 30px 20px, 25px 20px, 30px 25px, 25px 25px, 30px 10px, 30px 10px, 35px 15px, 35px 15px, 30px 20px, 30px 20px;
  }
}
@keyframes animation {
  50%, 100% {
    background-position: 10px 10px, 10px 10px, 5px 15px, 5px 15px, 10px 20px, 10px 20px, 15px 5px, 10px 10px, 10px 10px, 15px 15px, 10px 15px, 15px 20px, 15px 20px, 10px 25px, 15px 25px, 15px 10px, 15px 10px, 20px 15px, 20px 15px, 15px 20px, 15px 20px, 20px 25px, 20px 25px, 15px 30px, 20px 30px, 25px 10px, 20px 10px, 25px 15px, 20px 15px, 25px 20px, 25px 20px, 20px 25px, 20px 25px, 25px 30px, 20px 30px, 25px 5px, 30px 10px, 30px 10px, 25px 15px, 25px 15px, 30px 20px, 25px 20px, 30px 25px, 25px 25px, 30px 10px, 30px 10px, 35px 15px, 35px 15px, 30px 20px, 30px 20px;
  }
}
.absolute {
  position: absolute;
  color: #fff;
  left: 50%;
  top: 50%
}
span {
  display: inline-block
}
span:first-of-type {
  margin-right: 10px
}
span:last-of-type {
  margin-left: 40px
}

<p class="absolute">
  <span>I</span><span class="heart"></span><span>code</span>
</p>

- dippas

---

您先生，您让我的一天变得美好了。 - gabbar0x

这个针对特定情况的方法可以工作，但它仍然没能良好地整合到我的页面中。你能看一下吗？我将在问题中更新代码。你可以从那里检查它。 - gabbar0x

嗯，我正在制作自己的网站，这是我需要它的具体情况。我已经使用了一个在线模板，但我对其进行了重大改变。 - gabbar0x

@bholagabbar 你看到我的最新评论和更新的答案了吗？ - dippas

让我们在聊天中继续这个讨论。 - dippas