사진에 마우슬올리면 화면이 계속전환 웹

로그인

회원가입

환경설정

웃대 스페셜: 월간 베스트; 답글 베스트

유머/웹툰: 웃긴 자료; 대기 자료; 웃긴 제목; 대기 제목; 웃대툰; 신예툰

창작/예술/친목: 공포; 사진; 그림낙서; 왁자지껄

인공 지능: 패션; 얼굴 인식; 웃파고

테마 게시판

웃대 서비스: 웃대 개념; 아이템 몰; 웹소설; 상사가 떳어요!

프로그래밍

| 오늘의베스트 | 주간베스트 | 월간베스트 |

제목

사진에 마우슬올리면 화면이 계속전환( 웹) [3]

작성자

낚시왕김태공

쪽지 | 작성자 글보기

번호 6604 추천 0 반대 0 답글 3 조회 215 작성시간 2018-11-02 22:43:56

추천되었습니다.

← CTRL+C 로 복사하고 CTRL+V 로 붙여넣으세요!
기기를 감지하여 최적 URL 로 보내줍니다.

단축 URL: https://humoruniv.com/program6604 URL 복사

바다 땅 화염 번개 라는 사진이잇다면 이사진을 css 만이용해서 마우스를 올렸을 때 번개->화염->땅-> 바다 이런식으로 계속변환하고싶은데
일단 이미지변환하는 함수같은게 없으니까 cover로 겹치게한다음에 사진에따라 각각 hover class를 주어줬는데 이방식은 사진이많으면 힘들거같은데다가
hover하고나면 이미지가 다시돌아오니안되네요... 좋은방법이있을까요?

== 소스코드 = =

<html>
<head>
  <meta charset="utf-8">
  <title>change animation</title>
  <style type="text/css">
  .cover{
    position: relative;
    margin :0 auto;
  }
  .cover img{
    position: absolute;
    -webkit-transition: linear 3s;
    -moz-transition:  linear 3s;
    transition: : linear 3s;
  }
  .cover img.번개:hover
  {
      opacity: 0;
    }
    .cover img.화염:hover
    {
        opacity: 0;
      }
      .cover img.땅:hover
      {
          opacity: 0;
        }
</style>
</head>
<body>
  <div class= "cover">
  <img src="바다.jpg" alt="바다">
  <img class="땅" src="땅.jpg" alt="땅">
  <img class="화염" src="화염.jpg" alt="화염">
  <img class="번개" src="번개.jpg" alt ="번개">
</div>
</body>
</html>

※ 로그인 없이 추천 가능

추천되었습니다.

▲ 다음글	내 컴퓨터 스펙인데 이걸로 프로그래밍 가능할까?	yes맨잉	2 0 1 451	2018-11-03 [18:48]
▼ 이전글	게임 한글패치 같은거 제작할 수 있으려면	rosenrose	0 0 8 277	2018-11-02 [20:12]

답글마당 (3)

낚시왕김태공

모바일로보면 사진뜨내 ㄷㄷ..

추천

반대

2018-11-09 16:43:18

상대방에 대한 배려는 네티켓의 기본입니다.게시물에 상관없는 답글이나 추천유도성 답글을 달지 마세요.

스포일러성 답글이 신고되거나 발견되면 이유불문 삭제 혹은 정학처리 됩니다. 유의 부탁 드립니다.

답글쓰기
한글 512자

[공지] ① 웃긴대학의 운영목적은 "남을 행복하게 만들어주기" 입니다. 악성답글, 상처주는 답글, 음란 답글을 작성하지 말아 주세요.

② 내가 옳다고 하더라도 조용히 신고만 하시고 상대방을 비난하는 글을 쓰지는 마세요. 이곳은 옳고 그름을 가리는 곳이 아닙니다.
③ 지속적으로 분란을 일으키는 회원은 옳고 그름을 막론하고 정학 혹은 차단조치됩니다.
④ 정치 자료, 남녀 분란 자료, 저격 자료, 분란 야기 게시물은 강력하게 제재합니다. 자세히보기

▲ 다음글	내 컴퓨터 스펙인데 이걸로 프로그래밍 가능할까?	yes맨잉	2 0 1 451	2018-11-03 [18:48]
▼ 이전글	게임 한글패치 같은거 제작할 수 있으려면	rosenrose	0 0 8 277	2018-11-02 [20:12]

← CTRL+C 로 복사하고 CTRL+V 로 붙여넣으세요!