css-过度模块

最新推荐文章于 2024-01-28 19:18:07 发布

vivianlisunny

最新推荐文章于 2024-01-28 19:18:07 发布

阅读量297

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/vivianlisunny/article/details/77103588

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、a标签伪类选择器
1、标签存在一定的状态：
1.1、默认状态：从未被访问过
1.2、被访问过的状态
1.3、鼠标长按的状态
1.4、鼠标悬停在a标签上的状态

2、a标签伪类选择器是专门用来修改a标签不同状态的样式的
2.1、:link修改从未被访问过的样式

a:link{
          color: tomato;
      }

2.2、:visited修改被访问过的状态下的样式

a:visited{
            color: green;
        }

2.3、:active修改长按状态下的样式

a:active{
            color: orange;
        }

2.4、:hover修改悬停在a标签上状态下的样式
a:hover{
color: yellow;
}
3、注意点
3.1、a标签的伪类选择器可以单独出现，也可以一起出现
3.2、a标签的伪类选择器如果一起出现，有严格的顺序要求：link、visited、hover、active
3.3、如果默认状态下的样式和被访问状态下的样式一样，可以缩写

a{
            color: green;
        }

二、过度模块
1.1、其它标签也可以使用伪类选择器:hover，表示悬停在这个标签上
1.2、过度三要素：过度效果必须要有属性发生变化；哪个属性需要执行过度效果；必须告诉系统过度执行时间
1.3、当多个属性要执行过度效果时，属性之间、过度时间之间用逗号隔开即可
1.4、过度连写属性：
transition:过度属性过度时长运动速度延迟时间
transition: width 5s linear 0s;

<head>
    <meta charset="UTF-8">
    <title>过度模块</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 30px;
            background-color: red;
            /*告诉系统哪个属性需要执行过度效果*/
            transition-property: width;
            /*过度效果持续时长*/
            transition-duration: 5s;
            /*延迟2秒再执行过度效果*/
            transition-delay: 2s

            /*transition: width 5s linear 0s;*/
        }
        div:hover{
            width: 300px;
        }
    </style>
</head>

<body>
<div></div>
</body>

过度弹性效果练习：

<head>
    <meta charset="UTF-8">
    <title>过度模块</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 100px;
            background-color: red;
            margin-top: 100px;
            text-align: center;
            line-height: 100px;
        }
        div span{
            font-size: 80px;
            /*transition-property: margin;*/
            /*transition-duration: 3s;*/
            transition: margin 3s;
        }
        div:hover span{
            margin: 0 20px;
        }
    </style>
</head>

<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
</div>
</body>

vivianlisunny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-过度模块

一、a标签伪类选择器 1、标签存在一定的状态： 1.1、默认状态：从未被访问过 1.2、被访问过的状态 1.3、鼠标长按的状态 1.4、鼠标悬停在a标签上的状态2、a标签伪类选择器是专门用来修改a标签不同状态的样式的 2.1、:link修改从未被访问过的样式a:link{ color: tomato; }2.2、:visited修改被访问过的状态下的样式a
复制链接

扫一扫

专栏目录