描述:运行该文件则可以看到一个旋转的相册,其中一静态图如下图所示:
当鼠标点击其中任意图片后会暂停动画,该选中图片会灰度化(值为30%)且会实现图片水平反转。
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人相册</title>
<style>
*{
padding: 0;
margin: 0;
border: none;
outline: none;
box-sizing: border-box;
}
*:before,*:after{
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;