Мне интересно, как вы можете создать эффект «змеи» вокруг обода объекта с помощью javascript/css.Snake-Like Moving Glow вокруг элемента
Этот эффект будет создать когда-нибудь анимацию вокруг объекта, который выглядит как маленький белый пробкового движется по краю объекта (похожий на свечение)
(редактирует этот вопрос, когда я научиться правильно фразировки)
У меня есть небольшая версия CSS3 этого:
небольшого контейнера и наша змея:
<div id="cont"></div>
<div class="snake"></div>
А вот CSS Magic:
#cont {
width: 150px;
height: 150px;
background: #000;
margin: 10px;
}
.snake {
width: 5px;
height: 5px;
background: #f00;
position: absolute;
top: 5px;
left: 15px;
animation: around 5s infinite;
}
@keyframes around
{
0% { left: 15px; top: 5px; }
25% { left: 165px; top: 5px; }
50% { top: 160px; left: 165px; }
75% { left: 15px; top: 160px; }
100% { top: 5px; left: 15px; }
}
+1 приятный и простой. Демонстрация не содержит тегов, специфичных для браузера, поэтому может показаться, что они не работают во всех браузерах (например, сафари). – dc5
@ dc5. Да, гораздо проще, чем другие предлагаемые решения. Я был ленив, чтобы добавить теги, специфичные для браузера, но так как теперь он отвечает +1. Я должен соблюдать это. – Starx
[улучшенная версия] (http://jsfiddle.net/Ly7DU/3/) с линейным движением .-) – Bergi
Создайте четыре изображения, которые должны быть точно больше, чем элемент, поэтому, когда вы смотрите на него, элемент является передним планом на фоне, который имеет «зыбкие» границы.
Создайте один с фиксированным цветом. И сделайте его «злым» вокруг границ. Убедитесь, что он немного больше, чем сам предмет.
Следующее изображение должно быть другого цвета, то есть светлее, чтобы создать эффект свечения.
Следующее изображение должно быть цветом, используемым в первом изображении, но точно в обратном порядке. Все гребни в первом изображении должны быть впадинами здесь (чтобы сделать его злым).
Четвертое изображение опять же, как и третье, но с более светлым цветом.
Теперь, используя JQuery, используйте «анимацию» и измените фон элемента и выполните цикл между этими четырьмя изображениями в этом порядке. Это создает эффект «свечения и ползания».
Вы можете расширить это за пределы четырех изображений, добавить больше, чтобы улучшить эффекты.
Вероятно, это могло бы помочь
ниже код перемещает точку в пределах указанных границ. Пожалуйста, смотрите: что регулировать ширину и высоту одной и той же точки, вы можете иметь змея как существо Посмотрите на Fiddle
<html>
<head>
<style>
#midDiv{
float:left;
width: 100px;
height: 100px;
background:rgb(0,0,0);
}
#topDiv,#bottomDiv{
float:left;
width: 110px;
height:5px;
background: red;
position:relative;
}
#leftDiv, #rightDiv{
width:5px;
float:left;
height: 100px;
background: blue;
position:relative;
}
#bodyWrapper{
width: 120px;
height: 120px;
}
#centerDiv{
float:left;
}
.animateObject{
z-index:2;
background: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#topDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#rightDiv").append(div);
$(div).css({position: "absolute"});
$(div).animate({
top: 100
},
2000, function(){
$("#rightDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#rightDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#bottomDiv").append(div);
$(div).css({position: "absolute", right: 0});
$(div).animate({
right: 100
},
2000, function(){
$("#bottomDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#bottomDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#leftDiv").append(div);
$(div).css({position: "absolute", bottom: -5});
$(div).animate({
bottom: 100
},
2000, function(){
$("#leftDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#leftDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#topDiv").append(div);
$(div).css({position: "absolute", left: 0});
$(div).animate({
left: 105
},
2000, function(){
$("#topDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#topDiv").trigger({type: "animcomplete", time: new Date() });
});
</script>
</head>
<body>
<div id="bodyWrapper">
<div id="topDiv"></div>
<div id="centerDiv">
<div id="leftDiv"></div>
<div id="midDiv"></div>
<div id="rightDiv"></div>
</div>
<div id="bottomDiv"></div>
</div>
</body>
Это перемещает точку в пределах указанных границ. Пожалуйста, смотрите: что, отрегулировав ширину и высоту той же точки, у вас может быть змея, такая как существо.
Хей после быстрой рекламы в javascript/css3 animaition.
взглянуть на эту demo
Этот предыдущий вопрос на StackOverflow сделок с эффектом границы свечения.
https://stackoverflow.com/questions/15008931/animated-glowing-border-using-css-js link
вы можете также использует библиотеку JavaScript анимации, такие как createjs. http://www.createjs.com/#!/TweenJS
Настоящий имп на голосование @Starx. Я сделал независимым от измерения размерность #snake и дал эффект свечения с теневой коробкой. Demo
<div id="cont">
<div class="snake"></div>
</div>
#cont {
/* some dimensions */
position: relative;
}
.snake {
position: absolute;
z-index: -1;
width: 0px;
height: 0px;
background: #f00;
border-radius: 5px;
box-shadow: 0px 0px 15px 15px red;
animation: around 4s linear infinite,
glow .7s alternate-reverse ease-in-out infinite;
}
@keyframes around {
0% { left: 0; top: 0; }
25% { left: 100%; top:0; }
50% { left: 100%; top: 100%; }
75% { left: 0; top: 100%; }
100% { left: 0; top: 0; }
}
@keyframes glow {
0% { opacity: .2; }
100% { opacity: 1; }
}
Multiple snakes :-)
Интересная ... Светящаяся змея Голова :) +1 – Starx
Звучит как прохладный вызов –
Ого, я на самом деле очень хочу, чтобы найти ответ на это, потому что я всегда задавался вопросом, что. –
«Бесконечная анимация» - это просто, тяжелая часть - это сделать ее;) – dc5