html中鼠标经过图片变色，字体上移效果

2024-10-12 09:41:50

1、搜索素材，分析图片效果<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}消除图片及其他的默认填充，边框ul,ol{list-style: none;}消除ul，ol的样式body{background: #555;width: 1000px;height: 1000px;}设置body的高宽，背景色

3、#aa p{position: absolute;left: 30px;top: 260px;color: #fff; opacity: 0;}字体初始位置，透明对0，#aa:hover p{top:215px;opacity: 1;transition: top 0.7s ,opacity 0.5s 0.2s;}opacity透明度#color{background: #00f;opacity: 0.2;position: absolute;top: 0;left: 0;width: 400px;height: 300px;}#color:hover{opacity: 0;transition: opacity;}

5、#m1{float: left;width: 200px;height: 200px;background: #0000FF;animation: abc 1s infinite;}#m2{float: left;width: 200px;height: 200px;background: #00ffFF;animation: abc 1s infinite;}#m3{float: left;width: 200px;height: 200px;background: #0F0;animation: abc 1s infinite;}#m4{float: left;width: 200px;height: 200px;background: #ff00FF;animation: abc 1s infinite;}#m5{position: absolute;top: 100px;left: 100px;background: #48d;width: 200px;height: 200px;animation: a 2s infinite;}</style></head>田字格的设置，