Правильное отображение изображения с помощью CSS3

Как сделать изображение на экране внутри макета телефона появляться, когда я нахожу макет телефона, не затрагивая анимацию веб-кита изображения на экране? Там есть учебник Im follow, и я правильно следил за всеми вещами, но зависание макета телефона на самом деле не работает для изображения. Кстати, вот тут Im следующего here Правильное отображение изображения с помощью CSS3

пожалуйста, вы можете просто проверить консоли JavaScript для просмотра файлов CSS его :-)

Более подробной информации here

HTML часть:

<body> 
    <div id="nexus-mockup"><img src="http://i.imgur.com/dP1JFcJ.png"></div> 
    <div id="screen-image"><img src="http://i.imgur.com/F0YpTV7.gif" width="280" height="500"></div> 
</body>

Часть CSS:

#nexus-mockup { 
position: absolute; 
top: 7.3%; 
left: 31.6%; 
} 
#screen-image { 
position: absolute; 
top: 16.5%; 
left: 35.7%; 
-webkit-animation: crt-off 0.3s 0s 1; 
    -webkit-animation-timing-function: ease-out; 
    -moz-animation: crt-off 0.3s 0s 1; 
    -moz-animation-timing-function: ease-out; 

    opacity: 0.0; 
} 
#nexus-mockup:hover #screen-image { 
    -webkit-animation: crt-on 0.3s 0s 1; 
    -webkit-animation-timing-function: ease-out; 
    -moz-animation: crt-on 0.3s 0s 1; 
    -moz-animation-timing-function: ease-out; 
    opacity: 1.0; 
} 

@-webkit-keyframes crt-on { 
    0% { 
     opacity: 0.0; 
     -webkit-transform: scale(0.5, 0.005); 
     -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0); 
    } 
    40% { 
     opacity: 1.0; 
    } 
    70% { 
     -webkit-transform: scale(1.0, 0.005); 
     -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0); 
    } 
    100% { 
     -webkit-transform: scale(1.0, 1.0); 
    } 
} 
@-webkit-keyframes crt-off { 
    0% { 
     -webkit-transform: scale(1.0, 1.0); 
     opacity: 1.0; 
    } 
    40% { 
     -webkit-transform: scale(1.0, 0.005); 
     -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0); 
    } 
    70% { 
     opacity: 1.0; 
    } 
    100% { 
     opacity: 0.0; 
     -webkit-transform: scale(0.5, 0.005); 
     -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0); 
    } 
}

источник

2014-03-11 brettbrdls

Sibling Selector в CSS является '+' –

Чтобы применить новые правила CSS для элемента sibling you need to use +.

#nexus-mockup:hover + #screen-image { 
}

Подробнее: Adjacent Sibling Selector

источник

2014-03-11 18:20:03

WOW! это круто! Большое спасибо за быстрый ответ ха-ха. Спасибо! Будешь ждать тебя через 7 минут :) СПАСИБО! – brettbrdls

@bretbardolees добро пожаловать! –

У вас есть несколько ошибок, которые мешают этим работать.

1) Вы используете правило css для одного контейнера элемента внутри другого.

<div id="nexus-mockup"><img src="http://i.imgur.com/dP1JFcJ.png"></div> 
<div id="screen-image"><img src="http://i.imgur.com/F0YpTV7.gif" width="280" height="500"></div>

изменения:

<div id="nexus-mockup"> 
     <img src="http://i.imgur.com/dP1JFcJ.png" /> 
     <div id="screen-image"></div> 
    </div>

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

Вот рабочий jsFiddle: http://jsfiddle.net/6jP37/14/

источник

2014-03-11 18:37:11

Правильное отображение изображения с помощью CSS3

ответ

Смежные вопросы