web前端11--伪类与过渡

1、状态伪类选择器

选择元素在不同状态下的样式

  • :hover 当鼠标悬停在元素上时(重点!!!)
css 复制代码
```css
        div:hover{
            width: 600px;
            transform: rotate(15deg);
        }
```

- `:active`:元素被激活(鼠标按下时)的状态。

  • `:focus`:元素获得焦点时。(输入框)
  • `:checked`:(单选/多选)被勾选状态。

2、过渡

transition属性 使对象变化 能渐变效果

transition-duration 过渡持续时间 (常用!)
transition-delay 指过渡开始前的延迟(了解就好)
transition-property 指定要过渡的css属性 all全部

transition-timing-function 过渡期间的速度变化

  • `ease`(默认值):在开始时加速,中间过程缓慢,结束时再次加速。
  • `linear`:过渡或动画在整个过程中保持匀速。
  • `ease-in`:在过渡或动画开始时慢慢加速,后期保持匀速。开始时比默认的`ease`更慢。
  • `ease-out`:在过渡或动画开始时保持匀速,结束时慢慢减速。结束时比默认的`ease`更慢。
    简便方法:一起写
    transition: 1s 2s linear;
css 复制代码
 ## 结构伪类选择器 
//根据在文档结构中的位置 或关系来选择元素的一类伪类
``` css
div p:first-child{
<!-- 选择div下的第一个p元素 -->
}
div p:last-child{
<!-- 选择div下的最后一个p元素 -->
}
div p:nth-child(n){
<!-- 选择div下的第n个p元素 -->
}
div p:nth-last-child(n){
<!-- 选择div下的倒数第n个p元素 -->
}

div p:nth-of-type(3) {
    /* 选择每个父元素下的第三个p类型的元素 */
}

p:nth-last-of-type(2) {
    /* 选择每个父元素下的倒数第2个p类型的元素 */
}

:not(xx) {
    /* 选择除了xx之外的所有元素。 */
}
```

3、伪元素

插入一些额外的内容 伪元素通常以::开头

css 复制代码
p::after{
            content: '你好';
        }
p::before{
            content: 'hello';
        }

4、溢出隐藏

css 复制代码
overflow: hidden;

5、应用实例

1、卡牌

2、手风琴特效

相关推荐
好望角雾眠1 小时前
第三阶段数据库-7:sql中函数,运算符,常用关键字
数据库·笔记·sql·学习·sqlserver·c#
奋斗的小羊羊5 小时前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
前端呆猿5 小时前
深入解析HTML5中的object-fit属性
前端·css·html5
再学一点就睡5 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友6 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
路灯下的光7 小时前
用scss设计一下系统主题有什么方案吗
前端·css·scss
l_tian_tian_7 小时前
SpringClound——网关、服务保护和分布式事务
linux·服务器·前端
一只小风华~7 小时前
CSS @media 媒体查询
前端·css·媒体
shix .8 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
John_ToDebug8 小时前
Chrome 内置扩展 vs WebUI:浏览器内核开发中的选择与实践
前端·c++·chrome