├── README.md ├── index.html ├── preview.png └── style.css /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pradip Banjara || CC Camera 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/infopradip/cc_camera/70157da9609a6117ca721421499ec363cc7d068f/preview.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | display -moz-box { 2 | display: -ms-flex; 3 | display: flex; 4 | } 5 | .camera-container .circle { 6 | display: -webkit-flex; 7 | -webkit-align-items: center; 8 | align-items: center; 9 | -webkit-justify-content: center; 10 | justify-content: center; 11 | background: radial-gradient(circle at 50% 120%, #ddd, #fff 80%, #000 100%); 12 | border-radius: 50%; 13 | box-shadow: 8px 8px 15px #000; 14 | height: 70px; 15 | width: 70px; 16 | perspective: 1000px; 17 | perspective-origin: 50% 50%; 18 | transform-style: preserve-3d; 19 | } 20 | .camera-container .circle .top { 21 | background-repeat: no-repeat; 22 | background-postion: center; 23 | background-size: contain; 24 | height: 45px; 25 | width: 84px; 26 | z-index: 2; 27 | position: absolute; 28 | top: -12px; 29 | left: -7px; 30 | } 31 | .camera-container .circle .camera-eye { 32 | -webkit-animation: camera 8s infinite linear; 33 | -moz-animation: camera 8s infinite linear; 34 | o-animation: camera 8s infinite linear; 35 | animation: camera 8s infinite linear; 36 | background: linear-gradient(45deg, #222, #444 30%, #444 35%, #222); 37 | border-radius: 50%; 38 | height: 42px; 39 | margin: 10px 0 0 0; 40 | width: 42px; 41 | position: absolute; 42 | left: 14px; 43 | top: 14px; 44 | } 45 | .camera-container .circle .camera-eye .inner-eye { 46 | display: -webkit-flex; 47 | -webkit-justify-content: center; 48 | justify-content: center; 49 | -webkit-align-items: center; 50 | align-items: center; 51 | background: radial-gradient(circle, #111 30%, rgba(255,255,255,0.7)); 52 | border-radius: 50%; 53 | height: 42px; 54 | width: 42px; 55 | } 56 | .camera-container .circle .camera-eye .inner-eye .blinking { 57 | -webkit-animation: colour 2s infinite linear; 58 | -moz-animation: colour 2s infinite linear; 59 | o-animation: colour 2s infinite linear; 60 | animation: colour 2s infinite linear; 61 | border: 3px dotted #93d3ed; 62 | border-radius: 50%; 63 | height: 20px; 64 | width: 20px; 65 | } 66 | body { 67 | background: #05a7d8; 68 | display: -webkit-flex; 69 | display: -ms-flex; 70 | display: flex; 71 | -webkit-align-items: center; 72 | align-items: center; 73 | -webkit-justify-content: flex-end; 74 | justify-content: flex-end; 75 | padding: 40px 60px; 76 | margin: 0; 77 | } 78 | @-moz-keyframes colour { 79 | 0% { 80 | border: 3px dotted #93d3ed; 81 | } 82 | 65% { 83 | border: 3px dotted #93d3ed; 84 | } 85 | 68% { 86 | border: 3px dotted #f00; 87 | } 88 | 75% { 89 | border: 3px dotted #93d3ed; 90 | } 91 | } 92 | @-webkit-keyframes colour { 93 | 0% { 94 | border: 3px dotted #93d3ed; 95 | } 96 | 65% { 97 | border: 3px dotted #93d3ed; 98 | } 99 | 68% { 100 | border: 3px dotted #f00; 101 | } 102 | 75% { 103 | border: 3px dotted #93d3ed; 104 | } 105 | } 106 | @-o-keyframes colour { 107 | 0% { 108 | border: 3px dotted #93d3ed; 109 | } 110 | 65% { 111 | border: 3px dotted #93d3ed; 112 | } 113 | 68% { 114 | border: 3px dotted #f00; 115 | } 116 | 75% { 117 | border: 3px dotted #93d3ed; 118 | } 119 | } 120 | @keyframes colour { 121 | 0% { 122 | border: 3px dotted #93d3ed; 123 | } 124 | 65% { 125 | border: 3px dotted #93d3ed; 126 | } 127 | 68% { 128 | border: 3px dotted #f00; 129 | } 130 | 75% { 131 | border: 3px dotted #93d3ed; 132 | } 133 | } 134 | @-moz-keyframes camera { 135 | 0% { 136 | transform: none; 137 | } 138 | 30% { 139 | transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(0.78); 140 | } 141 | 65% { 142 | transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(0.78); 143 | } 144 | 90% { 145 | transform: none; 146 | } 147 | } 148 | @-webkit-keyframes camera { 149 | 0% { 150 | transform: none; 151 | } 152 | 30% { 153 | transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(0.78); 154 | } 155 | 65% { 156 | transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(0.78); 157 | } 158 | 90% { 159 | transform: none; 160 | } 161 | } 162 | @-o-keyframes camera { 163 | 0% { 164 | transform: none; 165 | } 166 | 30% { 167 | transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(0.78); 168 | } 169 | 65% { 170 | transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(0.78); 171 | } 172 | 90% { 173 | transform: none; 174 | } 175 | } 176 | @keyframes camera { 177 | 0% { 178 | transform: none; 179 | } 180 | 30% { 181 | transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(0.78); 182 | } 183 | 65% { 184 | transform: translateX(-12px) translateY(5px) skewX(25deg) skewY(-3deg) scale(0.78); 185 | } 186 | 90% { 187 | transform: none; 188 | } 189 | } --------------------------------------------------------------------------------