検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >html5 と css3 を使用してキャラクター アバターを配置するデモの例 anime_html5 チュートリアル スキル

html5 と css3 を使用してキャラクター アバターを配置するデモの例 anime_html5 チュートリアル スキル

WBOY
WBOYオリジナル
2016-05-16 15:47:081995ブラウズ

今日は、HTML5 と CSS3 アニメーションでキャラクター アバターを配置するデモを共有したいと思います。この例のページの最初は、真ん中に美少女の絵だけがあり、次に笑顔の絵が表示され、その後に小さなキャラクターの絵がページ上で円を描くようにアニメーション形式でゆっくりと配置されます。レンダリングは次のとおりです:

実装コード。

htmlコード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <div クラス='ステージ' >
  2. <div class='image' >
  3. <img src="https: //pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg">
  4. <div class= のスマイリー' >
  5. <svg 幅="30px" 高さ="30px">
  6. <パス fill="#effedd " d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15, 15,15s15-6.7,15-15C30,6.7,23.3,0,15,0z M20.5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S18,11.9 ,18,10.5C18,9.1,19.1,8,20.5,8z M10.5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S8,11.9,8,10.5 C8,9.1,9.1,8,10.5,8z M15,26c-5,0-9-4-9-9h3c0,3.3,2.7,6,6,6s6-2.7,6-6h3C24,22,20,26,15 ,26z" />svg>
  7. div>
  8. div>
  9. <フィギュア クラス='アバター' >
  10. 図>
  11. <フィギュア クラス='アバター' >
  12. 図>
  13. <フィギュア クラス='アバター' >
  14. 図>
  15. <フィギュア クラス='アバター' >
  16. 図>
  17. <フィギュア クラス='アバター' >
  18. 図>
  19. <フィギュア クラス='アバター' >
  20. 図>
  21. <フィギュア クラス='アバター' >
  22. 図>
  23. <フィギュア クラス='アバター' >
  24. 図>
  25. div>

css3代码：

CSS コード剪定板への复制コンテンツ
  1. .stage {
  2. 位置: 絶対;   
  3. トップ: 0;   
  4. 右右: 0;   
  5. 下下: 0;   
  6. 左: 0;   
  7. マージン: 自動;   
  8. 高さ: 460px;   
  9. 幅: 480px;   
  10. }
  12. .アバター {
  13. 位置: 絶対;   
  14. トップ: 0;   
  15. 右右: 0;   
  16. 下下: 0;   
  17. 左: 0;   
  18. マージン: 自動;   
  19. 高さ: 64px;   
  20. 幅: 64px;   
  21. バックグラウンドリピート: リピートなし;   
  22. 背景-サイズ: カバー;   
  23. 境界線-半径: 50%;   
  24. -webkit-transform-origin: center;   
  25. -ms-transform-origin: center;   
  26. transform-origin: center;   
  27. }  
  28. .avatar:before {
  29. コンテンツ: '';   
  30. 位置: 絶対;   
  31. トップ: -8%;   
  32. 右右: -8%;   
  33. 身長: 17.06667px;   
  34. 幅: 17.06667px;   
  35. 背景: #bec4bc;   
  36. 境界線-半径: 50%;   
  37. ボーダー: 3px ソリッド 白;   
  38. }
  39. .avatar:nth-of-type(1) {
  40. -webkit-animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  41. アニメーション: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  42. }
  43. @-webkit-keyframes ani1 {
  44. 0%, 20% {
  45. -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   
  46. transform: rotate(45deg) translate(0) rotate(-45deg);   
  47. }
  48. 34%, 100% {
  49. -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   
  50. transform: rotate(45deg) translate(208px) rotate(-45deg);   
  51. }
  52. }
  53. @keyframes ani1 {
  54. 0%, 20% {
  55. -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   
  56. transform: rotate(45deg) translate(0) rotate(-45deg);   
  57. }
  58. 34%, 100% {
  59. -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   
  60. transform: rotate(45deg) translate(208px) rotate(-45deg);   
  61. }
  62. }
  63. .avatar:nth-of-type(2) {
  64. -webkit-animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  65. アニメーション: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  66. }  
  67. @-webkit-keyframes ani2 {
  68. 0%, 20% {
  69. -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   
  70. transform: rotate(90deg) translate(0) rotate(-90deg);   
  71. }
  72. 34%, 100% {
  73. -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   
  74. transform: rotate(90deg) translate(208px) rotate(-90deg);   
  75. }
  76. }
  77. @keyframes ani2 {
  78. 0%, 20% {
  79. -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   
  80. transform: rotate(90deg) translate(0) rotate(-90deg);   
  81. }
  82. 34%, 100% {
  83. -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   
  84. transform: rotate(90deg) translate(208px) rotate(-90deg);   
  85. }
  86. }
  87. .avatar:nth-of-type(3) {
  88. -webkit-animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  89. アニメーション: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  90. }
  91. @-webkit-keyframes ani3 {
  92. 0%, 20% {
  93. -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   
  94. transform: rotate(135deg) translate(0) rotate(-135deg);   
  95. }
  96. 34%, 100% {
  97. -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   
  98. transform: rotate(135deg) translate(208px) rotate(-135deg);   
  99. }
  100. }
  101. @keyframes ani3 {
  102. 0%, 20% {
  103. -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   
  104. transform: rotate(135deg) translate(0) rotate(-135deg);   
  105. }  
  106. 34%, 100% {
  107. -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   
  108. transform: rotate(135deg) translate(208px) rotate(-135deg);   
  109. }
  110. }
  111. .avatar:nth-of-type(4) {
  112. -webkit-animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  113. アニメーション: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  114. }
  115. @-webkit-keyframes ani4 {
  116. 0%, 20% {
  117. -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   
  118. transform: rotate(180deg) translate(0) rotate(-180deg);   
  119. }
  120. 34%, 100% {
  121. -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   
  122. transform: rotate(180deg) translate(208px) rotate(-180deg);   
  123. }
  124. }
  125. @keyframes ani4 {
  126. 0%, 20% {
  127. -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   
  128. transform: rotate(180deg) translate(0) rotate(-180deg);   
  129. }
  130. 34%, 100% {
  131. -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   
  132. transform: rotate(180deg) translate(208px) rotate(-180deg);   
  133. }
  134. }
  135. .avatar:nth-of-type(5) {
  136. -webkit-animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  137. アニメーション: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  138. }
  139. @-webkit-keyframes ani5 {
  140. 0%, 20% {
  141. -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   
  142. transform: rotate(225deg) translate(0) rotate(-225deg);   
  143. }  
  144. 34%, 100% {
  145. -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   
  146. transform: rotate(225deg) translate(208px) rotate(-225deg);   
  147. }
  148. }
  149. @keyframes ani5 {
  150. 0%, 20% {
  151. -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   
  152. transform: rotate(225deg) translate(0) rotate(-225deg);   
  153. }
  154. 34%, 100% {
  155. -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   
  156. transform: rotate(225deg) translate(208px) rotate(-225deg);   
  157. }
  158. }
  159. .avatar:nth-of-type(6) {
  160. -webkit-animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  161. アニメーション: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  162. }
  163. @-webkit-keyframes ani6 {
  164. 0%, 20% {
  165. -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   
  166. transform: rotate(270deg) translate(0) rotate(-270deg);   
  167. }
  168. 34%, 100% {
  169. -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   
  170. transform: rotate(270deg) translate(208px) rotate(-270deg);   
  171. }
  172. }
  173. @keyframes ani6 {
  174. 0%, 20% {
  175. -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   
  176. transform: rotate(270deg) translate(0) rotate(-270deg);   
  177. }
  178. 34%, 100% {
  179. -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   
  180. transform: rotate(270deg) translate(208px) rotate(-270deg);   
  181. }
  182. }  
  183. .avatar:nth-of-type(7) {
  184. -webkit-animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  185. アニメーション: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  186. }
  187. @-webkit-keyframes ani7 {
  188. 0%, 20% {
  189. -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   
  190. transform: rotate(315deg) translate(0) rotate(-315deg);   
  191. }
  192. 34%, 100% {
  193. -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   
  194. transform: rotate(315deg) translate(208px) rotate(-315deg);   
  195. }
  196. }
  197. @keyframes ani7 {
  198. 0%, 20% {
  199. -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   
  200. transform: rotate(315deg) translate(0) rotate(-315deg);   
  201. }
  202. 34%, 100% {
  203. -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   
  204. transform: rotate(315deg) translate(208px) rotate(-315deg);   
  205. }
  206. }
  207. .avatar:nth-of-type(8) {
  208. -webkit-animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  209. アニメーション: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  210. }
  211. @-webkit-keyframes ani8 {
  212. 0%, 20% {
  213. -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   
  214. transform: rotate(360deg) translate(0) rotate(-360deg);   
  215. }
  216. 34%, 100% {
  217. -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   
  218. transform: rotate(360deg) translate(208px) rotate(-360deg);   
  219. }
  220. }  
  221. @keyframes ani8 {
  222. 0%, 20% {
  223. -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   
  224. transform: rotate(360deg) translate(0) rotate(-360deg);   
  225. }
  226. 34%, 100% {
  227. -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   
  228. transform: rotate(360deg) translate(208px) rotate(-360deg);   
  229. }
  230. }
  231. .avatar:nth-of-type(4):before, .avatar:nth-of-type(2):before {
  232. -webkit-animation: bounce 3s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward、colorchange 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  233. アニメーション: バウンス 3秒 1.8秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 順方向、カラーチェンジ 1秒 1.8秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 用病棟。   
  234. }
  235. .avatar:nth-of-type(7):before {
  236. -webkit-animation: バウンス 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward、colorchange 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  237. アニメーション: 3秒 2秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 前方へのバウンス、色変更 1秒 2秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 前方へのバウンス;   
  238. }
  239. .avatar:nth-of-type(3):before {
  240. -webkit-animation: bounce 3s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward、colorchange 1s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  241. アニメーション: バウンス 3秒 2.8秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 順方向、カラーチェンジ 1秒 2.8秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275)病棟。   
  242. }
  243. .avatar:nth-of-type(1):before {
  244. -webkit-animation: bounce 3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward、colorchange 1s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  245. アニメーション: バウンス 3秒 3秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 前方、カラーチェンジ 1秒 3秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 前方;   
  246. }
  247. .avatar:nth-of-type(6):before {
  248. -webkit-animation: バウンス 3秒 3.2秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) フォワード、カラーチェンジ 1秒 3.2秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) フォワード;   
  249. アニメーション: バウンス 3秒 3.2秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 順方向、カラーチェンジ 1秒 3.2秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 用病棟。   
  250. }  
  251. .avatar:nth-of-type(5):before {
  252. -webkit-animation: bounce 3s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward、colorchange 1s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  253. アニメーション: バウンス 3秒 3.8秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 順方向、カラーチェンジ 1秒 3.8秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 用病棟。   
  254. }
  255. .avatar:nth-of-type(8):before {
  256. -webkit-animation: バウンス 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward、colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  257. アニメーション: バウンス 3秒 4秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 前方、カラーチェンジ 1秒 4秒 立方体ベジェ(0.175, 0.885, 0.32, 1.275) 前方;   
  258. }
  260. .image {
  261. 位置: 絶対;   
  262. トップ: 0;   
  263. 右右: 0;   
  264. 下下: 0;   
  265. 左: 0;   
  266. マージン: 自動;   
  267. 高さ: 220px;   
  268. 幅: 220px;   
  269. }
  270. .image img {
  271. 位置: 相対;   
  272. 高さ: 220px;   
  273. 幅: 220px;   
  274. 境界線-半径: 50%;   
  275. z-index: 1;   
  276. }  
  277. .image:before {
  278. 位置: 絶対;   
  279. トップ: 0;   
  280. 右右: 0;   
  281. 下下: 0;   
  282. 左: 0;   
  283. マージン: 自動;   
  284. コンテンツ: '';   
  285. 身長: 100%;   
  286. 幅: 100%;   
  287. 背景: #f9fff7;   
  288. ボーダー: 3px ソリッド #e7f5d1;   
  289. 境界線-半径: 50%;   
  290. -webkit-animation: パルス 1 秒 1.4 秒 イーズアウト;   
  291. アニメーション: パルス 1 秒 1.4 秒 イーズアウト。   
  292. -webkit-animation-iteration-count: 3;   
  293. アニメーション反復数: 3;   
  294. }
  295. .image .smiley {
  296. 位置: 絶対;   
  297. 上: -8px;   
  298. 右右: -8px;   
  299. 高さ: 64px;   
  300. 幅: 64px;   
  301. 背景: #b5e763;   
  302. 境界線-半径: 50%;   
  303. ボーダー: 5px ソリッド 白;   
  304. -webkit-animation: 5秒 立方ベジェ(0.175, 0.885, 0.32, 1.275) 前方にバウンスします。   
  305. アニメーション: 5秒 3次ベジェ(0.175, 0.885, 0.32, 1.275) 前方にバウンスします。   
  306. -webkit-transform-origin: center;   
  307. -ms-transform-origin: center;   
  308. transform-origin: center;   
  309. z-index: 1;   
  310. }  
  311. .image .smiley svg {
  312. 位置: 絶対;   
  313. トップ: 0;   
  314. 右右: 0;   
  315. 下下: 0;   
  316. 左: 0;   
  317. マージン: 自動;   
  318. -webkit-animation: 5秒 0.075秒 立方ベジェ(0.175, 0.885, 0.32, 1.275) 前方にバウンス;   
  319. アニメーション: 5 秒 0.075 秒 3 次ベジェ(0.175, 0.885, 0.32, 1.275) 前方へバウンス;   
  320. }
  322. @-webkit-keyframes bounce {
  323. 0% {
  324. -webkit-transform: scale(0);   
  325. transform: scale(0);   
  326. }
  327. 5% {
  328. -webkit-transform: scale(1.5);   
  329. transform: scale(1.5);   
  330. }
  331. 10%, 100% {
  332. -webkit-transform: scale(1);   
  333. transform: scale(1);   
  334. }
  335. }
  337. @keyframes bounce {
  338. 0% {
  339. -webkit-transform: scale(0);   
  340. transform: scale(0);   
  341. }
  342. 5% {
  343. -webkit-transform: scale(1.5);   
  344. transform: scale(1.5);   
  345. }
  346. 10%, 100% {
  347. -webkit-transform: scale(1);   
  348. transform: scale(1);   
  349. }
  350. }
  351. @-webkit-keyframes pulse {
  352. 0% {
  353. -webkit-transform: scale(0.1, 0.1);   
  354. transform: scale(0.1, 0.1);   
  355. 不透明度: 0.0;   
  356. }
  357. 50% {
  358. 不透明度: 1.0;   
  359. }  
  360. 100% {
  361. -webkit-transform: scale(3);   
  362. transform: scale(3);   
  363. 不透明度: 0.0;   
  364. }
  365. }
  366. @keyframes pulse {
  367. 0% {
  368. -webkit-transform: scale(0.1, 0.1);   
  369. transform: scale(0.1, 0.1);   
  370. 不透明度: 0.0;   
  371. }
  372. 50% {
  373. 不透明度: 1.0;   
  374. }
  375. 100% {
  376. -webkit-transform: scale(3);   
  377. transform: scale(3);   
  378. 不透明度: 0.0;   
  379. }
  380. }
  381. @-webkit-keyframes colorchange {
  382. 0% {
  383. 背景: #bec4bc;   
  384. }
  385. 100% {
  386. 背景: #b5e763;   
  387. }
  388. }
  389. @keyframes colorchange {
  390. 0% {
  391. 背景: #bec4bc;   
  392. }
  393. 100% {
  394. 背景: #b5e763;   
  395. }
  396. }
  397. .avatar:nth-of-type(1) {
  398. 背景画像: url("128.jpg" );   
  399. }
  401. .avatar:nth-of-type(2) {
  402. 背景画像: url("rasagy.jpg" );   
  403. }
  405. .avatar:nth-of-type(3) {
  406. 背景画像: url("geeftvorm.jpg" );   
  407. }
  409. .avatar:nth-of-type(4) {
  410. 背景画像: url("VinThomas.jpg" );   
  411. }  
  413. .avatar:nth-of-type(5) {
  414. 背景画像: url("ladylexy.jpg" );   
  415. }
  417. .avatar:nth-of-type(6) {
  418. 背景画像: url("claudioguglieri.jpg" );   
  419. }
  421. .avatar:nth-of-type(7) {
  422. 背景画像: url("jina.jpg" );   
  423. }
  425. .avatar:nth-of-type(8) {
  426. 背景画像: url("peterme.jpg" );   
  427. }

好了以上は今天媒体の html5 と css3 アニメーション画配列人物像コード演示、谢蘊蘅蘆、希望可能可能性大家、讀请续言注册家，我们努力共享更多质秀的文章。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 はキャンバスを使用してテキストを描画します。 効果_html5 チュートリアルのスキル次の記事：HTML5 はキャンバスを使用してテキストを描画します。 効果_html5 チュートリアルのスキル

関連記事

続きを見る