登录 | 注册 | FAQ
Anonymous

Анимация

+ 发表回复

3 篇帖子 分页: 1 / 1


Анимация

rsandrey » 周二 6月 10, 2014 10:30 am

Всем привет. У меня такая проблемка. Есть анимация, которая срабатывает после нажатия на кнопку. А как сделать так, чтобы анимированный блок(выдвигается после нажатия на кнопку) вернулся на свое место, как до нажатия кнопки? И еще один вопрос, не совсем по теме: как сделать так, чтобы эффект прозрачности применялся только к блоку, а элементы внутри оставались непрозрачными? P.S пробовал так: #block:not(h1) { opacity: 0.6; } не получается. Вот код страницы:

<html>
<head>
<style type = "text/css">
#block {
position: absolute;
margin-top: -150px;
transition: 1s;
width: 100%;
padding-top: 5px;
padding-bottom: 50px;
background-color: #00CC00;
opacity: 0.6;
margin-left: 0px;
margin-right: 0px;
}

.link {
padding-left: 250px;
padding-right: 250px;
padding-top: 20px;
padding-bottom: 20px;
background-color: DarkTurquoise;
text-align: center;
text-decoration: none;
}
</style>
<meta charset="utf-8">
<link rel = "stylesheet" type = "text/css" href =" animation.css" />
<script language = "JavaScript">
function fun() [color=#000000][/color]{
window.document.getElementById("block").style.cssText = "margin-top: -10px; transition: 0.5s;";
}
</script>
</head>
<body>
<div id = "block">
<h1><center>Ссылка не работает</center></h1>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><a href = "#" class = "link" onClick = "fun()">Link</a></center>
</body>
</html>

Заранее спасибо.
头像

rsandrey

  • 帖子: 1
  • 注册: 周二 6月 10, 2014 10:08 am

Re: Анимация

XainPro » 周五 6月 13, 2014 10:34 am

http://www.w3schools.com/css/css3_animations.asp
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: Анимация

Bluelinero » 周一 3月 02, 2015 7:07 am

Oh, I've never seen anything like this before Also a need to follow some.
头像

Bluelinero

  • 帖子: 1
  • 注册: 周一 3月 02, 2015 6:57 am


+ 发表回复

分页: 1 / 1