init
This commit is contained in:
52
Html-Css/03-伪类.html
Normal file
52
Html-Css/03-伪类.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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>
|
Reference in New Issue
Block a user