3D отражение для поля ввода на CSS3 и плагин Angular
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type='text/javascript' src="/js/angular.min.js"></script> <script type='text/javascript'> (function () { angular.module('ngApp', []).controller('MyCtrl', function ($scope, $timeout) { var index, target, writeChar; $scope.thing = ''; target = 'IMAPO.RU'; index = 0; writeChar = function () { if ($scope.thing !== target) { $scope.thing += target.charAt(index++); return $timeout(writeChar, 220); } }; return writeChar(); }); }.call(this)); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #000 } body .thing { position: relative; -webkit-perspective: 200px; perspective: 200px; -webkit-perspective-origin: 50% 0; perspective-origin: 50% 0; } body .thing input { padding: 0.5rem; box-sizing: border-box; font-size: 2rem; } body .thing .i1 { border: 1px solid #666; outline: none; } body .thing .result { position: absolute; width: 100%; height: 100%; left: 0%; top: 90%; border: 1px solid #000; -webkit-filter: blur(3px); filter: blur(3px); pointer-events: none; -webkit-transform: scale(1.1, -1) rotateX(-65deg); transform: scale(1.1, -1) rotateX(-65deg); opacity: 0.3; } |
|
1 2 3 4 |
<div ng-app="ngApp" ng-controller="MyCtrl" class="thing"> <input ng-model="thing" class="result" /> <input ng-model="thing" class="i1" /> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
