2021-01-16

最新推荐文章于 2023-01-31 09:27:02 发布

时光微痛，岁月长空

最新推荐文章于 2023-01-31 09:27:02 发布

阅读量82

点赞数

原文链接：https://www.bilibili.com/video/BV1et411q74F?p=3

版权

CSS3 新特性学习记录

图片的缩放效果

  img{
            border-radius: 50%;
            transition: all 0.5s;
            -webkit-transition: all 0.5s;/*浏览器内核的选择*/
            -o-transition: all 0.5s;/*过度时间效果*/
            cursor: pointer;/*手势进入*/
        }
        img:hover{
            transform:scale(1.6) ;  
        }

transition: 允许CSS属性值在一定的时间区间内平滑的过渡，需要事件的触发，例如单击、获取焦点、失去焦点

浏览器支持适配网站 caniuse.com/#serach=css3

优雅降级，渐进增强

- css3选择器

动态伪类选择器：

动态伪类并不存在于html中，只有当用户和网站交互的时候才会体现出来，链接伪类选择器：E:link（未被访问过）和 E:visited（已被访问过），用户行为伪类选择器：E:active（点击时）、E：hover（鼠标滑过时）、E：focus（元素获得焦点时）

UI元素状态伪类选择器：

所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用
1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。
1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。

  <style>
        input[type="text"]:hover{
            background: green;
        }
        input[type="text"]:focus{
            background: #ff6600;
            color: #fff;
        }
        input[type="text"]:active{
            background: blue;
        }
        input[type="password"]:hover{
            background: red;
        }
    </style>

<form>
    姓名：<input type="text" placeholder="请输入姓名">
    <br/>
    <br/>
    密码：<input type="password" placeholder="请输入密码">
</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input[type="checkbox"]:checked{
        outline: aquamarine;
    }
</style>
<body>
    <form>
        <input type="checkbox"> 水
        <input type="checkbox"> 水
        <input type="checkbox"> 水
        <input type="checkbox"> 水
    </form>
</body>
</html>