1.七彩背景開關
web
<style> .box { width: 100%; height: 700px; } button { border: none; font-size: 16px; color: #000; border: 1px solid #ccc; margin: 0 5px; } </style> </head> <body> <div class="box"> <button class="status">開關</button> <button class="red">red</button> <button class="orange">orange</button> <button class="yellow">yellow</button> <button class="green">green</button> <button class="cyan">cyan</button> <button class="blue">blue</button> <button class="purple">purple</button> </div> <script> // 綁定事件 var box = document.querySelector('.box'); var statu = document.querySelector('.status'); var flag = 0; statu.onclick = function() { if (flag === 0) { box.style.backgroundColor = '#000'; flag = 1 } else { box.style.backgroundColor = '#000'; flag = 0; } } var box = document.querySelector('.box'); var red = document.querySelector('.red'); // var flag = 0; red.onclick = function() { box.style.backgroundColor = 'red'; } var box = document.querySelector('.box'); var orange = document.querySelector('.orange'); // var flag = 0; orange.onclick = function() { box.style.backgroundColor = 'orange'; } var box = document.querySelector('.box'); var yel = document.querySelector('.yellow'); // var flag = 0; yel.onclick = function() { box.style.backgroundColor = 'yellow'; } var box = document.querySelector('.box'); var gre = document.querySelector('.green'); // var flag = 0; gre.onclick = function() { box.style.backgroundColor = 'green'; } var box = document.querySelector('.box'); var cyan = document.querySelector('.cyan'); // var flag = 0; cyan.onclick = function() { box.style.backgroundColor = 'cyan'; } var box = document.querySelector('.box'); var blue = document.querySelector('.blue'); // var flag = 0; blue.onclick = function() { box.style.backgroundColor = 'skyblue'; } var box = document.querySelector('.box'); var pur = document.querySelector('.purple'); // var flag = 0; pur.onclick = function() { box.style.backgroundColor = 'purple'; } </script>
2.切換背景圖
svg
<style> * { margin: 0; padding: 0; } body { width: 100%; background: url(images/1.jpg) no-repeat center top; } li { list-style: none; } .baidu { overflow: hidden; margin: 100px auto; background-color: #fff; width: 410px; padding-top: 3px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img { width: 100px; } </style> </head> <body> <ul class="baidu"> <li><img src="images/kobe1.jpg"></li> <li><img src="images/k2.jpg"></li> <li><img src="images/k3.jpg"></li> <li><img src="images/k4.jpg"></li> </ul> <script> var imgs = document.querySelector('.baidu').querySelectorAll('img'); for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = function() { document.body.style.backgroundImage = 'url(' + this.src + ')'; } } </script>
3.中心點波浪紋
this
<style> body { background-color: #333; } .map { position: relative; width: 200px; height: 200px; margin: 0 auto; } .city { position: absolute; top: 227px; right: 213px; color: #fff; } .tb { top: 227px; right: 80px; } .dotted { width: 8px; height: 8px; background-color: aqua; border-radius: 50%; } .city div[class^="pulse"] { /* 保證咱們小波紋在父盒子裏面水平垂直居中 放大以後就會中心向四周發散 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; box-shadow: 0 0 12px palevioletred; border-radius: 50%; animation: pulse 1.2s linear infinite; } .city div.pulse2 { animation-delay: 0.4s; } .city div.pulse3 { animation-delay: 0.8s; } @keyframes pulse { 0% {} 70% { /* transform: scale(5); 咱們不要用scale 由於他會讓 陰影變大*/ width: 40px; height: 40px; opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } } </style> </head> <body> <div class="map"> <div class="city"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> <div class="city tb"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> </div> </body>