달리는 하트와 역동적인 물방울 효과를 구현하기 위해 HTML5+css3을 사용한 샘플 코드 공유에 대한 자세한 설명

바람이 불고, 구름이 날고, 전사들이 사방으로 행진하고 있습니다. HTML5+css3, 배우지 않으면 할 수 없습니다. 나는 수년 동안 웹 개발을 해오면서 많은 언어의 흥망성쇠를 목격했습니다. 사실 프로그래머로서 가장 어려운 일은 매일매일 대기업의 새로운 프레임워크와 언어를 계속해서 따라잡는 것입니다. (이것의 가장 먼저 가장 큰 타격을 받는 사람은 .net 프로그래머입니다. mvc 4.0이 완전히 이해되었고 이제 5.0이 나왔습니다.) 물론 불평한다고 해서 문제가 해결될 수는 없으며 불평한다고 해서 지갑이 커지지는 않습니다. 그러니 프로그래머 여러분, 계속 배우십시오.

3+5 시대(3+5는 근거 없이 제가 만들어낸 것입니다 - -)라고 불리는 html5+css3 시대가 2014년 10월 29일 전세계적으로 압도적으로 다가왔습니다. 웹 얼라이언스(Web Alliance)는 약 8년 간의 노력 끝에 마침내 표준 사양이 완성되었다고 발표했다. 이는 우리가 다시 빨리 배워야 한다는 것을 의미합니다. 그렇지 않으면 우리는 다시 울트라맨이 될 것입니다. 사실 제가 html5를 접하기 시작한 것은 오래 전부터였습니다.

이 블로그를 작성할 때 여기서 html5와 html4의 차이점에 대해 이야기하고 싶지는 않습니다. 이미 많은 사람들이 이 작업을 수행한 것 같습니다. 나는 내 취미와 프로젝트 요구 사항에 따라 여기에서 데모를 보여줍니다.

　코드 효과: ps: 물방울 효과가 표시되지 않는 경우 아래 소스코드를 다운로드 받으실 수 있습니다.

　Html 부분:

<!--爱心-->
        <div class="heart" id="heart"></div>
        <!--左边的箭头-->
        <span class="arrow arrow-down"></span>
        <!--右边的箭头-->
        <span class="arrow arrow-down" style="margin-left:152px;"></span>
        <!--水滴效果-->
        <div class="">
            <span class="water" style="margin-left:10px;"></span>
            <span class="water" style="margin-left:200px;"></span>
            <span class="water" style="margin-left:50px;"></span>
            <!--原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou-->
            <span class="water" style="margin-left:120px;"></span>
            <span class="water" style="margin-left:30px;"></span>
            <span class="water" style="margin-left:170px;"></span>
            <span class="water" style="margin-left:200px;"></span>
        </div>

　css 부분: ps: CSS3의 일부 핵심 속성에 대한 설명을 추가했습니다. 메시지를 보낼 수 있습니다. 또한, 이 콘텐츠("원본 출처:..."와 유사)가 코드에 많이 추가되었습니다. 이는 악의적인 크롤링과 표절을 방지하기 위한 조치라는 점은 모두가 이해하실 것입니다. 정품지원하세요 :)

위 내용은 달리는 하트와 역동적인 물방울 효과를 구현하기 위해 HTML5+css3을 사용한 샘플 코드 공유에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!