지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > 여자친구를 위한 낭만적인 선물인 3D 사랑 애니메이션을 만드는 HTML5 튜토리얼_html5 튜토리얼 기술

여자친구를 위한 낭만적인 선물인 3D 사랑 애니메이션을 만드는 HTML5 튜토리얼_html5 튜토리얼 기술

WBOY
풀어 주다： 2016-05-16 15:47:18
원래의
3815명이 탐색했습니다.

프로그래머는 로맨틱할 줄 모른다고? 오늘은 발렌타인데이에 사랑하는 사람에게 선물할 HTML5와 CSS3를 사용하여 만든 3D 사랑 애니메이션을 보았습니다. . , 여전히 아주 좋습니다. 물론. 배경에 낭만적인 요소를 사용할 수 있습니다. 예를 들어, 여자친구의 아름다운 사진을 추가하세요. 저렴하면서도 의미있는 발렌타인데이 선물이 될 것입니다. DEMO를 클릭하여 살펴보실 수 있습니다. 먼저 렌더링:

구현 코드는 다음과 같습니다.

　html 코드:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <div class='heart3d'>  
  2. <div class='rib1′ >div>  
  3. <div class='rib2′ >div>  
  4. <div class='rib3′ >div>  
  5. <div class='rib4' >div>  
  6. <div class='rib5′ >div>  
  7. <div class='rib6′ >div>  
  8. <div class='rib7′ >div>  
  9. <div class='rib8′ >div>  
  10. <div class='rib9' >div>  
  11. <div class='rib10′ >div>  
  12. <div class='rib11' >div>  
  13. <div class='rib12′ >div>  
  14. <div class='rib13′ >div>  
  15. <div class='rib14′ >div>  
  16. <div class='rib15′ >div>  
  17. <div class='rib16′ >div>  
  18. <div class='rib17′ >div>  
  19. <div class='rib18′ >div>  
  20. <div class='rib19′ >div>  
  21. <div class='rib20′ >div>  
  22. <div class='rib21′ >div>  
  23. <div class='rib22′ >div>  
  24. <div class='rib23′ >div>  
  25. <div class='rib24′ >div>  
  26. <div class='rib25′ >div>  
  27. <div class='rib26′ >div>  
  28. <div class='rib27′ >div>  
  29. <div class='rib28′ >div>  
  30. <div class='rib29′ >div>  
  31. <div class='rib30′ >div>  
  32. <div class='rib31′ >div>  
  33. <div class='rib32′ >div>  
  34. <div class='rib33′ >div>  
  35. <div class='rib34′ >div>  
  36. <div class='rib35′ >div>  
  37. <div class='rib36′ >div>  
  38. div>  

　　这么多div, 主要是构造爱心的线条区域。

　　CSS代码：

CSS 코드复复内容到剪贴板
  1. .heart3d {   
  2.   위치: 절대;   
  3.   상단: 0;   
  4.   맞아맞아: 0;   
  5.   하단하단: 0;   
  6.   왼쪽: 0;   
  7.   여백: 자동;   
  8.   너비: 100px;   
  9.   높이: 160px;   
  10.   -webkit-transform-style: preserve-3d;   
  11.   변환 스타일: preserve-3d;   
  12.   -webkit-animation: 15초 무한 선형 회전;   
  13.   애니메이션: 15초 무한 선형 회전;   
  14. }   
  15. .heart3d [class^="갈비뼈"] {   
  16.   위치: 절대;   
  17.   너비: 100px;   
  18.   높이: 160px;   
  19.   테두리: 단단함 #f22613;   
  20.   테두리 너비: 1픽셀 1픽셀 0 0 ;   
  21.   테두리-반경: 50% 50% 0 / 40% 50% 0;   
  22. }   
  23. .heart3d [class$="1"] {   
  24.   -webkit-transform: rotateY(10deg) rotateZ(45deg) translateX(30px);   
  25.   변환: rotateY(10deg) rotateZ(45deg) translateX(30px);   
  26. }   
  27. .heart3d [class$="2"] {   
  28.   -webkit-transform: rotateY(20deg) rotateZ(45deg) translateX(30px);   
  29.   변환: rotateY(20deg) rotateZ(45deg) translateX(30px);   
  30. }   
  31. .heart3d [class$="3"] {   
  32.   -webkit-transform: rotateY(30deg) rotateZ(45deg) translateX(30px);   
  33.   변환: rotateY(30deg) rotateZ(45deg) translateX(30px);   
  34. }  
  35. .heart3d [class$="4"] {   
  36.   -webkit-transform: rotateY(40deg) rotateZ(45deg) translateX(30px);   
  37.   변환: rotateY(40deg) rotateZ(45deg) translateX(30px);   
  38. }   
  39. .heart3d [class$="5"] {   
  40.   -webkit-transform: rotateY(50deg) rotateZ(45deg) translateX(30px);   
  41.   변환: rotateY(50deg) rotateZ(45deg) translateX(30px);   
  42. }   
  43. .heart3d [class$="6"] {   
  44.   -webkit-transform: rotateY(60deg) rotateZ(45deg) translateX(30px);   
  45.   변환: rotateY(60deg) rotateZ(45deg) translateX(30px);   
  46. }   
  47. .heart3d [class$="7"] {   
  48.   -webkit-transform: rotateY(70deg) rotateZ(45deg) translateX(30px);   
  49.   변환: rotateY(70deg) rotateZ(45deg) translateX(30px);   
  50. }   
  51. .heart3d [class$="8"] {   
  52.   -webkit-transform: rotateY(80deg) rotateZ(45deg) translateX(30px);   
  53.   변환: rotateY(80deg) rotateZ(45deg) translateX(30px);   
  54. }   
  55. .heart3d [class$="9"] {   
  56.   -webkit-transform: rotateY(90deg) rotateZ(45deg) translateX(30px);   
  57.   변환: rotateY(90deg) rotateZ(45deg) translateX(30px);   
  58. }   
  59. .heart3d [class$="10"] {   
  60.   -webkit-transform: rotateY(100deg) rotateZ(45deg) translateX(30px);   
  61.   변환: rotateY(100deg) rotateZ(45deg) translateX(30px);   
  62. }   
  63. .heart3d [class$="11"] {   
  64.   -webkit-transform: rotateY(110deg) rotateZ(45deg) translateX(30px);   
  65.   변환: rotateY(110deg) rotateZ(45deg) translateX(30px);   
  66. }   
  67. .heart3d [class$="12"] {   
  68.   -webkit-transform: rotateY(120deg) rotateZ(45deg) translateX(30px);   
  69.   변환: rotateY(120deg) rotateZ(45deg) translateX(30px);   
  70. }  
  71. .heart3d [class$="13"] {   
  72.   -webkit-transform: rotateY(130deg) rotateZ(45deg) translateX(30px);   
  73.   변환: rotateY(130deg) rotateZ(45deg) translateX(30px);   
  74. }   
  75. .heart3d [class$="14"] {   
  76.   -webkit-transform: rotateY(140deg) rotateZ(45deg) translateX(30px);   
  77.   변환: rotateY(140deg) rotateZ(45deg) translateX(30px);   
  78. }   
  79. .heart3d [class$="15"] {   
  80.   -webkit-transform: rotateY(150deg) rotateZ(45deg) translateX(30px);   
  81.   변환: rotateY(150deg) rotateZ(45deg) translateX(30px);   
  82. }   
  83. .heart3d [class$="16"] {   
  84.   -webkit-transform: rotateY(160deg) rotateZ(45deg) translateX(30px);   
  85.   변환: rotateY(160deg) rotateZ(45deg) translateX(30px);   
  86. }   
  87. .heart3d [class$="17"] {   
  88.   -webkit-transform: rotateY(170deg) rotateZ(45deg) translateX(30px);   
  89.   변환: rotateY(170deg) rotateZ(45deg) translateX(30px);   
  90. }   
  91. .heart3d [class$="18"] {   
  92.   -webkit-transform: rotateY(180deg) rotateZ(45deg) translateX(30px);   
  93.   변환: rotateY(180deg) rotateZ(45deg) translateX(30px);   
  94. }   
  95. .heart3d [class$="19"] {   
  96.   -webkit-transform: rotateY(190deg) rotateZ(45deg) translateX(30px);   
  97.   변환: rotateY(190deg) rotateZ(45deg) translateX(30px);   
  98. }   
  99. .heart3d [class$="20"] {   
  100.   -webkit-transform: rotateY(200deg) rotateZ(45deg) translateX(30px);   
  101.   변환: rotateY(200deg) rotateZ(45deg) translateX(30px);   
  102. }   
  103. .heart3d [class$="21"] {   
  104.   -webkit-transform: rotateY(210deg) rotateZ(45deg) translateX(30px);   
  105.   변환: rotateY(210deg) rotateZ(45deg) translateX(30px);   
  106. }  
  107. .heart3d [class$="22"] {   
  108.   -webkit-transform: rotateY(220deg) rotateZ(45deg) translateX(30px);   
  109.   변환: rotateY(220deg) rotateZ(45deg) translateX(30px);   
  110. }   
  111. .heart3d [class$="23"] {   
  112.   -webkit-transform: rotateY(230deg) rotateZ(45deg) translateX(30px);   
  113.   변환: rotateY(230deg) rotateZ(45deg) translateX(30px);   
  114. }   
  115. .heart3d [class$="24"] {   
  116.   -webkit-transform: rotateY(240deg) rotateZ(45deg) translateX(30px);   
  117.   변환: rotateY(240deg) rotateZ(45deg) translateX(30px);   
  118. }   
  119. .heart3d [class$="25"] {   
  120.   -webkit-transform: rotateY(250deg) rotateZ(45deg) translateX(30px);   
  121.   변환: rotateY(250deg) rotateZ(45deg) translateX(30px);   
  122. }   
  123. .heart3d [class$="26"] {   
  124.   -webkit-transform: rotateY(260deg) rotateZ(45deg) translateX(30px);   
  125.   변환: rotateY(260deg) rotateZ(45deg) translateX(30px);   
  126. }   
  127. .heart3d [class$="27"] {   
  128.   -webkit-transform: rotateY(270deg) rotateZ(45deg) translateX(30px);   
  129.   변환: rotateY(270deg) rotateZ(45deg) translateX(30px);   
  130. }   
  131. .heart3d [class$="28"] {   
  132.   -webkit-transform: rotateY(280deg) rotateZ(45deg) translateX(30px);   
  133.   변환: rotateY(280deg) rotateZ(45deg) translateX(30px);   
  134. }   
  135. .heart3d [class$="29"] {   
  136.   -webkit-transform: rotateY(290deg) rotateZ(45deg) translateX(30px);   
  137.   변환: rotateY(290deg) rotateZ(45deg) translateX(30px);   
  138. }   
  139. .heart3d [class$="30"] {   
  140.   -webkit-transform: rotateY(300deg) rotateZ(45deg) translateX(30px);   
  141.   변환: rotateY(300deg) rotateZ(45deg) translateX(30px);   
  142. }  
  143. .heart3d [class$="31"] {   
  144.   -webkit-transform: rotateY(310deg) rotateZ(45deg) translateX(30px);   
  145.   변환: rotateY(310deg) rotateZ(45deg) translateX(30px);   
  146. }   
  147. .heart3d [class$="32"] {   
  148.   -webkit-transform: rotateY(320deg) rotateZ(45deg) translateX(30px);   
  149.   변환: rotateY(320deg) rotateZ(45deg) translateX(30px);   
  150. }   
  151. .heart3d [class$="33"] {   
  152.   -webkit-transform: rotateY(330deg) rotateZ(45deg) translateX(30px);   
  153.   변환: rotateY(330deg) rotateZ(45deg) translateX(30px);   
  154. }   
  155. .heart3d [class$="34"] {   
  156.   -webkit-transform: rotateY(340deg) rotateZ(45deg) translateX(30px);   
  157.   변환: rotateY(340deg) rotateZ(45deg) translateX(30px);   
  158. }   
  159. .heart3d [class$="35"] {   
  160.   -webkit-transform: rotateY(350deg) rotateZ(45deg) translateX(30px);   
  161.   변환: rotateY(350deg) rotateZ(45deg) translateX(30px);   
  162. }   
  163. .heart3d [class$="36"] {   
  164.   -webkit-transform: rotateY(360deg) rotateZ(45deg) translateX(30px);   
  165.   변환: rotateY(360deg) rotateZ(45deg) translateX(30px);   
  166. }  

　　对这些线条进行渲染, 以便其에는 3D적인 视觉效果가 있습니다.

　　然后定义了一组name称为spin적HTML5动画：

CSS 코드复复内容到剪贴板
  1. @-webkit-keyframes spin {   
  2.   ~으로 {   
  3.     -webkit-transform: rotateY(360deg) rotateX(360deg);   
  4.     변환: rotateY(360deg) rotateX(360deg);   
  5.   }   
  6. }   
  7.   
  8. @keyframes 스핀 {   
  9.   ~으로 {   
  10.     -webkit-transform: rotateY(360deg) rotateX(360deg);   
  11.     변환: rotateY(360deg) rotateX(360deg);   
  12.   }   
  13. }  

위 내용은 HTML 코드와 CSS 코드로 구현한 3D 러브 애니메이션 효과입니다. 낭만청년들도 한번 배워보고 또 다른 우정의 기술을 배워보시길 바랍니다. 스크립트하우스에 더 좋은 글을 공유하도록 노력하겠습니다.

관련 라벨：
html5动画 html5动画制作
원천：php.cn
이전 기사：HTML5 그리기 시계 animation_html5 튜토리얼 기술 다음 기사：html5 css3 예제 튜토리얼 html5 및 css3_html5 튜토리얼 기술로 구현된 작은 로봇 걷기 애니메이션
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
0ms 수면을 생략하면 CSS 전환이 중단되는 이유는 무엇입니까? 제가 제대로 이해하고 있는지 알아보기 위해 FLIP 애니메이션을 구현해 보려고 합니다. 이 코드펜에서(잘못된 코드를 양해해 주세요. 그냥 장난을 쳤을 뿐입니다) ...
에서 2024-04-06 16:29:50
0
2
490
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
CSS Tailwind를 사용하는 이미지 호버 카드 애니메이션이 예상대로 작동하지 않습니다. <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
에서 2024-04-06 13:43:17
0
1
356
스크롤 배경 이미지의 불투명도를 낮추고 최소 불투명도를 제한합니다. 스크롤할 때의 불투명도를 줄이고 랜딩 페이지에서 멀어질 때 배경 이미지를 가져오려고 합니다. 바닐라 자바스크립트를 사용하여 불투명도를 최소 0.5로 낮추려고 합니...
에서 2024-04-04 23:50:53
0
1
1329
스타일이 지정된 구성 요소에 `:after` 의사 요소를 올바르게 적용하기 위한 React.js 가이드 아름다운 밑줄 애니메이션을 찾았습니다 <ul><li><ahref="#">정보</a></li>...
에서 2024-04-04 22:28:08
0
1
1322
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿