Tất cả các bài viết. CSS3
-
Button
Chạy mã
2. CSS basic for button
Sau khi khung HTML đã hoàn thành, tiếp tục mình sẽ CSS chọn thẻ ở giữa màn hình và màu nền tối cho mọi người dễ nhìn
body { padding: 0; margin: 0; background-color: #787878; } a { position: absolute; left: 50%; top: 50%; transform: translate[-50%, -50%]; background-color: #000000; padding: 20px 40px; text-decoration: none; color: white; text-transform: uppercase; box-shadow: 0 1px 3px .4px #000000; transition: all 0.3s; } a:hover { box-shadow: 0 1px 7px .4px #000000; color: red; }Chạy mã
3. Đường viền CSS cho nút
Tiếp tục chúng ta sẽ css cho 4 thẻ span bên trong thẻ thành viền
Chạy mã
Tiếp theo đó chúng ta sẽ chuyển màu sắc cho khoảng 4 thẻ
/*TOP*/ a span:nth-child[1] { content: ''; position: absolute; width: 100%; height: 3px; background: red linear-gradient[to right, black, red]; top: 0; right: 0; } /*Right*/ a span:nth-child[2] { content: ''; position: absolute; width: 3px; height: 100%; background: red linear-gradient[to bottom, black, red]; top: 0; right: 0; } /*Bottom*/ a span:nth-child[3] { content: ''; position: absolute; width: 100%; height: 3px; background: red linear-gradient[to left, black, red]; bottom: 0; right: 0; } /*Left*/ a span:nth-child[4] { content: ''; position: absolute; width: 3px; height: 100%; background: red linear-gradient[to top, black, red]; top: 0; left: 0; }Chạy mã
Giờ lom đã có vẻ đẹp hơn một chút rồi đó
4, Tạo chuyển động - hoạt ảnh
OK, sau khi css cơ bản tương đối đẹp rồi giờ chúng ta sẽ tạo chuyển động cho nó
@-webkit-keyframes glowing { 0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } } @-moz-keyframes glowing { 0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } } @-o-keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } @keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } .button { -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; }0Phía trên là chuyển động lên phía dưới bên trái phải chọn từng khoảng thời gian thẻ, giờ chúng ta sẽ thiết lập từ khoảng thời gian thẻ ứng với từng hoạt ảnh
@-webkit-keyframes glowing { 0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } } @-moz-keyframes glowing { 0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } } @-o-keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } @keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } .button { -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; }1Chạy mã
Chuyển động đã tương đối đẹp rồi, nhưng để đẹp hơn chúng ta cần ẩn những chi tiết khi chuyển động lòi ra bên ngoài thẻ
@-webkit-keyframes glowing { 0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } } @-moz-keyframes glowing { 0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } } @-o-keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } @keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } .button { -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; }3. by way more@-webkit-keyframes glowing { 0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } } @-moz-keyframes glowing { 0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } } @-o-keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } @keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } .button { -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; }4 to thẻ@-webkit-keyframes glowing { 0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } } @-moz-keyframes glowing { 0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } } @-o-keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } @keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } .button { -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; }3@-webkit-keyframes glowing { 0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } } @-moz-keyframes glowing { 0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } } @-o-keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } @keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } .button { -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; }2Chạy mã
Như vậy là xong, nếu bạn cần chuyển động nhanh hay chậm hơn thì bạn có thể thay đổi thời gian sao cho hợp ý bạn