Случайно генерируемые листья на CSS3 и jQuery
|
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 |
*.mask { width: 100px; height: 100px; background: #000; border-top-left-radius: 360px; border-bottom-right-radius: 360px; } .mask { background: #ff5e00; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ff5e00 0%, #f9b42a 18%, #44a574 38%, #28c3d5 58%, #9086e6 74%, #cc6882 88%, #f1a822 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff5e00), color-stop(18%,#f9b42a), color-stop(38%,#44a574), color-stop(58%,#28c3d5), color-stop(74%,#9086e6), color-stop(88%,#cc6882), color-stop(100%,#f1a822)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ff5e00 0%,#f9b42a 18%,#44a574 38%,#28c3d5 58%,#9086e6 74%,#cc6882 88%,#f1a822 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ff5e00 0%,#f9b42a 18%,#44a574 38%,#28c3d5 58%,#9086e6 74%,#cc6882 88%,#f1a822 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ff5e00 0%,#f9b42a 18%,#44a574 38%,#28c3d5 58%,#9086e6 74%,#cc6882 88%,#f1a822 100%); /* IE10+ */ background: linear-gradient(135deg, #ff5e00 0%,#f9b42a 18%,#44a574 38%,#28c3d5 58%,#9086e6 74%,#cc6882 88%,#f1a822 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5e00', endColorstr='#f1a822',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ background-size: 600px 600px; background-repeat: no-repeat; opacity: 0.6; position: absolute; top: 0px; left: 0px; } .mask2 { top: 50px; left: 790px; background-position: -790px -50px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script> $(document).ready(function(){ for(var i=0;i<65;i++){ var rand_x = Math.random()*$(document).innerWidth(); var rand_y = Math.random()*$(document).innerHeight(); var rand_deg = Math.random()*360; $("body").append("<div class='mask' style='top:"+rand_y+"px; left:"+rand_x+"px; background-position: -"+rand_x+"px -"+rand_y+"px; -webkit-transform: rotate("+rand_deg+"deg);'></div>"); }; $(".mask").css("background-size", $(document).width()+"px "+$(document).height()+"px"); }); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
