Jump to content
  • 0

Как сделать что бы картинка собиралась из разных частей css


Gleb_M
 Share

Question

Совсем не понятно как сделать что бы картинки накладывались на сайте друг на друга, но с эфектами css
ну так сказать собиралась из разных частей, ну там сначала появляется фон потом человек и дальше солнце.

Код вот такой:

<html>
<head>
<link rel="stylesheet" href="animate.css">
<script src="wow.min.js"></script>
<script>
              new WOW().init();
</script>
<div style="text-align: center">

</head>


<body bgcolor="##006400">

<p><img class= "wow zoomin" data-wow-duration="5s"  src="FON_line_1.png"  width="80%"><p>

<p><img class= "wow zoomin" data-wow-duration="5s" src="man.png"  width="80%"><p>

    
<p><img class= "wow zoomin"  data-wow-duration="5s" src="FON_line_2.png"  width="80%"><p>
<p><img class="wow zoomin"  data-wow-duration="5s" src="FON_line_3.png"  width="80%"><p>
</body>
</html>

вот например в этом коде появляется FON_line_1.png, а дальше человек man.png над этой картинкой, которого надо поставить в правый нижний угол "точно в цель", а он появляется ниже первого фона. Сложность в том что фон тоже хотелось бы что бы появлялся эффектно и человек тоже, а дальше там солнце будет и ещё птицы из гифок.

весь код что написан выше в интернете хорошо объясняют разные люди и поэтому я его сам написал, а остальное ну не могу найти-понять как делать.

помогите пожалусто.

Все фоны это просто прямоугольные плашки размером 1920х900 рх, но я их в процентах как вы видите поставил.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

в какой песочнице?

В 13.08.2017 в 05:13, andrey7287 сказал:

data-wow-delay

это всего лишь задержка.  потом картинка человека появляется в другом месте ниже фона.

Edited by Gleb_M
Link to comment
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
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy