4.11日学习笔记

最新推荐文章于 2023-08-03 22:28:50 发布

移动四级包

最新推荐文章于 2023-08-03 22:28:50 发布

阅读量188

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/sourire0323/article/details/79906122

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

伪元素/伪对象选择器 ::/:
    不在html结构中,在结构外
    不是一个元素==>如果是元素,在结构中是能够看的
    所以说伪元素结构外的扩展

1.E::before
    在E元素之前添加内容
    使用伪元素添加内容--content:'内容';---没有任意特殊含义的行内标签

2.E::after
    在E元素之后添加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p::before{
            content: '我妈妈说，你再吃榴莲就不要跟我说话了--->';
            color: blueviolet;
        }
        p::after{
            content: '--->为了不跟我妈说话，我故意吃了很多榴莲，结果我妈连门都不给我进了';
            color: #c81623;
        }
    </style>
</head>
<body>
    <p>我喜欢吃榴莲啊</p>
</body>
</html>

伪元素例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 50px;
            font-family: "华文彩云";
            text-align: center;
        }
        div::before{
            content: ' < ';
            font-size: 40px;
            color: #c81623;
        }
        div::after{
            content: ' > ';
            font-size: 40px;
            color: #c81623;
        }
        p::before{
            content: '';
            display: block;
            height: 100px;
            background: blueviolet;
        }
        p{
            text-align: center;
            font-size: 30px;
            font-family: "幼圆";
            color: deeppink;
        }
        div{
            background-image: url("");
        }
    </style>
</head>
<body>
    <div>欢迎来到召唤师峡谷</div>
    <br>
    <p>你还是不是我的小可爱啊</p>
    <div>我是一个热气球，biubiubiu ~~~</div>
</body>
</html>

边框

 1，border-radius 圆角
     px %

    设置值的方式：可以给多个值，每个值之间用 空格隔开
     border-radius:50px;
     border-radius:50px 100px;  左上角和右下角都是50px   右上角和左下角都是100px
     border-radius:10px 50px 100px;  左上 右上 右下 左上和右下是一样都
     border-radius:10px 50px 80px 100px; 左上 右上 右下 左下

2，设置圆
     先得有一个正方形--半径是正方形边长都一半
     如果是%，那么50%--100% 都是圆

3，边框阴影
     box-shadow 边框阴影
         水平方向都位置     垂直方向都位置     模糊距离    颜色；
             如果一个px值 缺少模糊举例
             如果少给2个值，报错
             如果缺少颜色，默认黑色

             可以使用，链接两组 box-shadow:10px 10px 10px black,-10px -10px 10px pink;

             网页上都坐标轴： 往右是X轴都正值    往下是轴都正值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:nth-child(1){
            width: 300px;
            height: 150px;
            background: pink;
            text-align: center;
            line-height: 150px;
            /*圆角*/
            border-radius: 50px;
        }
        div:nth-child(3){
            width: 300px;
            height: 300px;
            background: blueviolet;
            font-size: 30px;
            font-family: "华文彩云";
            text-align: center;
            line-height:300px;
            /*圆形*/
            border-radius: 150px;
            /*border-radius:50%;*/
            opacity: 0;
        }
        div:nth-child(3){
            background: blue;
            opacity: 1;
        }
        div:nth-child(5){
            width:300px;
            height: 150px;
            background: deeppink;
            /*边框阴影*/
            box-shadow: -20px 30px #000;
            /*box-shadow: 20px red;  报错*/
            box-shadow: 0px 10px 10px black,0px -10px 10px yellow;
            /*阴影*/
            border-radius: 50%;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>圆角</div>
    <br>
    <div>hello 张二狗</div>
    <br>
    <div>我侧面有阴影</div>
</body>
</html>

小米手机阴影例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background: #f5f5f5;
        }
        div:only-child{
            width: 240px;
            height:300px;
            background: #fff;
            /*块元素居中*/
            margin:0 auto;
        }
        div:only-child:hover{
            box-shadow: 0 10px 30px #e7e7e7;
        }
    </style>
</head>
<body>
<div><img src="img/小米手机.jpg" alt=""></div>
</body>
</html>

渐变

css3渐变 background的一个属性/方法
    颜色至少为2个，可以多个，每个值之间用，逗号分隔

1，线性渐变
    Linear-gradient(值)
    语法：background:Linear-gradient();
    方向值可以改变--默认从上到下
        to top/to bottom默认/to left/to right,写在Linear-gradient第一个参数值

2，径向渐变
    radial-gradient(值)；
        从中心点向外进行一个平缓的过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 350px;
            background: linear-gradient(green,greenyellow,paleturquoise);
        }
        p{
            width: 300px;
            height: 200px;
            border-radius: 150px;
            background: linear-gradient(yellow,yellowgreen,pink);
        }
        div:nth-child(5){
            width: 300px;
            height: 300px;
            border-radius: 150px;
            background: linear-gradient(red,lavender,papayawhip);
        }
    </style>
</head>
<body>
    <div></div>
    <br>
    <p></p>
    <br>
    <div></div>
</body>
</html>

文本阴影
    text-shadow:水平阴影  垂直阴影  模糊距离  颜色；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 50px;
            font-family: "楷体";
            text-align: center;
            font-weight: 600;
            /*文本阴影*/
            text-shadow: 3px 3px 3px purple;
        }
    </style>
</head>
<body>
    <p>前端是网页的装修人员</p>
</body>
</html>

过渡

过渡 transition
    在一定的时间内进行平稳的过渡
    定义：
        参数1：过渡时间：多长时间完成过渡效果
                1s/ms   1s=1000ms   transition 1s;

        参数2：过渡属性
                不写默认过渡全部属性--all全部
                transition 1s width;

        参数3：过渡方式
                ease 减速  默认
                linear  匀速
                ease-in  加速
                ease-out  减速（与默认的类似）
                ease-in-out(先加速后减速)
                贝塞尔曲线 cubic-bezier.com

        参数4：延迟时间
                s/ms 1s=1000ms
                多组值进行过渡，过渡时间不能挨着
                当过渡时间与延迟时间同时存在时，第一个时间为过渡时间，第二个时间为延迟时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height:200px ;
            background: yellowgreen;
            /*过渡*/
            transition: 1s;
        }
        div:hover{
            width: 400px;
            height: 400px;
            background: #c81623;
        }
        div:nth-child(3){
            width: 100px;
            height: 100px;
            background: pink;
            border-radius: 50px;
            transition: 1s width;
        }
        div:nth-child(3):hover{
            width: 200px;
            height: 200px;
            background: deeppink;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <br>
    <div></div>
</body>
</html>

文字描边加过渡例子

webkit内核有效  谷歌，safir中有效

    文字描边
        -webkit-text-stroke
            参数1：描边大小
            参数2：描边颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 50px;
            font-family: "宋体";
            font-weight: 700;
            text-align: center;
            -webkit-text-stroke: 1px pink;
            text-shadow: 0 0 0 rgba(0,0,0,1);
            transition: 1s;
        }
        p:hover{
            color: rgb(255,255,255,0);
            -webkit-text-stroke: 1px rgb(255,255,255,0);
            text-shadow: 0 0 80px rgba(0,0,0,1);
        }
    </style>
</head>
<body>
    <p>你那么爱他为什么不把他留下</p>
</body>
</html>

Rotate

2D转换 transform :想要装换什么效果句是用什么函数
        针对行内元素无效
    1，rotate(度数) 旋转
        单位：度数  deg
        正值：顺时针旋转
        负值：逆时针旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 150px;
            background: deeppink;
            border: 5px solid greenyellow;

            font-size: 30px;
            font-weight: bolder;
            color: #fff;
            text-align: center;
            line-height: 150px;
            border-radius: 15px;
            margin: 0 auto;
            transition: 1s;
        }
        div:hover{
            /*旋转*/
            transform: rotate(30deg);
            transform: rotate(60deg);
        }
        span{
            background: greenyellow;
            display: block;
            transition: 1s;
        }
        span:hover{
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div>rotate</div>
    <span>我是一个行内块</span>
</body>
</html>

大风车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:270px;
            height:270px;
            background: url("img/大风车.jpg") no-repeat -16px top;
            border-radius: 50%;
            margin:0 auto;

            transition: 2s;
        }
        div:hover{
            transform: rotate(3600deg);
        }
    </style>
</head>
<body>
<!--大风车转转转-->
<div></div>
</body>
</html>

Skew

skew(度数)倾斜
    按照一定的角度进行倾斜
    单位 度数 deg

    一个值:
        默认沿着x轴倾斜一定角度
        transform:skew(30deg);
            正值:往左倾斜了x度
            负值:往右倾斜x度
    两个值:
        transform:skew(30deg,60deg);
        第一个值为x轴,第二个值为y轴

    skewX x轴倾斜
    skewY y轴倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:200px;
            height:150px;
            background: lightblue;
            border:5px solid deepskyblue;

            font-size:30px;
            font-weight: bolder;
            color: #fff;
            text-align: center;
            line-height: 150px;

            border-radius: 15px;

            margin:0 auto;
            transition: 1s;
        }
        div:hover{
            /*倾斜*/
            transform: skew(30deg);
            transform: skew(45deg);
            transform: skew(60deg);
            transform: skew(90deg);
            transform: skew(360deg);
            transform: skew(-360deg);
            transform: skew(0deg,30deg);
            transform: skew(0deg,60deg);
            transform: skew(0deg,90deg);
            transform: skew(0deg,180deg);
            transform: skew(45deg,45deg);
            transform: skew(90deg,90deg);
            /*transform: skew(30deg,30deg);*/

            transform: skewY(45deg);
            transform: skewX(45deg);
        }
    </style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<div>skew</div>
</body>
</html>

Scale

scale(倍数) 缩放
单位倍数没有单位
一个值
transform:scale(2); 宽,高一起放大2倍

两个值
transform: scale(1,2); 第一个值为宽的缩放倍数,第二个值为高的缩放倍数

整数正常方法
负数反过来放大

0~1之间是缩小
>1是放大

scaleX 宽缩放

scaleY 高缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width:500px;
            height:500px;
            border:10px solid green;
            margin:0 auto;
        }
        .item{
            width:100px;
            height:100px;
            background: deeppink;
            margin:0 auto;

            transition: 1s;
        }
        .box:hover .item{
            transform: scale(2);
            transform: scale(1,2);
            transform: scale(3,2);
            transform: scale(-3,2);
            transform: scale(-2);
            transform: scale(1,.5);
            transform: scale(0);

            transform: scaleX(2);
            transform: scaleY(.1);
        }

        span{
            background: purple;
            display: inline-block;
            transition: 1s;
        }
        .box:hover span{
            transform: scale(2);
        }
    </style>
</head>
<body>
<div class="box">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="item">scale</div>
    <span>我是spanspanspan</span>
</div>
</body>
</html>

位移

translate(值) 位移
    单位：px
    一个值  X轴移动
    两个值  第一个值为X轴   第二个轴为Y轴
    translateX  X轴位移
    translateY  Y轴位移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height:800px;
            border:10px solid black;
        }
        div:not(.box){
            width:100px;
            height:100px;
            background: orange;
            transition: 1s;
        }
        .box:hover .div02{
            transform: translate(50px);
            transform: translate(100px,100px);
        }
        .box:hover .div03{
            transform: translate(-50px,100px);
            transform: translate(100px,-200px);
        }
        .box:hover .div04{
            transform: translateX(100px);
            transform: translateY(100px);
        }
        span{
            background: deeppink;
            display: inline-block;
            transition: 1s;
        }
        .box:hover span{
            transform: translate(100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div01">范冰冰</div>
        <div class="div02">杨幂</div>
        <div class="div03">赵丽颖</div>
        <div class="div04">迪丽热巴</div>
        <span>我爱你所以你美丽</span>
    </div>
</body>
</html>

transform 2d合并
执行顺序:先写后执行,后写先执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width:800px;
            height:600px;
            border:10px solid black;
        }
        .div1,.div2{
            width:100px;
            height:100px;
            background: palevioletred;
            transition: 1s;
        }
        .box:hover .div1{
            transform: translate(100px,100px) scale(2);
        }
        .box:hover .div2{
            transform: scale(2) translate(100px,100px);/*先进行位移,效果更准确*/
        }
    </style>
</head>
<body>
<!--
    transform 2d合并
    执行顺序:先写后执行,后写先执行
-->
<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</div>
</body>
</html>

移动四级包

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.11日学习笔记

伪元素/伪对象选择器 ::/: 不在html结构中,在结构外不是一个元素==&gt;如果是元素,在结构中是能够看的所以说伪元素结构外的扩展1.E::before 在E元素之前添加内容使用伪元素添加内容--content:'内容';---没有任意特殊含义的行内标签2.E::after 在E元素之后添加内容&lt;!DOCTYPE html...
复制链接

扫一扫

专栏目录