6.4日学习总结css伪元素hover,active,focus 
selector::pseudo-element {
  property: value;
}

添加伪元素的语法为 "选择器" +::+"伪元素"

最常用的伪元素hover,意为鼠标悬浮状态下css显示的样式

以按钮的样式为例

复制代码
.btnst2{
    width:79px;
    font-size:17px;
    padding:5px;
    border-radius:17px;
    background-color:green;
    border:3px solid black;
}
    .btnst2:hover{
        background-color: #008CBA;
          color: white;
          border-radius:17px 0px 3px 0px;
    }
复制代码

悬浮前

悬浮后

active，点击时展示的样式，多用于超链接等可点击控件，下面以超链接为例

a:active
{
background-color:yellow;
}

点击前

点击后

focus，获取焦点时展示的样式，一般用于输入框等需要键鼠输入的对象

 

伪元素可以让不同状态下的对象所展现的样式大不相同，但是突然的变化并不一定能起到美化页面的作用，这里可以使用transition属性来使样式变化从突变变成渐变

示例

复制代码
<!DOCTYPE html>
<html>
<head>
<style> 
h1
{
font-size:17px;
transition:font-size 2s; 

}

h1:hover
{
font-size:71px;
}
</style>
</head>
<body>

<div></div>

<h1>请把鼠标指针移动到文字上，就可以看到过渡效果。</h1>


</body>
</html>
复制代码

要想定义多个属性变化渐变效果，只需要

transition: 属性1 2s, 属性2 1.8s, ......;

即可实现。

 

posted on   XiSoil  阅读(182)  评论(0)  编辑  收藏  举报
相关博文：
· 2023-07-16~07-22第二周暑假生活
· CSS 隐藏元素的方法
· css伪元素
· 伪类、伪对象、伪元素
· 前端学习:css选择器和伪类和伪元素
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具



点击右上角即可分享
微信分享提示