Jump to content

Анимация

Skanexis
Skanexis
in Invision Community 4 Support

Featured Replies

Posted
comment_164552

Как сделать такую анимация?

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22499-animaciya/
    Share on other sites
    comment_164553

    ооо, круто! Я бы тоже хотел узнать, как такое сделать )

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22499-animaciya/?&do=findComment&comment=164553
    Share on other sites
    comment_164554

    Изучайте css! 

    .cForumList .ipsDataItem {
	background:#272e48;
	float:left;
	width:100%;
	margin:0 auto 6px;
	padding:6px;
	border-radius:6px;
	border:1px solid #2e3655;
	-webkit-box-shadow:0 1px 20px 0 rgba(0,0,0,0.06);
	box-shadow:0 1px 20px 0 rgba(0,0,0,0.06);
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out
}

.cForumList .ipsDataItem:hover {
	z-index:10;
	-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	-webkit-transform:scale(1);
	-moz-transform:scale(1.01);
	-o-transform:scale(1.01);
	transform:scale(1.01)
}

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22499-animaciya/?&do=findComment&comment=164554
    Share on other sites
    comment_164608
    В 23.10.2020 в 12:42, Respected сказал:

    Изучайте css! 

    
.cForumList .ipsDataItem {
	background:#272e48;
	float:left;
	width:100%;
	margin:0 auto 6px;
	padding:6px;
	border-radius:6px;
	border:1px solid #2e3655;
	-webkit-box-shadow:0 1px 20px 0 rgba(0,0,0,0.06);
	box-shadow:0 1px 20px 0 rgba(0,0,0,0.06);
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out
}

.cForumList .ipsDataItem:hover {
	z-index:10;
	-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	-webkit-transform:scale(1);
	-moz-transform:scale(1.01);
	-o-transform:scale(1.01);
	transform:scale(1.01)
}

     

    А куда его вставлять? Помогите, а то я вообще не разбираюсь ни в CSS ни в движке IPS

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22499-animaciya/?&do=findComment&comment=164608
    Share on other sites
    comment_164609

    Litesm нужно вставлять custom.css

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22499-animaciya/?&do=findComment&comment=164609
    Share on other sites
    comment_164610

    Вставил код и у меня зажопилось всё. У меня стоит стандартный шаблон. Да, блоки анимируются но они стали темными

    95644443_2020-10-2814_26_05.thumb.png.10f613cb18ecb213133c9496a570a0ec.png

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22499-animaciya/?&do=findComment&comment=164610
    Share on other sites
    comment_164611
    1 минуту назад, Litesm сказал:

    Вставил код и у меня зажопилось всё. У меня стоит стандартный шаблон. Да, блоки анимируются но они стали темными

     

    добавить только этот код 

    .cForumList .ipsDataItem:hover {
	z-index:10;
	-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	-webkit-transform:scale(1);
	-moz-transform:scale(1.01);
	-o-transform:scale(1.01);
	transform:scale(1.01)
}

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22499-animaciya/?&do=findComment&comment=164611
    Share on other sites
    comment_164612
    4 минуты назад, roonovoorsk сказал:

    добавить только этот код 

    
.cForumList .ipsDataItem:hover {
	z-index:10;
	-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	-webkit-transform:scale(1);
	-moz-transform:scale(1.01);
	-o-transform:scale(1.01);
	transform:scale(1.01)
}

     

    сработало )) спасибо! 

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22499-animaciya/?&do=findComment&comment=164612
    Share on other sites
    comment_164613

    Litesm можно поставить такой код. скомбинировать оба кода в один. и оно плавней будет работать.

    Спойлер 
    
.cForumList .ipsDataItem:hover {
	z-index:10;
	-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	-webkit-transform:scale(1);
	-moz-transform:scale(1.01);
	-o-transform:scale(1.01);
	transform:scale(1.01)
      
      -webkit-box-shadow:0 1px 20px 0 rgba(0,0,0,0.06);
	box-shadow:0 1px 20px 0 rgba(0,0,0,0.06);
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out    
}

     

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22499-animaciya/?&do=findComment&comment=164613
    Share on other sites
    comment_164615
    2 минуты назад, SlawkA сказал:

    Litesm можно поставить такой код. скомбинировать оба кода в один. и оно плавней будет работать.

      Скрыть контент 
    

.cForumList .ipsDataItem:hover {
	z-index:10;
	-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.02);
	-webkit-transform:scale(1);
	-moz-transform:scale(1.01);
	-o-transform:scale(1.01);
	transform:scale(1.01)
      
      -webkit-box-shadow:0 1px 20px 0 rgba(0,0,0,0.06);
	box-shadow:0 1px 20px 0 rgba(0,0,0,0.06);
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out    
}

     

     

    Действительно плавнее, оно очень мягко и еле подсвечивает )

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22499-animaciya/?&do=findComment&comment=164615
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Ответить в этой теме...
    https://ipbmafia.ru/topic/22499-animaciya/
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.