CSS - 焦点效果

CSS 焦点效果用于使表单元素（如输入字段、按钮和链接）对与网页交互的用户更具动态性和吸引力。

CSS 中的:focus 伪类用于在元素获得焦点（通过单击或按 Tab 键）时对其进行定位。其目的是应用样式或触发特定行为以增强用户体验或提供额外的视觉反馈。

聚焦我！

:focus 是一个工具，可以使交互式元素更具动态性和吸引力，尤其是在用户使用键盘导航时。

什么是焦点伪类？

在 CSS 中，伪类 :focus 是一种选择器，用于定位和设置当元素获得焦点（通常通过键盘导航或鼠标交互）时的样式。
焦点效果主要用于表单字段、按钮等交互式元素，以便向用户清楚地指示获得焦点的元素。
焦点效果有助于为网站添加动态且引人注目的外观，并提高可访问性。

输入字段的 CSS 焦点效果

以下是如何在获得焦点时设置输入字段样式的示例

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .input-field {
            width: 80%; 
            height: 30px; 
            padding: 5px;
            margin: 10px 0;
            background-color: #f0f0f0; 
            border: 1px solid black; 
            font-size: 16px;
            outline: none;
        }
        .input-field:focus {
            border: 3px solid darkblue;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <input type="text" class="input-field" 
               placeholder="Enter your name" tabindex="0">
        <input type="text" class="input-field" 
               placeholder="Enter your email" tabindex="1">
        <input type="text" class="input-field" 
               placeholder="Enter your password" tabindex="2">
    </div>
</body>

</html>

带有焦点效果的 CSS 按钮

以下是如何在聚焦状态下设置按钮样式的示例。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            padding: 10px 20px;
            margin: 10px;
            background-color: #ffffff;
            color: #228B22;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s, color 0.3s;
        }
        button:focus {
            background-color: #FFCC33;
            color: #ffffff;
            outline: none;
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <button> Focus on me! </button>
</body>
</html>

带有焦点效果的 CSS 边框

这是一个示例，它显示了当元素获得焦点时边框是如何变化的

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding: 10px 20px;
            margin: 10px;
            background-color: #228B22;
            color: #ffffff;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
        }
        div:focus {
            border-radius: 20px;
            outline: none;
        }
    </style>
</head>

<body>
      <div tabindex="0"> Focus on me! </div>
</body>

</html>

带有焦点效果的 CSS 盒阴影

这是一个示例，当 div 获得焦点时会添加盒阴影

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            padding: 10px 20px;
            margin: 10px;
            background-color: #228B22;
            color: #ffffff;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
        }
        div:focus {
            box-shadow: 20px 20px 10px grey;
            outline: none;
        }
    </style>
</head>

<body>
    <div tabindex="0"> Focus on me! </div>
</body>

</html>

聚焦时的 CSS 样式

这是一个示例，其中在聚焦时为按钮添加了阴影效果

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 300px;
            overflow: hidden;
            display: grid;
            justify-content: center;
            align-items: center;
        }
    
        .glow {
            padding: 10px;
            width: 250px;
            height: 50px;
            border: none;
            outline: none;
            color: #fff;
            background: #111;
            cursor: pointer;
            position: relative;
            z-index: 0;
            border-radius: 20px;
        }
    
        .glow:before {
            content: '';
            background: linear-gradient(60deg, #ff0000, #ff7300, 
                                #fffb00, #48ff00, #00ffd5, #002bff, 
                                #7a00ff, #ff00c8, #ff0000);
            position: absolute;
            top: -4px;
            left:-4px;
            background-size: 400%;
            z-index: -1;
            filter: blur(15px);
            width: calc(100% + 6px);
            height: calc(100% + 6px);
            animation: glowing 20s linear infinite;
            opacity: 0;
            transition: opacity .3s ease-in-out;
            border-radius: 10px;
        }
    
        .glow:focus:before {
            opacity: 1;
        }
    
        .glow:after {
            z-index: -1;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: #111;
            left: 0;
            top: 0;
            border-radius: 10px;
        }
    
        @keyframes glowing {
            0% { 
                background-position: 0 0; 
            }
            50% { 
                background-position: 400% 0; 
            }
            100% { 
                background-position: 0 0; 
            }
        }
    </style>
</head>

<body>
    <button class="glow" type="button" tabindex="0">
        FOCUS ON ME!
    </button>
</body>
</html>

打印页面