6
Tôi đã nhìn xung quanh và cố gắng một vài ngày, nhưng tôi không thể có được nó ngay 100% ... tôi đang cố gắng đạt được hiệu ứng sau với gradient css3:Hiệu ứng Sunburst với độ dốc css3
gần nhất tôi đã nhận là DEMO:
html {
background:
linear-gradient(80deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(90deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(82deg, transparent 50%, #eee 50%, #eee),
linear-gradient(67deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(52deg, transparent 50%, #eee 50%, #eee),
linear-gradient(37deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(22deg, transparent 50%, #eee 50%, #eee),
linear-gradient(7deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-8deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-23deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-38deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-53deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-68deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-83deg, transparent 50%, #ddd 50%, #ddd);
background-position: center -100%;
background-color: #eee;
background-size: 100% 200%;
min-height: 100%;
}Tôi sẽ tiếp tục thử nó .. bất kỳ trợ giúp nào được đánh giá cao mặc dù.
Cập nhật:
Cần phải có một/cách tái sử dụng tốt hơn để làm điều này ... nhìn vào một giải pháp SCSS, đây là những gì tôi có cho đến nay:
.sunburst {
@for $ray from 1 through 26 {
$color: #eee;
$degree: 7;
@if $ray%2 == 0 {
$color: #ddd;
}
background:linear-gradient($degree+deg, transparent 50%, $color 50%, $color),
}
}
Bây giờ nó chỉ là toán học thực sự đằng sau nó tôi đang cố gắng tìm ra ... cố gắng để ăn cắp logic từ pow.js, nhưng loại khó khăn nếu bạn khủng khiếp như toán học như tôi ...
tôi đã chuyển đổi bản demo của bạn thành một đoạn mã Stack Overflow. (Đừng lo, tôi cũng đã giữ liên kết JSFiddle ở đó). –
wow cảm ơn, đã không biết về các đoạn mã tràn ngăn xếp ..đã không ở đây trong một thời gian. –
cảm ơn @ user2570380 nhưng tôi đang tìm kiếm thứ gì đó dễ hơn một chút trên các trình duyệt cũ hơn .. tôi đã xem qua ... –