52 lines
966 B
HTML
52 lines
966 B
HTML
<!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>
|
|
|
|
#app {
|
|
height: 100px;
|
|
width: 100px;
|
|
background-color: salmon;
|
|
transition: all 0.3s; /*只针对数值的变化*/
|
|
/* 动画过渡 */
|
|
}
|
|
|
|
|
|
/* 鼠标悬停 */
|
|
#app:hover {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: seagreen;
|
|
}
|
|
|
|
/* 在盒子最后面生成一个盒子 */
|
|
#app::after {
|
|
content: "后浪";
|
|
}
|
|
/* 在盒子最前面生成一个盒子 */
|
|
#app::before {
|
|
content: "前浪";
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="app">
|
|
--我是app正常内容--
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |