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、手风琴特效

相关推荐
拾光拾趣录3 分钟前
前端面试真题深度解析:闭包、数组操作与 Promise 机制
前端·面试
小小小小宇6 分钟前
react中 baseQueue 和 baseUpdate所起的作用
前端
脑袋大大的17 分钟前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发
coding随想21 分钟前
深入浅出HTML5 CSS类扩展:getElementsByClassName和classList属性
前端·css·html5
程序视点24 分钟前
电脑硬件检测必备!图吧工具箱11年免费良心软件!100+免费工具合集
前端·windows·后端
随笔记35 分钟前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app
陈随易1 小时前
国产之光,把AI融入到语言级别的编程语言-MoonBit
前端·后端·程序员
鹏程十八少1 小时前
9. Android 精通Android高级UI总结:自定义View与动画开发终极实战指南
前端
xianxin_1 小时前
HTML 区块
前端
江城开朗的豌豆1 小时前
让页面"记住自己"——前端状态保留实战技巧
前端·javascript·vue.js