1.七彩背景开关
<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.切换背景图
<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.中心点波浪纹
<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>