抖动文字 – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:100,700'> <style type="text/css"> *, *:after, *:before { box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: #F0544F; font-family: Roboto, sans-serif; } body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } body, .container, .sentence { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 30em; perspective: 30em; } .container { margin: auto; -webkit-box-reflect: below -2em -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.4))); pointer-events: none; } .sentence { margin: auto; font-size: 4em; color: #f0f0f0; text-align: center; } .sentence span { display: inline-block; will-change: transform; -webkit-animation: animation 2s linear infinite alternate; animation: animation 2s linear infinite alternate; opacity: 0; } .sentence h1 { font-weight: bold; } .sentence h2 { font-weight: thin; } @-webkit-keyframes animation { 0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 1.666667% { -webkit-transform: matrix3d(0.19514, 0, 0, 0, 0, 0.19514, 0, 0, 0, 0, 1, 0, 0, -3.8179, 0, 1); transform: matrix3d(0.19514, 0, 0, 0, 0, 0.19514, 0, 0, 0, 0, 1, 0, 0, -3.8179, 0, 1); } 3.333333% { -webkit-transform: matrix3d(0.48061, 0, 0, 0, 0, 0.48061, 0, 0, 0, 0, 1, 0, 0, -16.89184, 0, 1); transform: matrix3d(0.48061, 0, 0, 0, 0, 0.48061, 0, 0, 0, 0, 1, 0, 0, -16.89184, 0, 1); } 5% { -webkit-transform: matrix3d(0.78868, 0, 0, 0, 0, 0.78868, 0, 0, 0, 0, 1, 0, 0, -35.82897, 0, 1); transform: matrix3d(0.78868, 0, 0, 0, 0, 0.78868, 0, 0, 0, 0, 1, 0, 0, -35.82897, 0, 1); } 6.666667% { -webkit-transform: matrix3d(1.06298, 0, 0, 0, 0, 1.06298, 0, 0, 0, 0, 1, 0, 0, -54.24398, 0, 1); transform: matrix3d(1.06298, 0, 0, 0, 0, 1.06298, 0, 0, 0, 0, 1, 0, 0, -54.24398, 0, 1); } 8.333333% { -webkit-transform: matrix3d(1.26541, 0, 0, 0, 0, 1.26541, 0, 0, 0, 0, 1, 0, 0, -67.42532, 0, 1); transform: matrix3d(1.26541, 0, 0, 0, 0, 1.26541, 0, 0, 0, 0, 1, 0, 0, -67.42532, 0, 1); } 10% { -webkit-transform: matrix3d(1.37835, 0, 0, 0, 0, 1.37835, 0, 0, 0, 0, 1, 0, 0, -73.79667, 0, 1); transform: matrix3d(1.37835, 0, 0, 0, 0, 1.37835, 0, 0, 0, 0, 1, 0, 0, -73.79667, 0, 1); } 11.666667% { -webkit-transform: matrix3d(1.40302, 0, 0, 0, 0, 1.40302, 0, 0, 0, 0, 1, 0, 0, -74.15221, 0, 1); transform: matrix3d(1.40302, 0, 0, 0, 0, 1.40302, 0, 0, 0, 0, 1, 0, 0, -74.15221, 0, 1); } 13.333333% { opacity: 1; -webkit-transform: matrix3d(1.35507, 0, 0, 0, 0, 1.35507, 0, 0, 0, 0, 1, 0, 0, -70.32855, 0, 1); transform: matrix3d(1.35507, 0, 0, 0, 0, 1.35507, 0, 0, 0, 0, 1, 0, 0, -70.32855, 0, 1); } 15% { -webkit-transform: matrix3d(1.25874, 0, 0, 0, 0, 1.25874, 0, 0, 0, 0, 1, 0, 0, -64.25506, 0, 1); transform: matrix3d(1.25874, 0, 0, 0, 0, 1.25874, 0, 0, 0, 0, 1, 0, 0, -64.25506, 0, 1); } 16.666667% { -webkit-transform: matrix3d(1.14088, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, -57.53621, 0, 1); transform: matrix3d(1.14088, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, -57.53621, 0, 1); } 18.333333% { -webkit-transform: matrix3d(1.02595, 0, 0, 0, 0, 1.02595, 0, 0, 0, 0, 1, 0, 0, -51.35907, 0, 1); transform: matrix3d(1.02595, 0, 0, 0, 0, 1.02595, 0, 0, 0, 0, 1, 0, 0, -51.35907, 0, 1); } 20% { -webkit-transform: matrix3d(0.93241, 0, 0, 0, 0, 0.93241, 0, 0, 0, 0, 1, 0, 0, -46.51039, 0, 1); transform: matrix3d(0.93241, 0, 0, 0, 0, 0.93241, 0, 0, 0, 0, 1, 0, 0, -46.51039, 0, 1); } 21.666667% { -webkit-transform: matrix3d(0.87106, 0, 0, 0, 0, 0.87106, 0, 0, 0, 0, 1, 0, 0, -43.40452, 0, 1); transform: matrix3d(0.87106, 0, 0, 0, 0, 0.87106, 0, 0, 0, 0, 1, 0, 0, -43.40452, 0, 1); } 23.333333% { -webkit-transform: matrix3d(0.84491, 0, 0, 0, 0, 0.84491, 0, 0, 0, 0, 1, 0, 0, -42.11433, 0, 1); transform: matrix3d(0.84491, 0, 0, 0, 0, 0.84491, 0, 0, 0, 0, 1, 0, 0, -42.11433, 0, 1); } 25% { -webkit-transform: matrix3d(0.85043, 0, 0, 0, 0, 0.85043, 0, 0, 0, 0, 1, 0, 0, -42.42524, 0, 1); transform: matrix3d(0.85043, 0, 0, 0, 0, 0.85043, 0, 0, 0, 0, 1, 0, 0, -42.42524, 0, 1); } 26.666667% { -webkit-transform: matrix3d(0.87962, 0, 0, 0, 0, 0.87962, 0, 0, 0, 0, 1, 0, 0, -43.92027, 0, 1); transform: matrix3d(0.87962, 0, 0, 0, 0, 0.87962, 0, 0, 0, 0, 1, 0, 0, -43.92027, 0, 1); } 28.333333% { -webkit-transform: matrix3d(0.92232, 0, 0, 0, 0, 0.92232, 0, 0, 0, 0, 1, 0, 0, -46.08478, 0, 1); transform: matrix3d(0.92232, 0, 0, 0, 0, 0.92232, 0, 0, 0, 0, 1, 0, 0, -46.08478, 0, 1); } 30% { -webkit-transform: matrix3d(0.96839, 0, 0, 0, 0, 0.96839, 0, 0, 0, 0, 1, 0, 0, -48.40959, 0, 1); transform: matrix3d(0.96839, 0, 0, 0, 0, 0.96839, 0, 0, 0, 0, 1, 0, 0, -48.40959, 0, 1); } 31.666667% { -webkit-transform: matrix3d(1.00942, 0, 0, 0, 0, 1.00942, 0, 0, 0, 0, 1, 0, 0, -50.47334, 0, 1); transform: matrix3d(1.00942, 0, 0, 0, 0, 1.00942, 0, 0, 0, 0, 1, 0, 0, -50.47334, 0, 1); } 33.333333% { -webkit-transform: matrix3d(1.0397, 0, 0, 0, 0, 1.0397, 0, 0, 0, 0, 1, 0, 0, -51.99258, 0, 1); transform: matrix3d(1.0397, 0, 0, 0, 0, 1.0397, 0, 0, 0, 0, 1, 0, 0, -51.99258, 0, 1); } 35% { -webkit-transform: matrix3d(1.05659, 0, 0, 0, 0, 1.05659, 0, 0, 0, 0, 1, 0, 0, -52.83794, 0, 1); transform: matrix3d(1.05659, 0, 0, 0, 0, 1.05659, 0, 0, 0, 0, 1, 0, 0, -52.83794, 0, 1); } 36.666667% { -webkit-transform: matrix3d(1.06028, 0, 0, 0, 0, 1.06028, 0, 0, 0, 0, 1, 0, 0, -53.02083, 0, 1); transform: matrix3d(1.06028, 0, 0, 0, 0, 1.06028, 0, 0, 0, 0, 1, 0, 0, -53.02083, 0, 1); } 38.333333% { -webkit-transform: matrix3d(1.05311, 0, 0, 0, 0, 1.05311, 0, 0, 0, 0, 1, 0, 0, -52.65993, 0, 1); transform: matrix3d(1.05311, 0, 0, 0, 0, 1.05311, 0, 0, 0, 0, 1, 0, 0, -52.65993, 0, 1); } 40% { -webkit-transform: matrix3d(1.0387, 0, 0, 0, 0, 1.0387, 0, 0, 0, 0, 1, 0, 0, -51.93743, 0, 1); transform: matrix3d(1.0387, 0, 0, 0, 0, 1.0387, 0, 0, 0, 0, 1, 0, 0, -51.93743, 0, 1); } 41.666667% { -webkit-transform: matrix3d(1.02107, 0, 0, 0, 0, 1.02107, 0, 0, 0, 0, 1, 0, 0, -51.05459, 0, 1); transform: matrix3d(1.02107, 0, 0, 0, 0, 1.02107, 0, 0, 0, 0, 1, 0, 0, -51.05459, 0, 1); } 43.333333% { -webkit-transform: matrix3d(1.00388, 0, 0, 0, 0, 1.00388, 0, 0, 0, 0, 1, 0, 0, -50.19419, 0, 1); transform: matrix3d(1.00388, 0, 0, 0, 0, 1.00388, 0, 0, 0, 0, 1, 0, 0, -50.19419, 0, 1); } 45% { -webkit-transform: matrix3d(0.98989, 0, 0, 0, 0, 0.98989, 0, 0, 0, 0, 1, 0, 0, -49.4943, 0, 1); transform: matrix3d(0.98989, 0, 0, 0, 0, 0.98989, 0, 0, 0, 0, 1, 0, 0, -49.4943, 0, 1); } 46.666667% { -webkit-transform: matrix3d(0.98072, 0, 0, 0, 0, 0.98072, 0, 0, 0, 0, 1, 0, 0, -49.03539, 0, 1); transform: matrix3d(0.98072, 0, 0, 0, 0, 0.98072, 0, 0, 0, 0, 1, 0, 0, -49.03539, 0, 1); } 48.333333% { -webkit-transform: matrix3d(0.9768, 0, 0, 0, 0, 0.9768, 0, 0, 0, 0, 1, 0, 0, -48.83983, 0, 1); transform: matrix3d(0.9768, 0, 0, 0, 0, 0.9768, 0, 0, 0, 0, 1, 0, 0, -48.83983, 0, 1); } 50% { -webkit-transform: matrix3d(0.97763, 0, 0, 0, 0, 0.97763, 0, 0, 0, 0, 1, 0, 0, -48.88146, 0, 1); transform: matrix3d(0.97763, 0, 0, 0, 0, 0.97763, 0, 0, 0, 0, 1, 0, 0, -48.88146, 0, 1); } 51.666667% { -webkit-transform: matrix3d(0.98199, 0, 0, 0, 0, 0.98199, 0, 0, 0, 0, 1, 0, 0, -49.09973, 0, 1); transform: matrix3d(0.98199, 0, 0, 0, 0, 0.98199, 0, 0, 0, 0, 1, 0, 0, -49.09973, 0, 1); } 53.333333% { -webkit-transform: matrix3d(0.98838, 0, 0, 0, 0, 0.98838, 0, 0, 0, 0, 1, 0, 0, -49.41905, 0, 1); transform: matrix3d(0.98838, 0, 0, 0, 0, 0.98838, 0, 0, 0, 0, 1, 0, 0, -49.41905, 0, 1); } 55% { -webkit-transform: matrix3d(0.99527, 0, 0, 0, 0, 0.99527, 0, 0, 0, 0, 1, 0, 0, -49.76363, 0, 1); transform: matrix3d(0.99527, 0, 0, 0, 0, 0.99527, 0, 0, 0, 0, 1, 0, 0, -49.76363, 0, 1); } 56.666667% { -webkit-transform: matrix3d(1.00141, 0, 0, 0, 0, 1.00141, 0, 0, 0, 0, 1, 0, 0, -50.07044, 0, 1); transform: matrix3d(1.00141, 0, 0, 0, 0, 1.00141, 0, 0, 0, 0, 1, 0, 0, -50.07044, 0, 1); } 58.333333% { -webkit-transform: matrix3d(1.00594, 0, 0, 0, 0, 1.00594, 0, 0, 0, 0, 1, 0, 0, -50.29687, 0, 1); transform: matrix3d(1.00594, 0, 0, 0, 0, 1.00594, 0, 0, 0, 0, 1, 0, 0, -50.29687, 0, 1); } 60% { -webkit-transform: matrix3d(1.00846, 0, 0, 0, 0, 1.00846, 0, 0, 0, 0, 1, 0, 0, -50.4232, 0, 1); transform: matrix3d(1.00846, 0, 0, 0, 0, 1.00846, 0, 0, 0, 0, 1, 0, 0, -50.4232, 0, 1); } 61.666667% { -webkit-transform: matrix3d(1.00902, 0, 0, 0, 0, 1.00902, 0, 0, 0, 0, 1, 0, 0, -50.4508, 0, 1); transform: matrix3d(1.00902, 0, 0, 0, 0, 1.00902, 0, 0, 0, 0, 1, 0, 0, -50.4508, 0, 1); } 63.333333% { -webkit-transform: matrix3d(1.00794, 0, 0, 0, 0, 1.00794, 0, 0, 0, 0, 1, 0, 0, -50.39716, 0, 1); transform: matrix3d(1.00794, 0, 0, 0, 0, 1.00794, 0, 0, 0, 0, 1, 0, 0, -50.39716, 0, 1); } 65% { -webkit-transform: matrix3d(1.00579, 0, 0, 0, 0, 1.00579, 0, 0, 0, 0, 1, 0, 0, -50.28941, 0, 1); transform: matrix3d(1.00579, 0, 0, 0, 0, 1.00579, 0, 0, 0, 0, 1, 0, 0, -50.28941, 0, 1); } 66.666667% { -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, -50.15758, 0, 1); transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, -50.15758, 0, 1); } 68.333333% { -webkit-transform: matrix3d(1.00058, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, -50.02902, 0, 1); transform: matrix3d(1.00058, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, -50.02902, 0, 1); } 70% { -webkit-transform: matrix3d(0.99849, 0, 0, 0, 0, 0.99849, 0, 0, 0, 0, 1, 0, 0, -49.9244, 0, 1); transform: matrix3d(0.99849, 0, 0, 0, 0, 0.99849, 0, 0, 0, 0, 1, 0, 0, -49.9244, 0, 1); } 71.666667% { -webkit-transform: matrix3d(0.99712, 0, 0, 0, 0, 0.99712, 0, 0, 0, 0, 1, 0, 0, -49.85578, 0, 1); transform: matrix3d(0.99712, 0, 0, 0, 0, 0.99712, 0, 0, 0, 0, 1, 0, 0, -49.85578, 0, 1); } 73.333333% { -webkit-transform: matrix3d(0.99653, 0, 0, 0, 0, 0.99653, 0, 0, 0, 0, 1, 0, 0, -49.82653, 0, 1); transform: matrix3d(0.99653, 0, 0, 0, 0, 0.99653, 0, 0, 0, 0, 1, 0, 0, -49.82653, 0, 1); } 75% { -webkit-transform: matrix3d(0.99665, 0, 0, 0, 0, 0.99665, 0, 0, 0, 0, 1, 0, 0, -49.8327, 0, 1); transform: matrix3d(0.99665, 0, 0, 0, 0, 0.99665, 0, 0, 0, 0, 1, 0, 0, -49.8327, 0, 1); } 76.666667% { -webkit-transform: matrix3d(0.99731, 0, 0, 0, 0, 0.99731, 0, 0, 0, 0, 1, 0, 0, -49.86535, 0, 1); transform: matrix3d(0.99731, 0, 0, 0, 0, 0.99731, 0, 0, 0, 0, 1, 0, 0, -49.86535, 0, 1); } 78.333333% { -webkit-transform: matrix3d(0.99826, 0, 0, 0, 0, 0.99826, 0, 0, 0, 0, 1, 0, 0, -49.91311, 0, 1); transform: matrix3d(0.99826, 0, 0, 0, 0, 0.99826, 0, 0, 0, 0, 1, 0, 0, -49.91311, 0, 1); } 80% { -webkit-transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99929, 0, 0, 0, 0, 1, 0, 0, -49.96465, 0, 1); transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99929, 0, 0, 0, 0, 1, 0, 0, -49.96465, 0, 1); } 81.666667% { -webkit-transform: matrix3d(1.00021, 0, 0, 0, 0, 1.00021, 0, 0, 0, 0, 1, 0, 0, -50.01054, 0, 1); transform: matrix3d(1.00021, 0, 0, 0, 0, 1.00021, 0, 0, 0, 0, 1, 0, 0, -50.01054, 0, 1); } 83.333333% { -webkit-transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, -50.0444, 0, 1); transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, -50.0444, 0, 1); } 85% { -webkit-transform: matrix3d(1.00127, 0, 0, 0, 0, 1.00127, 0, 0, 0, 0, 1, 0, 0, -50.0633, 0, 1); transform: matrix3d(1.00127, 0, 0, 0, 0, 1.00127, 0, 0, 0, 0, 1, 0, 0, -50.0633, 0, 1); } 86.666667% { -webkit-transform: matrix3d(1.00135, 0, 0, 0, 0, 1.00135, 0, 0, 0, 0, 1, 0, 0, -50.06743, 0, 1); transform: matrix3d(1.00135, 0, 0, 0, 0, 1.00135, 0, 0, 0, 0, 1, 0, 0, -50.06743, 0, 1); } 88.333333% { -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 1.00119, 0, 0, 0, 0, 1, 0, 0, -50.0594, 0, 1); transform: matrix3d(1.00119, 0, 0, 0, 0, 1.00119, 0, 0, 0, 0, 1, 0, 0, -50.0594, 0, 1); } 90% { -webkit-transform: matrix3d(1.00087, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, -50.04329, 0, 1); transform: matrix3d(1.00087, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, -50.04329, 0, 1); } 91.666667% { -webkit-transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00047, 0, 0, 0, 0, 1, 0, 0, -50.02357, 0, 1); transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00047, 0, 0, 0, 0, 1, 0, 0, -50.02357, 0, 1); } 93.333333% { -webkit-transform: matrix3d(1.00009, 0, 0, 0, 0, 1.00009, 0, 0, 0, 0, 1, 0, 0, -50.00434, 0, 1); transform: matrix3d(1.00009, 0, 0, 0, 0, 1.00009, 0, 0, 0, 0, 1, 0, 0, -50.00434, 0, 1); } 95% { -webkit-transform: matrix3d(0.99977, 0, 0, 0, 0, 0.99977, 0, 0, 0, 0, 1, 0, 0, -49.98869, 0, 1); transform: matrix3d(0.99977, 0, 0, 0, 0, 0.99977, 0, 0, 0, 0, 1, 0, 0, -49.98869, 0, 1); } 96.666667% { -webkit-transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, -49.97843, 0, 1); transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, -49.97843, 0, 1); } 98.333333% { -webkit-transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, -49.97405, 0, 1); transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, -49.97405, 0, 1); } 100% { opacity: 1; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -50, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -50, 0, 1); } } @keyframes animation { 0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 1.666667% { -webkit-transform: matrix3d(0.19514, 0, 0, 0, 0, 0.19514, 0, 0, 0, 0, 1, 0, 0, -3.8179, 0, 1); transform: matrix3d(0.19514, 0, 0, 0, 0, 0.19514, 0, 0, 0, 0, 1, 0, 0, -3.8179, 0, 1); } 3.333333% { -webkit-transform: matrix3d(0.48061, 0, 0, 0, 0, 0.48061, 0, 0, 0, 0, 1, 0, 0, -16.89184, 0, 1); transform: matrix3d(0.48061, 0, 0, 0, 0, 0.48061, 0, 0, 0, 0, 1, 0, 0, -16.89184, 0, 1); } 5% { -webkit-transform: matrix3d(0.78868, 0, 0, 0, 0, 0.78868, 0, 0, 0, 0, 1, 0, 0, -35.82897, 0, 1); transform: matrix3d(0.78868, 0, 0, 0, 0, 0.78868, 0, 0, 0, 0, 1, 0, 0, -35.82897, 0, 1); } 6.666667% { -webkit-transform: matrix3d(1.06298, 0, 0, 0, 0, 1.06298, 0, 0, 0, 0, 1, 0, 0, -54.24398, 0, 1); transform: matrix3d(1.06298, 0, 0, 0, 0, 1.06298, 0, 0, 0, 0, 1, 0, 0, -54.24398, 0, 1); } 8.333333% { -webkit-transform: matrix3d(1.26541, 0, 0, 0, 0, 1.26541, 0, 0, 0, 0, 1, 0, 0, -67.42532, 0, 1); transform: matrix3d(1.26541, 0, 0, 0, 0, 1.26541, 0, 0, 0, 0, 1, 0, 0, -67.42532, 0, 1); } 10% { -webkit-transform: matrix3d(1.37835, 0, 0, 0, 0, 1.37835, 0, 0, 0, 0, 1, 0, 0, -73.79667, 0, 1); transform: matrix3d(1.37835, 0, 0, 0, 0, 1.37835, 0, 0, 0, 0, 1, 0, 0, -73.79667, 0, 1); } 11.666667% { -webkit-transform: matrix3d(1.40302, 0, 0, 0, 0, 1.40302, 0, 0, 0, 0, 1, 0, 0, -74.15221, 0, 1); transform: matrix3d(1.40302, 0, 0, 0, 0, 1.40302, 0, 0, 0, 0, 1, 0, 0, -74.15221, 0, 1); } 13.333333% { opacity: 1; -webkit-transform: matrix3d(1.35507, 0, 0, 0, 0, 1.35507, 0, 0, 0, 0, 1, 0, 0, -70.32855, 0, 1); transform: matrix3d(1.35507, 0, 0, 0, 0, 1.35507, 0, 0, 0, 0, 1, 0, 0, -70.32855, 0, 1); } 15% { -webkit-transform: matrix3d(1.25874, 0, 0, 0, 0, 1.25874, 0, 0, 0, 0, 1, 0, 0, -64.25506, 0, 1); transform: matrix3d(1.25874, 0, 0, 0, 0, 1.25874, 0, 0, 0, 0, 1, 0, 0, -64.25506, 0, 1); } 16.666667% { -webkit-transform: matrix3d(1.14088, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, -57.53621, 0, 1); transform: matrix3d(1.14088, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, -57.53621, 0, 1); } 18.333333% { -webkit-transform: matrix3d(1.02595, 0, 0, 0, 0, 1.02595, 0, 0, 0, 0, 1, 0, 0, -51.35907, 0, 1); transform: matrix3d(1.02595, 0, 0, 0, 0, 1.02595, 0, 0, 0, 0, 1, 0, 0, -51.35907, 0, 1); } 20% { -webkit-transform: matrix3d(0.93241, 0, 0, 0, 0, 0.93241, 0, 0, 0, 0, 1, 0, 0, -46.51039, 0, 1); transform: matrix3d(0.93241, 0, 0, 0, 0, 0.93241, 0, 0, 0, 0, 1, 0, 0, -46.51039, 0, 1); } 21.666667% { -webkit-transform: matrix3d(0.87106, 0, 0, 0, 0, 0.87106, 0, 0, 0, 0, 1, 0, 0, -43.40452, 0, 1); transform: matrix3d(0.87106, 0, 0, 0, 0, 0.87106, 0, 0, 0, 0, 1, 0, 0, -43.40452, 0, 1); } 23.333333% { -webkit-transform: matrix3d(0.84491, 0, 0, 0, 0, 0.84491, 0, 0, 0, 0, 1, 0, 0, -42.11433, 0, 1); transform: matrix3d(0.84491, 0, 0, 0, 0, 0.84491, 0, 0, 0, 0, 1, 0, 0, -42.11433, 0, 1); } 25% { -webkit-transform: matrix3d(0.85043, 0, 0, 0, 0, 0.85043, 0, 0, 0, 0, 1, 0, 0, -42.42524, 0, 1); transform: matrix3d(0.85043, 0, 0, 0, 0, 0.85043, 0, 0, 0, 0, 1, 0, 0, -42.42524, 0, 1); } 26.666667% { -webkit-transform: matrix3d(0.87962, 0, 0, 0, 0, 0.87962, 0, 0, 0, 0, 1, 0, 0, -43.92027, 0, 1); transform: matrix3d(0.87962, 0, 0, 0, 0, 0.87962, 0, 0, 0, 0, 1, 0, 0, -43.92027, 0, 1); } 28.333333% { -webkit-transform: matrix3d(0.92232, 0, 0, 0, 0, 0.92232, 0, 0, 0, 0, 1, 0, 0, -46.08478, 0, 1); transform: matrix3d(0.92232, 0, 0, 0, 0, 0.92232, 0, 0, 0, 0, 1, 0, 0, -46.08478, 0, 1); } 30% { -webkit-transform: matrix3d(0.96839, 0, 0, 0, 0, 0.96839, 0, 0, 0, 0, 1, 0, 0, -48.40959, 0, 1); transform: matrix3d(0.96839, 0, 0, 0, 0, 0.96839, 0, 0, 0, 0, 1, 0, 0, -48.40959, 0, 1); } 31.666667% { -webkit-transform: matrix3d(1.00942, 0, 0, 0, 0, 1.00942, 0, 0, 0, 0, 1, 0, 0, -50.47334, 0, 1); transform: matrix3d(1.00942, 0, 0, 0, 0, 1.00942, 0, 0, 0, 0, 1, 0, 0, -50.47334, 0, 1); } 33.333333% { -webkit-transform: matrix3d(1.0397, 0, 0, 0, 0, 1.0397, 0, 0, 0, 0, 1, 0, 0, -51.99258, 0, 1); transform: matrix3d(1.0397, 0, 0, 0, 0, 1.0397, 0, 0, 0, 0, 1, 0, 0, -51.99258, 0, 1); } 35% { -webkit-transform: matrix3d(1.05659, 0, 0, 0, 0, 1.05659, 0, 0, 0, 0, 1, 0, 0, -52.83794, 0, 1); transform: matrix3d(1.05659, 0, 0, 0, 0, 1.05659, 0, 0, 0, 0, 1, 0, 0, -52.83794, 0, 1); } 36.666667% { -webkit-transform: matrix3d(1.06028, 0, 0, 0, 0, 1.06028, 0, 0, 0, 0, 1, 0, 0, -53.02083, 0, 1); transform: matrix3d(1.06028, 0, 0, 0, 0, 1.06028, 0, 0, 0, 0, 1, 0, 0, -53.02083, 0, 1); } 38.333333% { -webkit-transform: matrix3d(1.05311, 0, 0, 0, 0, 1.05311, 0, 0, 0, 0, 1, 0, 0, -52.65993, 0, 1); transform: matrix3d(1.05311, 0, 0, 0, 0, 1.05311, 0, 0, 0, 0, 1, 0, 0, -52.65993, 0, 1); } 40% { -webkit-transform: matrix3d(1.0387, 0, 0, 0, 0, 1.0387, 0, 0, 0, 0, 1, 0, 0, -51.93743, 0, 1); transform: matrix3d(1.0387, 0, 0, 0, 0, 1.0387, 0, 0, 0, 0, 1, 0, 0, -51.93743, 0, 1); } 41.666667% { -webkit-transform: matrix3d(1.02107, 0, 0, 0, 0, 1.02107, 0, 0, 0, 0, 1, 0, 0, -51.05459, 0, 1); transform: matrix3d(1.02107, 0, 0, 0, 0, 1.02107, 0, 0, 0, 0, 1, 0, 0, -51.05459, 0, 1); } 43.333333% { -webkit-transform: matrix3d(1.00388, 0, 0, 0, 0, 1.00388, 0, 0, 0, 0, 1, 0, 0, -50.19419, 0, 1); transform: matrix3d(1.00388, 0, 0, 0, 0, 1.00388, 0, 0, 0, 0, 1, 0, 0, -50.19419, 0, 1); } 45% { -webkit-transform: matrix3d(0.98989, 0, 0, 0, 0, 0.98989, 0, 0, 0, 0, 1, 0, 0, -49.4943, 0, 1); transform: matrix3d(0.98989, 0, 0, 0, 0, 0.98989, 0, 0, 0, 0, 1, 0, 0, -49.4943, 0, 1); } 46.666667% { -webkit-transform: matrix3d(0.98072, 0, 0, 0, 0, 0.98072, 0, 0, 0, 0, 1, 0, 0, -49.03539, 0, 1); transform: matrix3d(0.98072, 0, 0, 0, 0, 0.98072, 0, 0, 0, 0, 1, 0, 0, -49.03539, 0, 1); } 48.333333% { -webkit-transform: matrix3d(0.9768, 0, 0, 0, 0, 0.9768, 0, 0, 0, 0, 1, 0, 0, -48.83983, 0, 1); transform: matrix3d(0.9768, 0, 0, 0, 0, 0.9768, 0, 0, 0, 0, 1, 0, 0, -48.83983, 0, 1); } 50% { -webkit-transform: matrix3d(0.97763, 0, 0, 0, 0, 0.97763, 0, 0, 0, 0, 1, 0, 0, -48.88146, 0, 1); transform: matrix3d(0.97763, 0, 0, 0, 0, 0.97763, 0, 0, 0, 0, 1, 0, 0, -48.88146, 0, 1); } 51.666667% { -webkit-transform: matrix3d(0.98199, 0, 0, 0, 0, 0.98199, 0, 0, 0, 0, 1, 0, 0, -49.09973, 0, 1); transform: matrix3d(0.98199, 0, 0, 0, 0, 0.98199, 0, 0, 0, 0, 1, 0, 0, -49.09973, 0, 1); } 53.333333% { -webkit-transform: matrix3d(0.98838, 0, 0, 0, 0, 0.98838, 0, 0, 0, 0, 1, 0, 0, -49.41905, 0, 1); transform: matrix3d(0.98838, 0, 0, 0, 0, 0.98838, 0, 0, 0, 0, 1, 0, 0, -49.41905, 0, 1); } 55% { -webkit-transform: matrix3d(0.99527, 0, 0, 0, 0, 0.99527, 0, 0, 0, 0, 1, 0, 0, -49.76363, 0, 1); transform: matrix3d(0.99527, 0, 0, 0, 0, 0.99527, 0, 0, 0, 0, 1, 0, 0, -49.76363, 0, 1); } 56.666667% { -webkit-transform: matrix3d(1.00141, 0, 0, 0, 0, 1.00141, 0, 0, 0, 0, 1, 0, 0, -50.07044, 0, 1); transform: matrix3d(1.00141, 0, 0, 0, 0, 1.00141, 0, 0, 0, 0, 1, 0, 0, -50.07044, 0, 1); } 58.333333% { -webkit-transform: matrix3d(1.00594, 0, 0, 0, 0, 1.00594, 0, 0, 0, 0, 1, 0, 0, -50.29687, 0, 1); transform: matrix3d(1.00594, 0, 0, 0, 0, 1.00594, 0, 0, 0, 0, 1, 0, 0, -50.29687, 0, 1); } 60% { -webkit-transform: matrix3d(1.00846, 0, 0, 0, 0, 1.00846, 0, 0, 0, 0, 1, 0, 0, -50.4232, 0, 1); transform: matrix3d(1.00846, 0, 0, 0, 0, 1.00846, 0, 0, 0, 0, 1, 0, 0, -50.4232, 0, 1); } 61.666667% { -webkit-transform: matrix3d(1.00902, 0, 0, 0, 0, 1.00902, 0, 0, 0, 0, 1, 0, 0, -50.4508, 0, 1); transform: matrix3d(1.00902, 0, 0, 0, 0, 1.00902, 0, 0, 0, 0, 1, 0, 0, -50.4508, 0, 1); } 63.333333% { -webkit-transform: matrix3d(1.00794, 0, 0, 0, 0, 1.00794, 0, 0, 0, 0, 1, 0, 0, -50.39716, 0, 1); transform: matrix3d(1.00794, 0, 0, 0, 0, 1.00794, 0, 0, 0, 0, 1, 0, 0, -50.39716, 0, 1); } 65% { -webkit-transform: matrix3d(1.00579, 0, 0, 0, 0, 1.00579, 0, 0, 0, 0, 1, 0, 0, -50.28941, 0, 1); transform: matrix3d(1.00579, 0, 0, 0, 0, 1.00579, 0, 0, 0, 0, 1, 0, 0, -50.28941, 0, 1); } 66.666667% { -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, -50.15758, 0, 1); transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, -50.15758, 0, 1); } 68.333333% { -webkit-transform: matrix3d(1.00058, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, -50.02902, 0, 1); transform: matrix3d(1.00058, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, -50.02902, 0, 1); } 70% { -webkit-transform: matrix3d(0.99849, 0, 0, 0, 0, 0.99849, 0, 0, 0, 0, 1, 0, 0, -49.9244, 0, 1); transform: matrix3d(0.99849, 0, 0, 0, 0, 0.99849, 0, 0, 0, 0, 1, 0, 0, -49.9244, 0, 1); } 71.666667% { -webkit-transform: matrix3d(0.99712, 0, 0, 0, 0, 0.99712, 0, 0, 0, 0, 1, 0, 0, -49.85578, 0, 1); transform: matrix3d(0.99712, 0, 0, 0, 0, 0.99712, 0, 0, 0, 0, 1, 0, 0, -49.85578, 0, 1); } 73.333333% { -webkit-transform: matrix3d(0.99653, 0, 0, 0, 0, 0.99653, 0, 0, 0, 0, 1, 0, 0, -49.82653, 0, 1); transform: matrix3d(0.99653, 0, 0, 0, 0, 0.99653, 0, 0, 0, 0, 1, 0, 0, -49.82653, 0, 1); } 75% { -webkit-transform: matrix3d(0.99665, 0, 0, 0, 0, 0.99665, 0, 0, 0, 0, 1, 0, 0, -49.8327, 0, 1); transform: matrix3d(0.99665, 0, 0, 0, 0, 0.99665, 0, 0, 0, 0, 1, 0, 0, -49.8327, 0, 1); } 76.666667% { -webkit-transform: matrix3d(0.99731, 0, 0, 0, 0, 0.99731, 0, 0, 0, 0, 1, 0, 0, -49.86535, 0, 1); transform: matrix3d(0.99731, 0, 0, 0, 0, 0.99731, 0, 0, 0, 0, 1, 0, 0, -49.86535, 0, 1); } 78.333333% { -webkit-transform: matrix3d(0.99826, 0, 0, 0, 0, 0.99826, 0, 0, 0, 0, 1, 0, 0, -49.91311, 0, 1); transform: matrix3d(0.99826, 0, 0, 0, 0, 0.99826, 0, 0, 0, 0, 1, 0, 0, -49.91311, 0, 1); } 80% { -webkit-transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99929, 0, 0, 0, 0, 1, 0, 0, -49.96465, 0, 1); transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99929, 0, 0, 0, 0, 1, 0, 0, -49.96465, 0, 1); } 81.666667% { -webkit-transform: matrix3d(1.00021, 0, 0, 0, 0, 1.00021, 0, 0, 0, 0, 1, 0, 0, -50.01054, 0, 1); transform: matrix3d(1.00021, 0, 0, 0, 0, 1.00021, 0, 0, 0, 0, 1, 0, 0, -50.01054, 0, 1); } 83.333333% { -webkit-transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, -50.0444, 0, 1); transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, -50.0444, 0, 1); } 85% { -webkit-transform: matrix3d(1.00127, 0, 0, 0, 0, 1.00127, 0, 0, 0, 0, 1, 0, 0, -50.0633, 0, 1); transform: matrix3d(1.00127, 0, 0, 0, 0, 1.00127, 0, 0, 0, 0, 1, 0, 0, -50.0633, 0, 1); } 86.666667% { -webkit-transform: matrix3d(1.00135, 0, 0, 0, 0, 1.00135, 0, 0, 0, 0, 1, 0, 0, -50.06743, 0, 1); transform: matrix3d(1.00135, 0, 0, 0, 0, 1.00135, 0, 0, 0, 0, 1, 0, 0, -50.06743, 0, 1); } 88.333333% { -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 1.00119, 0, 0, 0, 0, 1, 0, 0, -50.0594, 0, 1); transform: matrix3d(1.00119, 0, 0, 0, 0, 1.00119, 0, 0, 0, 0, 1, 0, 0, -50.0594, 0, 1); } 90% { -webkit-transform: matrix3d(1.00087, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, -50.04329, 0, 1); transform: matrix3d(1.00087, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, -50.04329, 0, 1); } 91.666667% { -webkit-transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00047, 0, 0, 0, 0, 1, 0, 0, -50.02357, 0, 1); transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00047, 0, 0, 0, 0, 1, 0, 0, -50.02357, 0, 1); } 93.333333% { -webkit-transform: matrix3d(1.00009, 0, 0, 0, 0, 1.00009, 0, 0, 0, 0, 1, 0, 0, -50.00434, 0, 1); transform: matrix3d(1.00009, 0, 0, 0, 0, 1.00009, 0, 0, 0, 0, 1, 0, 0, -50.00434, 0, 1); } 95% { -webkit-transform: matrix3d(0.99977, 0, 0, 0, 0, 0.99977, 0, 0, 0, 0, 1, 0, 0, -49.98869, 0, 1); transform: matrix3d(0.99977, 0, 0, 0, 0, 0.99977, 0, 0, 0, 0, 1, 0, 0, -49.98869, 0, 1); } 96.666667% { -webkit-transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, -49.97843, 0, 1); transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, -49.97843, 0, 1); } 98.333333% { -webkit-transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, -49.97405, 0, 1); transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, -49.97405, 0, 1); } 100% { opacity: 1; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -50, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -50, 0, 1); } } </style> </head> <body> <div class="container"> <div class="sentence"> <h1>Yay! Jelly text </h1> <h2>move your mouse around</h2> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> const sentence = document.querySelector('.sentence') const h1 = document.querySelector('h1') const h2 = document.querySelector('h2') let wordsToArray = (str) => str.split('').map(e => e === ' ' ? ' ' : e) function insertSpan(elem, letters, startTime) { elem.textContent = '' let curr = 0 let delay = 20 for(let letter of letters) { let span = document.createElement('span') span.innerHTML = letter span.style.animationDelay = (++curr / delay + (startTime || 0)) + 's' elem.appendChild(span) } } insertSpan(h1, wordsToArray(h1.textContent)) insertSpan(h2, wordsToArray(h2.textContent), .5) document.addEventListener('mousemove', e => { let xpos = e.layerX || e.offsetX let ypos = e.layerY || e.offsetY let ax = -(window.innerWidth / 2 - xpos) / 20 let ay = (window.innerHeight / 2 - ypos) / 10 sentence.style.transform = `rotateY(${ax}deg) rotateX(${ay}deg)` }) </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 抖动文字