3
Я выкопал некоторый CSS-код, который собирает и отбрасывает сердце, чтобы сказать что-то вроде кусочков головоломки. Тем не менее, я не могу заставить это отображать как значок вместе с моим абзацем HTML.Как включить эту анимацию css 'heart' в абзаце
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>Сердце должно быть отображение в центре. Однако, этого не происходит
EDIT: Обновленный пост
, сэр, сделал мой день – bholagabbar
Вы приветствуете ':)' – dippas
Умм это работало для конкретного случая, но она по-прежнему не ИНТ например, хорошо вписываясь в мою страницу. Не могли бы вы посмотреть? Я обновлю код в вопросе. Вы можете проверить его оттуда – bholagabbar