لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 08/22/19 في كل الموقع
-
من خلال هذا الرابط وذلك بتسجيل الدخول ثم الضغط على زر إضافة في أعلى اليسار
1 نقطة -
أهلًا بك، إليك هذا التصميم لصاحبه <!DOCTYPE html> <html> <head> <title>FullScreen Button</title> <style> body, html { margin: 0; background-color: #3498db; } .btn { width: 64px; height: 64px; background-color: #e74c3c; position: absolute; top: 50%; left: 50%; margin-top: -32px; margin-left: -32px; box-shadow: 0 0 0 2px #fff; cursor: pointer; transition: all .2s ease-out; } .btn:active { background-color: #c0392b; } .part1, .part2 { width: 32px; height: 32px; background-image: url(https://cdn0.iconfinder.com/data/icons/feather/96/591275-arrow-up-64.png); background-size: 32px; float: left; transition: all .2s ease-out; } .part1 { transform: rotate(-135deg); position: relative; top: 32px } .part2 { transform: rotate(45deg); } .btn.fullscreen { transform: scale(1.1); } .btn.fullscreen .part1 { transform: rotate(45deg); } .btn.fullscreen .part2 { transform: rotate(225deg); } </style> </head> <body> <div class="btn"> <div class="part1"></div> <div class="part2"></div> </div> <script> document.querySelector('.btn').onclick = function () { this.classList.toggle('fullscreen'); } </script> </body> </html>1 نقطة
