Интересная анимация для текста, которая имитирует хаотичное движение сердечек. Например, подойдет для оформления заголовков на сайте знакомств.
Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт, который генерирует движение сердечек по математической формуле. Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов. Если вы затрудняетесь это сделать, то можете скачать готовый пример.
Скачать готовый пример
Сердечки
body .textcontainer { padding: 40px 0; text-align: center; } body .particletext { text-align: center; font-size: 48px; position: relative; } body .particletext.hearts > .particle { opacity: 0; position: absolute; background-color: #cc2a5d; -webkit-animation: hearts 3s ease-in infinite; animation: hearts 3s ease-in infinite; } body .particletext.hearts > .particle:before, body .particletext.hearts > .particle:after { position: absolute; content: ''; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #cc2a5d; } body .particletext.hearts > .particle:before { -webkit-transform: translateX(-50%); transform: translateX(-50%); } body .particletext.hearts > .particle:after { -webkit-transform: translateY(-50%); transform: translateY(-50%); } @-webkit-keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } @keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } }
function initparticles() { hearts(); } function hearts() { $.each($(".particletext.hearts"), function(){ var heartcount = ($(this).width()/50)*5; for(var i = 0; i <= heartcount; i++) { var size = ($.rnd(60,120)/10); $(this).append(''); } }); } jQuery.rnd = function(m,n) { m = parseInt(m); n = parseInt(n); return Math.floor( Math.random() * (n - m + 1) ) + m; } initparticles();
Комментарии ()