html - 如何在段落中内联此 css 'heart' 动画-6ren

html - 如何在段落中内联此 css 'heart' 动画

转载作者：可可西里更新时间：2023-11-01 13:03:02

我已经挖掘出一些 CSS 代码，可以从拼图之类的东西中组装和分解一颗心。但是，我无法将其作为图标与我的 HTML 段落一起显示。

CSS 非常复杂，因为它使用了很多其他定位，但我可以通过快速破解获得它吗？还是需要更改大量 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>

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

编辑:更新帖子

最佳答案

您可以用 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>

关于html - 如何在段落中内联此 css 'heart' 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36704760/

文章推荐： php - 生成ip和限时下载链接

文章推荐： windows - "Droplet"批处理脚本 - 包含符号的文件名

文章推荐： php - 修复损坏的符号链接(symbolic link)/重新安装 php5

文章推荐： html - 对齐 DIV 中的控件

html - 内联/内联 block 不起作用。 Div 仍然堆积
我之前已经发布了一些这样的代码，试图在正确的位置获得侧边栏链接并以一种特殊的方式看起来，我决定朝着不同的方向前进。我现在需要的是知道我应该做什么来获得我在侧边栏旁边而不是下方标记为“内容”的 div。
html - 内联/内联 block 元素的 CSS 垂直对齐
我试图让多个 inline 和 inline-block 组件在 div 中垂直对齐。这个例子中的span怎么就非要往下推呢？我已经尝试了 vertical-align:middle; 和 verti
html - 内联/内联 block 元素的 CSS 垂直对齐
我试图让多个 inline 和 inline-block 组件在 div 中垂直对齐。这个例子中的span怎么就非要往下推呢？我已经尝试了 vertical-align:middle; 和 verti
html - 内联/内联 block 元素的 CSS 垂直对齐
我试图让多个 inline 和 inline-block 组件在 div 中垂直对齐。这个例子中的span怎么就非要往下推呢？我已经尝试了 vertical-align:middle; 和 verti
html - CSS - 带边框的 UL 内联 LI 改变 block (v) 内联？
我很困惑...所以我在容器中有一个 UL，当我更改 UL 上方的 DIV 时，它似乎会影响 UL 之后的流程...发生了什么事？ DIV 是 block 元素，对吗？和 UL 一样，对吧？所以在这个
Are the "inline" keyword and "inlining" optimization separate concepts?(“内联”关键字和“内联”优化是不同的概念吗？)
我问这个基本问题是为了澄清事实。都提到了这个问题及其目前接受的答案，这是不令人信服的。然而，投票第二多的答案提供了更好的洞察力，但也不是完美的。。在阅读下面的内容时，请尝试区分内联关键字和“内联”概念
悬停时javascript更改图像(内联)
function roll_over(img_name, img_src) { document[img_name].src = img_src; } 我使用此代码来显示 T 恤并在鼠标悬停时显
angularjs - 内联 if 中的多个语句
是否可以在 AngularJS 表达式的内联 if 语句中包含多个语句？例如，以下失败: ng-change="someCondition() ? doA(); doB() : doC()" ng-c
R 内联 Markdown
我在 RStudio 中使用 R Markdown 创建一个混合 Markdown 和 R 输出的报告。我知道如何在 Markdown 中使用内联 R 表达式，但我想知道如何进行相反的操作，即在 R
CKEditor 内联 - 无法添加表单标签
我们无法将表单标签添加到内联 CKEditor来自 chrome 和 IE，但它在 Firefox 中运行良好。如果我们将表单添加到内联 CKEditor，它会删除表单标签。例如:如果我在 Fire
Javascript 广播显示无/内联
在我的 HTML 代码中，我有两个输入: Yes No 现在我有一个默认情况下的 div，因为它的样式显示内联，我希望当我单击“否”时，它会使其样式不显示，而"is"则会使其内联，所以我制作了此功
PowerShell 内联 If (IIf)
如何在 PowerShell 中创建带有内联 If 的语句(IIf，另请参阅: Immediate if 或 ternary If )？如果您也认为这应该是 native PowerShell 函数
Django 内联-允许添加禁用编辑
嗨。我在阅读以下问题后提出这个问题:Question_1和 Question_2 。 Question_1 没有任何合适的答案，Question_2 有替代解决方案，但不是完美的解决方案。这里我有两
Python 内联 if 语句
有人可以帮我解决以下语法或告诉我是否可行吗？因为我要修改 if ... else ... 条件。我不想在列表中添加重复的值，但我收到了 KeyError。其实我不太熟悉这种说法: twins[val
python - 内联 if 语句的允许语法
有时我喜欢滥用 python 语法，特别是短的 if block : if True : print 'Hello' else : print 'Bye' 现在我尝试对函数定义做同样的事情: i
内联 block 中的绝对定位元素
我在尝试将 Logo 容器底部对齐到零高度父级时遇到了问题。最好，我想用纯 CSS 来实现这一点。在附带的 fiddle 中，我想让 control-group 的底部与零高度 panel 元素的顶
Javascript 内联 HTML
我需要内联编写 HTML 和 Javascript 代码，即在 HTML 正文中(需要显示一些随机整数值)我搜索了很多博客，但到目前为止没有找到任何帮助。请指教。我想实现这个功能: Offer
虚拟继承函数的 C++ 内联
好吧，这更多的是要求澄清 C++ 的一个特性是如何工作的，而不是一个是否可以的答案。我将从解释我遇到的问题开始，因为直接的答案是它不是一个很好的类设计。我有一个类正在形成一个无法维护的 if 语句
c# - 内联 If 语句中的默认条件
我正在我的 C# 代码中获取一个数据库行。行包含 3 个不同的标志(3 列具有 true 或 false 值)。这些列中只有一列为真，这将决定该对象的类型。我如何在一行代码中确定该对象的类型。如果所有
CSS 字体粗体 - 内联
在 CSS 中，我如何才能只将电话号码加粗，以便它与声明的其余部分内联，但电话号码是加粗的？而不是在 HTML 中这样做: › Start posting jobs today– 0

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在段落中内联此 css 'heart' 动画