极客教程CSS Focus伪类
在网页开发中，CSS的:focus伪类用于设置元素在获得焦点时的样式。当用户点击或通过键盘导航到一个可聚焦的元素时，该元素就会获得焦点。通过使用:focus伪类，我们可以为这些元素定义特定的样式，以提高用户体验和可访问性。
基本用法
:focus伪类可以应用于任何可以获得焦点的元素，比如链接、按钮、输入框等。下面是一个简单的示例，当输入框获得焦点时，边框颜色会改变：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
input:focus {
border: 2px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>
Output:
在上面的示例中，当输入框获得焦点时，边框颜色会变成红色。这样用户就可以清楚地知道他们正在与哪个元素交互。
改变背景颜色
除了改变边框颜色，我们还可以通过:focus伪类来改变元素的背景颜色。下面是一个示例，当按钮获得焦点时，背景颜色会变成蓝色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
Output:
在上面的示例中，当按钮获得焦点时，背景颜色会变成蓝色，文字颜色会变成白色。这样用户就可以清楚地知道他们正在与哪个按钮交互。
改变文本样式
除了改变背景颜色，我们还可以通过:focus伪类来改变元素的文本样式。下面是一个示例，当链接获得焦点时，文本颜色会变成绿色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
a:focus {
color: green;
}
</style>
</head>
<body>
<a href="#">Click Me</a>
</body>
</html>
Output:
在上面的示例中，当链接获得焦点时，文本颜色会变成绿色。这样用户就可以清楚地知道他们正在与哪个链接交互。
改变字体大小
除了改变文本颜色，我们还可以通过:focus伪类来改变元素的字体大小。下面是一个示例，当段落获得焦点时，字体大小会变成20px：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
p:focus {
font-size: 20px;
}
</style>
</head>
<body>
<p>Geek-docs.com</p>
</body>
</html>
Output:
在上面的示例中，当段落获得焦点时，字体大小会变成20px。这样用户就可以清楚地知道他们正在与哪个段落交互。
改变边框样式
除了改变背景颜色和文本样式，我们还可以通过:focus伪类来改变元素的边框样式。下面是一个示例，当复选框获得焦点时，边框样式会变成虚线：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
input[type="checkbox"]:focus {
border: 2px dashed orange;
}
</style>
</head>
<body>
<input type="checkbox">
</body>
</html>
Output:
在上面的示例中，当复选框获得焦点时，边框样式会变成虚线。这样用户就可以清楚地知道他们正在与哪个复选框交互。
改变元素位置
除了改变样式，我们还可以通过:focus伪类来改变元素的位置。下面是一个示例，当图片获得焦点时，会向右移动10px：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
img:focus {
margin-left: 10px;
}
</style>
</head>
<body>
<img src="geek-docs.com/image.jpg" alt="Geek Docs">
</body>
</html>
Output:
在上面的示例中，当图片获得焦点时，会向右移动10px。这样用户就可以清楚地知道他们正在与哪个图片交互。
改变元素透明度
除了改变位置，我们还可以通过:focus伪类来改变元素的透明度。下面是一个示例，当段落获得焦点时，透明度会变成0.5：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
p:focus {
opacity: 0.5;
}
</style>
</head>
<body>
<p>Geek-docs.com</p>
</body>
</html>
Output:
在上面的示例中，当段落获得焦点时，透明度会变成0.5。这样用户就可以清楚地知道他们正在与哪个段落交互。
改变元素阴影
除了改变透明度，我们还可以通过:focus伪类来改变元素的阴影效果。下面是一个示例，当按钮获得焦点时，会显示一个阴影效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
Output:
在上面的示例中，当按钮获得焦点时，会显示一个5px的阴影效果。这样用户就可以清楚楚地知道他们正在与哪个按钮交互。
改变元素大小
除了改变阴影效果，我们还可以通过:focus伪类来改变元素的大小。下面是一个示例，当图片获得焦点时，宽度会变成200px，高度会变成150px：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
img:focus {
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<img src="geek-docs.com/image.jpg" alt="Geek Docs">
</body>
</html>
Output:
在上面的示例中，当图片获得焦点时，宽度会变成200px，高度会变成150px。这样用户就可以清楚地知道他们正在与哪个图片交互。
改变元素旋转
除了改变大小，我们还可以通过:focus伪类来改变元素的旋转角度。下面是一个示例，当按钮获得焦点时，会顺时针旋转45度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
transform: rotate(45deg);
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
Output:
在上面的示例中，当按钮获得焦点时，会顺时针旋转45度。这样用户就可以清楚地知道他们正在与哪个按钮交互。
改变元素背景图片
除了改变旋转角度，我们还可以通过:focus伪类来改变元素的背景图片。下面是一个示例，当按钮获得焦点时，会显示不同的背景图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
background-image: url('geek-docs.com/image.jpg');
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
Output:
在上面的示例中，当按钮获得焦点时，会显示一个名为image.jpg的背景图片。这样用户就可以清楚地知道他们正在与哪个按钮交互。
改变元素边框圆角
除了改变背景图片，我们还可以通过:focus伪类来改变元素的边框圆角。下面是一个示例，当输入框获得焦点时，边框圆角会变成10px：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
input:focus {
border-radius: 10px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>
Output:
在上面的示例中，当输入框获得焦点时，边框圆角会变成10px。这样用户就可以清楚地知道他们正在与哪个输入框交互。
改变元素透明度和颜色
除了单独改变样式属性，我们还可以通过:focus伪类来同时改变元素的透明度和颜色。下面是一个示例，当按钮获得焦点时，透明度会变成0.5，颜色会变成红色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
opacity: 0.5;
color: red;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
Output:
在上面的示例中，当按钮获得焦点时，透明度会变成0.5，颜色会变成红色。这样用户就可以清楚地知道他们正在与哪个按钮交互。
改变元素动画效果
除了改变静态样式，我们还可以通过:focus伪类来改变元素的动画效果。下面是一个示例，当按钮获得焦点时，会有一个缩放动画效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Focus Example</title>
<style>
button:focus {
animation: scale 0.5s ease-in-out;
}
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
Output:
在上面的示例中，当按钮获得焦点时，会有一个持续0.5秒的缩放动画效果。这样用户就可以清楚地知道他们正在与哪个按钮交互。