如何内联这个css＆＃39; heart＆＃39;一段内的动画

Question

我挖出了一些CSS代码，这些代码组装和解释了一个像拼图一样的东西。但是，我无法将其与HTML段落一起显示为图标。

CSS非常复杂，因为它使用了很多其他定位，但是我可以通过快速入侵来实现内联，还是会涉及更改很多CSS？

我已尝试将方向更改为内联和内容，但这似乎无法正常工作。

＆＃13;

＆＃13;

/*!
 * 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
}

＆＃13;

<!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>

＆＃13;

＆＃13;

＆＃13;

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

编辑：更新了帖子

Answer 1

你可以用p（可能是另一个标签）包装所有文本，并用span包含每个单词，然后对你的代码进行一些调整：

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;