背景色更换和三角形

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两个demo</title> <style type="text/css"> html, body { height: 100%; } div.demo { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 400px; height: 200px; border-width: 0 1px 1px 1px; border-style: solid; border-color: #fff; padding: 1em; color: #fff; font-weight: bold; font-size: 2em; line-height: 1.45; box-sizing: border-box; } div.demo:after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: -webkit-linear-gradient(left, #fff 40px, transparent 0, transparent 80px, #fff 0, #fff 100%); background: linear-gradient(to right, #fff 40px, transparent 0, transparent 80px, #fff 0, #fff 100%); } div.demo:before { content: ""; position: absolute; left: 45px; top: -14px; width: 28px; height: 28px; border-width: 1px; border-style: solid; border-color: #fff transparent transparent #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } </style> <style type="text/css"> .color-picker { width: 100%; background-color: white; padding: 40px 0; } .base-colors, .varied-colors { overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .color, .color-var { float: left; border-radius: 50%; cursor: pointer; } .color { -webkit-transition: all .2s; transition: all .2s; width: 25px; height: 25px; margin: 20px; } .color.active { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .color-var { -webkit-transform: scale(0, 0); transform: scale(0, 0); width: 40px; height: 40px; margin: 10px; } .color-var.visible { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .color-var.active { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } </style> </head> <body> <div class="demo">Some content should be added....</div> <div class="color-picker"></div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> /* Bubble color picker By @Lewitje Have fun with it! */ var colorPicker = (function(){ var config = { baseColors: [ [46, 204, 113], [52, 152, 219], [155, 89, 182], [52, 73, 94], [241, 196, 15], [230, 126, 34], [231, 76, 60] ], lightModifier: 20, darkModifier: 0, transitionDuration: 200, transitionDelay: 25, variationTotal: 10 }; var state = { activeColor: [0, 0, 0] }; function init(){ createColorPicker(function(){ appendBaseColors(); }); addEventListeners(); setFirstColorActive(function(){ setFirstModifiedColorActive(); }); } function setActiveBaseColor(el){ $('.color.active').removeClass('active'); el.addClass('active'); } function setActiveColor(el){ $('.color-var.active').removeClass('active'); el.addClass('active'); state.activeColor = el.data('color').split(','); } function addEventListeners(){ $('body').on('click', '.color', function(){ var color = $(this).data('color').split(','); setActiveBaseColor($(this)); hideVariations(function(){ createVariations(color, function(){ setDelays(function(){ showVariations(); }); }); }); }); $('body').on('click', '.color-var', function(){ setActiveColor($(this)); setBackgroundColor(); }); } function setFirstColorActive(callback){ $('.color').eq(1).trigger('click'); callback(); } function setFirstModifiedColorActive(){ setTimeout(function(){ $('.color-var').eq(7).trigger('click'); }, 500); } function createColorPicker(callback){ $('.color-picker').append('<div class="base-colors"></div>'); $('.color-picker').append('<div class="varied-colors"></div>'); $('.color-picker').append('<div class="active-color"></div>'); $('.color-picker').append('<div class="color-history"></div>'); callback(); } function appendBaseColors(){ for(i = 0; i < config.baseColors.length; i++){ $('.base-colors').append('<div class="color" data-color="' + config.baseColors[i].join() + '" style="background-color: rgb(' + config.baseColors[i].join() + ');"></div>'); } }; function setBackgroundColor(){ $('body').css({ 'background-color': 'rgb(' + state.activeColor + ')' }); } function createVariations(color, callback){ $('.varied-colors').html(''); for(var i = 0; i < config.variationTotal; i++){ var newColor = []; for (var x = 0; x < color.length; x++){ var modifiedColor = (Number(color[x]) - 100) + (config.lightModifier * i); if(modifiedColor <= 0){ modifiedColor = 0; } else if (modifiedColor >= 255){ modifiedColor = 255; } newColor.push(modifiedColor); } $('.varied-colors').append('<div data-color="' + newColor + '" class="color-var" style="background-color: rgb(' + newColor + ');"></div>'); } callback(); } function setDelays(callback){ $('.color-var').each(function(x){ $(this).css({ 'transition': 'transform ' + (config.transitionDuration / 1000) + 's ' + ((config.transitionDelay / 1000) * x) + 's' }); }); callback(); } function showVariations(){ setTimeout(function(){ $('.color-var').addClass('visible'); },(config.transitionDelay * config.variationTotal)); } function hideVariations(callback){ $('.color-var').removeClass('visible').removeClass('active'); setTimeout(function(){ callback(); },(config.transitionDelay * config.variationTotal)); } return{ init: init }; }()); colorPicker.init(); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 背景色更换和三角形