css-过度模块

来源：互联网发布：淘宝动漫周边店编辑：程序博客网时间：2024/05/23 15:39

一、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>

阅读全文

0 0