CSS学习记录8/a标签的伪类选择器/弹性效果/手风琴效果

最新推荐文章于 2023-10-12 20:55:13 发布

小婵婵不怕鬼

最新推荐文章于 2023-10-12 20:55:13 发布

阅读量456

点赞数 1

分类专栏： css学习文章标签： css 学习 css3

本文链接：https://blog.csdn.net/qq_49080239/article/details/125539394

版权

css学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

a标签存在一定的状态：
1、默认状态，从未被访问过
2、被访问过
3、鼠标悬停在a标签上的状态
4、鼠标长按

a标签的伪类选择器：专门用来修改a标签不同状态的样式的。
:link修改从未被访问过状态下的样式
:visited修改被访问过的状态下的样式
:hover用来修改鼠标悬停在a标签上的状态的样式
:active专门用来修改鼠标长按状态下的样式

注意点：
1、a标签的伪类选择器可以单独出现也可以一起出现。
2、a标签的伪类选择器如果一起出现，那么有严格的顺序要求。爱恨原则love hate
3、如果默认状态下的样式和被访问过的样式一样，可以缩写。
格式：

a{
   属性: 取值;
}

导航条练习

<style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        ul{
            width: 960px;
            height: 40px;
            background-color: #ffcaf3;
            margin: 100px auto;
        }
        li{
            list-style: none;
            width: 120px;
            height: 40px;
            float: left;
            text-align: center;
            line-height: 40px;
        }
        ul li a{
            width: 120px;
            height: 40px;
            display: inline-block;
        }
        a:link{
            color: white;
            text-decoration: none;
        }
        a:visited{
            color: white;
        }
        a:hover{
            color: red;
            background-color: #cccccc;
        }
        a:active{
            color: yellow;
        }

    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
    </ul>
</div>
</body>

结果：
导航条
注意点：
在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面。
2、在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式宽度高度 padding margin）
3、在企业开发中和a标签文字、背景相关的写在伪类选择器中。

:hover这个伪类选择器除了可以用在a标签上，还可以用在其它任何标签上。

过渡三要素：
1、必须要有属性发生变化
2、必须告诉系统哪个属性需要执行过度效果。
3、告诉系统过度效果持续的时长。

注意点：当多个属性需要同时执行过渡效果时，用逗号隔开。
例：

div{
            width: 100px;
            height: 50px;
            background-color: #ffcaf3;
            transition-property: width,background-color;
            transition-duration: 5s,3s;
        }
        div:hover{
            width: 300px;
            background-color: cornflowerblue;
        }

transition-property: 告诉系统哪个属性需要执行过度效果。
transition-duration:告诉系统过度效果持续的时长。
transition-delay:告诉系统延迟多少秒之后才开始过渡动画。
transition-timing-function:告诉系统过渡动画的运动速度。
linear; 匀速
ease; 逐渐慢下来
ease-in; 加速
ease-out;减速
ease-in-out;先加速后减速
webstorm中同时选中多段代码快捷键：shift+alt鼠标选中一段代码，松掉shift，鼠标选中其他段代码。
例：

ul{
            width: 800px;
            height: 500px;
            margin: 0 auto;
            background-color: #ffcaf3;
            border: 1px solid #000;
        }
        li{
            list-style: none;
            width: 100px;
            height: 50px;
            margin-top: 50px;
            background-color: cornflowerblue;
            transition-property: margin-left;
            transition-duration: 10s;
        }
        ul:hover li{
            margin-left: 700px;
        }
        ul li:nth-child(1){
            transition-timing-function: linear;
        }
        ul li:nth-child(2){
            transition-timing-function: ease;
        }
        ul li:nth-child(3){
            transition-timing-function: ease-in;
        }
        ul li:nth-child(4){
            transition-timing-function: ease-out;
        }
        ul li:nth-child(5){
            transition-timing-function: ease-in-out;
        }

结果：
过渡动画
过渡模块连写：
格式：transition: 过渡属性过渡时长运动速度延迟时间;

注意点：
1、当多个属性需要同时执行过渡效果时，用逗号隔开。
例：transition: width 5s ease-in 2s,background-color 5s ease-in 2s;
2、连写的时候可以省略后面的两个参数，因为编写了前面两个参数就满足了过渡的三要素。
3、如果多个属性运动的速度、延迟时间、持续时间都一样，那么可以简写为transition: all 时间。

弹性效果练习：

<style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        div{
            height: 100px;
            background-color: #ffcaf3;
            margin-top: 100px;
            text-align: center;
            line-height: 100px;
        }
        span{
            font-size: 80px;
            color: white;
            transition: margin 5s linear 0s;
        }
        div:hover span{
            margin: 0 20px;
        }
    </style>
</head>
<body>
<div>
    <span>我</span><span>是</span><span>最</span><span>棒</span><span>的</span><span>哈</span><span>哈</span><span>哈</span>
</div>
</body>

结果：
弹性效果

完成过渡效果套路：
1、不要管过渡，先编写基本界面。
2、修改我们认为需要修改的属性。
3、再回去给修改属性的的那个元素添加过渡即可。

手风琴效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        ul{
            width: 960px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
            overflow: hidden;
        }
        li{
            list-style: none;
            width: 160px;
            height: 300px;
            float: left;
            border: 1px solid #000;
            box-sizing: border-box;
            transition: width 1s;
        }
        ul:hover li{
            width: 100px;
        }
        ul li:hover{
            width: 460px;
        }
    </style>
</head>
<body>
<ul>
    <li><img src="images/sucai1.jpg"></li>
    <li><img src="images/sucai2.jpg"></li>
    <li><img src="images/sucai3.jpg"></li>
    <li><img src="images/sucai4.jpg"></li>
    <li><img src="images/sucai5.jpg"></li>
    <li><img src="images/sucai6.jpg"></li>
</ul>
</body>
</html>

结果;
手风琴效果

小婵婵不怕鬼

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习记录8/a标签的伪类选择器/弹性效果/手风琴效果

a标签存在一定的状态：1、默认状态，从未被访问过2、被访问过3、鼠标悬停在a标签上的状态4、鼠标长按a标签的伪类选择器：专门用来修改a标签不同状态的样式的。:link修改从未被访问过状态下的样式:visited修改被访问过的状态下的样式:hover用来修改鼠标悬停在a标签上的状态的样式:active专门用来修改鼠标长按状态下的样式注意点：1、a标签的伪类选择器可以单独出现也可以一起出现。2、a标签的伪类选择器如果一起出现，那么有严格的顺序要求。爱恨原则love hate3、如果默认状态
复制链接

扫一扫