CSS3的使用及基本注意说明相关笔记（三）

最新推荐文章于 2023-07-04 16:29:11 发布
最新推荐文章于 2023-07-04 16:29:11 发布
阅读量10w+ 收藏 5
点赞数 1
分类专栏： HTML CSS HTML5 CSS3 文章标签： HTML CSS HTML5 CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jwlLWJ_2018/article/details/80879051
版权
CSS 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
HTML5
12 篇文章 0 订阅
订阅专栏
CSS3
12 篇文章 0 订阅
订阅专栏

1.每一个方向上的边框形状并不是矩形的，其实是三角形或梯形的，配合圆角边框可以制作美丽花瓣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框的实际形状（制作美丽花瓣）</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 20px auto;
        }

        .box:nth-child(1) {
            width: 0;
            height: 0;
            border: 50px solid #000;
            border-left-color: #f00b;
            border-right-color: #0f0b;
            border-top-color: #00fb;
            border-bottom-color: #0ffb;
        }

        .box:nth-child(2) {
            width: 20px;
            height: 0;
            border: 50px solid #000;
            border-left-color: #f00b;
            border-right-color: #0f0b;
            border-top-color: #00fb;
            border-bottom-color: #0ffb;
        }

        .box:nth-child(3) {
            width: 20px;
            height: 20px;
            border: 50px solid #000;
            border-left-color: #f00b;
            border-right-color: #0f0b;
            border-top-color: #00fb;
            border-bottom-color: #0ffb;
        }

        .box:nth-child(4) {
            width: 200px;
            height: 200px;
            border: 50px solid #000;
            /*border-left: #f00b;*/
            /*border-right: none;*/
            /*border-top: #00fb;*/
            /*border-bottom: #0ffb;*/
            border-left-color: #f00b;
            border-right-color: #0f0b;
            border-top-color: #00fb;
            border-bottom-color: #0ffb;

            border-top-left-radius: 259px;
            border-top-right-radius: 1px;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 259px;
            background-color: #ff0b;


        }
        .box:nth-child(5) {
            width: 200px;
            height: 200px;
            border: 50px solid #000;
            /*border-left: #f00b;*/
            border-right: none;
            /*border-top: #00fb;*/
            /*border-bottom: #0ffb;*/
            border-left-color: #f00b;
            border-right-color: #0f0b;
            border-top-color: #00fb;
            border-bottom-color: #0ffb;

            border-top-left-radius: 259px;
            border-top-right-radius: 1px;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 259px;
            background-color: #ff0b;


        }

        .box:nth-child(6) {
            width: 200px;
            height: 200px;
            border: 50px solid #000;
            /*border-left: #f00b;*/
            border-right: none;
            border-top: #00fb;
            /*border-bottom: #0ffb;*/
            border-left-color: #f00b;
            border-right-color: #0f0b;
            border-top-color: #00fb;
            border-bottom-color: #0ffb;

            border-top-left-radius: 259px;
            border-top-right-radius: 1px;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 259px;
            background-color: #ff0b;


        }

        .box:nth-child(7) {
            width: 200px;
            height: 200px;
            border: 50px solid #000;
            border-left: #f00b;
            border-right: none;
            /*border-top: #00fb;*/
            /*border-bottom: #0ffb;*/
            border-left-color: #f00b;
            border-right-color: #0f0b;
            border-top-color: #00fb;
            border-bottom-color: #0ffb;

            border-top-left-radius: 259px;
            border-top-right-radius: 1px;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 259px;
            background-color: #ff0b;
        }

    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>


2.CSS3制作简单表白小桃星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单小桃星</title>
    <style>

        .heart {

            width: 200px;
            height: 300px;
            margin:100px auto;
            position: relative;
        }
        .heart span {
            position: absolute;
            left:0;
            top:85%;
            transform:translate(0,-75%);
            width: 200px;
            height: 300px;
            color:#ff0b;
            text-align: center;
            font:500 150px/300px "microsoft yehei";
            z-index: 999;
        }

        .heart::after,.heart::before {
            content: '爱';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #f00;
            text-align: center;
            /*line-height:;*/
            border-radius: 50% 50% 0 0;
            font:500 20px/100px "microsoft yehei";
            color:#ff0b;
        }
        .heart::before {
            transform:rotate(-46deg) translate(-55px,0px);
        }

        .heart::after {
            content: '你';

            transform:rotate(46deg) translate(55px,0px);

        }

    </style>
</head>
<body>
<div class="heart">
    <span>我</span>
</div>
</body>
</html>


3.CSS3 3d变换效果 transform

◆

transform:rotateX(360deg);

表示在x轴3D旋转360度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的3d变换效果（rotateX）</title>
    <style>
        .box {
            width: 300px;
            height: 226px;
            margin:100px auto;

            /*3D效果一般配合透视效果来使用更加明显，一般是给父容器添加透视*/
            /*perspective:1000px;
            值越大焦距越远，
            值越小焦距越近，值越小效果越明显，
            就会感觉和你的距离更加的近，
            透视效果仅仅只是视觉上的呈现*/
            perspective:150px;
        }

        img {
            transition:transform 1500ms  linear 0s;
        }

        img:hover {
            transform:rotateX(360deg);
        }

    </style>
</head>
<body>
<div class="box">
    <img src="https://img-blog.csdnimg.cn/2022010705475227652.jpeg" alt="">
</div>
</body>
</html>

◆

transform:rotateY(360deg);

表示在y轴3D旋转360度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的3d变换效果（rotateY）</title>
    <style>
        .box {
            width: 237px;
            height: 300px;
            margin:100px auto;

            /*3D效果一般配合透视效果来使用更加明显，一般是给父容器添加透视*/
            /*perspective:1000px;
            值越大焦距越远，
            值越小焦距越近，值越小效果越明显，
            就会感觉和你的距离更加的近，
            透视效果仅仅只是视觉上的呈现*/
            perspective:150px;

        }

        img {

            transition:transform 1500ms  linear 0s;
        }

        img:hover {
            transform:rotateY(360deg);
        }


    </style>
</head>
<body>
<div class="box">
    <img src="https://img-blog.csdnimg.cn/2022010705475379477.jpeg" alt="">
</div>
</body>
</html>

◆

transform:rotateZ(360deg);

表示在z轴3D旋转360度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的3d变换效果（rotateZ）</title>
    <style>
        .box {
            width: 330px;
            height: 227px;
            margin:100px auto;

            /*3D效果一般配合透视效果来使用更加明显，一般是给父容器添加透视*/
            /*perspective:1000px;
            值越大焦距越远，
            值越小焦距越近，值越小效果越明显，
            就会感觉和你的距离更加的近，
            透视效果仅仅只是视觉上的呈现*/
            perspective:150px;
        }

        img {
            transition:transform 1500ms  linear 0s;
        }

        img:hover {
            transform:rotateZ(360deg);
        }


    </style>
</head>
<body>
<div class="box">
    <img src="https://img-blog.csdnimg.cn/2022010705475321095.jpeg" alt="">
</div>
</body>
</html>

◆

transform:translateX(300px);

表示在x轴3D位移300px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的3d位移效果（translateX）</title>
    <style>

        .bigbox {
            width: 1000px;
            height: 500px;
            perspective: 200px;
        }

        .box {
            width: 250px;
            height: 250px;
            border: 1px solid #f00b;
            background-color: #f00b;
            transition: transform 1500ms linear 0s;
        }

        .box:hover {
            transform: translateX(300px);
        }

    </style>
</head>
<body>
<div class="bigbox">
    <div class="box"></div>
</div>
</body>
</html>

◆

transform:translateY(300px);

表示在y轴3D位移300px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的3d位移效果（translateY）</title>
    <style>

        .bigbox {
            width: 1000px;
            height: 500px;
            perspective: 200px;
        }

        .box {
            width: 250px;
            height: 250px;
            border: 1px solid #f00b;
            background-color: #f00b;
            transition: transform 1500ms linear 0s;
        }

        .box:hover {
            transform: translateY(300px);
        }

    </style>
</head>
<body>
<div class="bigbox">
    <div class="box"></div>
</div>
</body>
</html>

◆

transform:translateZ(300px);

表示在z轴3D位移300px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的3d位移效果（translateZ）</title>
    <style>

        .bigbox {
            width: 1000px;
            height: 500px;
            perspective: 600px;

        }

        .box {
            width: 250px;
            height: 250px;
            border: 1px solid #f00b;
            background-color: #f00b;
            transition: transform 1500ms linear 0s;
            margin:200px auto;

        }

        .box:hover {
            transform: translateZ(300px);
        }

    </style>
</head>
<body>
<div class="bigbox">
    <div class="box"></div>
</div>
</body>
</html>

★3D效果一般配合透视效果来使用更加明显，一般是给父容器添加透视。


4.CSS3 透视效果 （调整焦距）

◆perspective:1000px;值越大焦距越远，值越小焦距越近，值越小效果越明显，就会感觉和你的距离更加的近，透视效果仅仅只是视觉上的呈现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的普通透视效果（perspective）</title>
    <style>

        .out {
            width: 500px;
            height: 500px;
            border: 1px solid #f00b;
            background-color: #f00b;
            margin:100px auto;
            /* 透视*/
            /* 透视 设置的 用户 眼睛和屏幕的距离
            仅仅只是视觉呈现出3d 效果，并不是正真的3d*/
            perspective: 400px;

            transform:rotateY(15deg);
        }

        .in {
            width: 200px;
            height: 200px;
            margin:150px auto;
            border: 1px solid #0f0b;
            background-color: #0f0b;
            transform:translateX(250px) rotateY(75deg);
        }

    </style>
</head>
<body>
<div class="out">
    <div class="in"></div>
</div>
</body>
</html>

◆扇你的巴掌的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用css3制作巴掌扇人的效果</title>
    <style>

        body{
            perspective:300px;

        }
        img {
            width: 400px;
            transform-origin:right center;
            margin-left:150px;
            transition: transform 1s linear 0s;

        }
        img:hover {
            transform:rotateY(180deg);
        }

    </style>
</head>
<body>
<img src="https://img-blog.csdnimg.cn/2022010705475314821.jpeg" alt="">
</body>
</html>


5.CSS3 真正的3d透视效果

◆ 

transform-style:preserve-3d;

当这个属性加给父盒子时，可以让子盒子呈现3d效果，这个属性默认值为flat，子盒子呈现2d效果（扁平化）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的3D透视效果（transform-style）</title>
    <style>

        .out {
            width: 500px;
            height: 500px;
            border: 1px solid #f00b;
            background-color: #f00b;
            margin:100px auto;

            /*
            css3 真正的3d效果 transform-style:preserve-3d;
            当这个属性加给父盒子时，可以让子盒子呈现3d效果，
            这个属性默认值为flat，子盒子呈现2d效果（扁平化）
            */

            /*这个是真3d*/
            transform-style:preserve-3d;
            /*这个是假3d*/
            /*perspective:400px;*/

            transition:transform 1500ms linear 0s;
            transform:rotateY(75deg);
        }

        .in {
            width: 300px;
            height: 300px;
            margin:150px auto;
            border: 1px solid #0f0b;
            background-color: #0f0b;
            transform: rotateX(75deg);
        }

        .out:hover {
            transform:rotateY(360deg);

        }

    </style>
</head>
<body>
<div class="out">
    <div class="in"></div>
</div>
</body>
</html>

◆3D立方体的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作3D盒子立方体模型</title>
    <style>

        .box {
            width: 300px;
            height: 300px;
            margin: 150px auto;
            /*preserve-3d：保持 3d*/
            transform-style:preserve-3d;
            border: 1px dashed #f00b;
            position: relative;
            animation:dong 5000ms infinite linear 0s;


            border-radius:50%;
            background-color: #f00b;

            /*使用下面的样式会出现花瓣形状的面*/
            /*border: 50px solid #000;*/
            /*border-left-color: #f00b;*/
            /*border-right-color: #0f0b;*/
            /*border-top-color: #00fb;*/
            /*border-bottom-color: #0ffb;*/
            /*border-top-left-radius: 350px;*/
            /*border-top-right-radius: 1px;*/
            /*border-bottom-left-radius: 1px;*/
            /*border-bottom-right-radius: 350px;*/
            /*background-color: #ff0b;*/

        }
        .box>div {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            font:600 60px/300px "microsoft yahei";
            color:#ff0b;

            /*保护眼睛*/
            box-shadow: 300px 300px 5px 0px #000;
        }

        .up {
            transform: translateY(-150px) rotateX(90deg);
            background-color: #f004;
        }

        .down {
            transform: translateY(150px) rotateX(90deg);
            background-color: #0f04;


        }

        .left {
            transform: translateX(-150px) rotateY(90deg);
            background-color: #00f4;
        }

        .right {
            transform: translateX(150px) rotateY(90deg);
            background-color: #ff04;

        }

        .forward {
            transform: translateZ(-150px);
            background-color: #0ff4;

        }

        .back {
            transform: translateZ(150px);
            background-color: #f0f4;

        }

        @keyframes dong {
            from {
                transform:rotateZ(0deg) rotateY(0deg) rotateX(0deg)  ;
            }
            to {
                transform:rotateZ(360deg) rotateY(360deg) rotateX(360deg)  ;

            }
        }


    </style>
</head>
<body>
<div class="box">
    <div class="up">上</div>
    <div class="down">下</div>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="forward">前</div>
    <div class="back">后</div>
</div>
</body>
</html>


6.css3 反面可见性 

◆backface-visibility:hidden;表示背面可见性为隐藏，一般配合3D翻转来使用，一个盒子只有正面可见，一翻转到背面之后就不可见了

◆翻牌的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的反面可见性（backface-visibility）（翻牌效果）</title>
    <style>

        body {
            background-color: #f00b;
        }
        .box {
            width: 304px;
            height: 304px;
            margin: 150px auto;
            position: relative;
        }
        .box::before,.box::after {
            /*display: inline-block;*/
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background-size:contain;
            transition:transform 500ms linear 0s;


        }

        .box::before {
            background:  url(data:image/png;base64,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) left top no-repeat;
            z-index: 1;
            /*反面可见性   当旋转到反面时就 隐藏起来  不可见*/
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;

        }

        .box::after {
            background:  url(data:image/png;base64,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) right top no-repeat;
            transform:rotateY(180deg);

        }

        .box:hover::before {
            transform:rotateY(180deg);
        }
        .box:hover::after {
            transform:rotateY(0deg);
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

7.伪元素中的content属性可以赋值为标签的自定义属性

◆

//设置伪元素
span::before {
content:attr(data-text);
}
//页面标签
<span data-text="我是自定义属性"></span>

◆翻转文字效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3中灵活使用伪元素的技巧（翻转文字效果）</title>
    <style>
        body {
            background-color: #ccc;
        }
        .box {
            width: 500px;
            margin:150px auto;
            

        }
        .box>span {
            font:500 80px "microsoft yehei";
            position: relative;

        }

        span::before,span::after {
            content:attr(data-text);
            position: absolute;
            left: 0;
            transform-origin: left;

            transform:scale(0.95,1);
            transition:transform 200ms linear 0s;
        }
        span::before {
            color:rgba(0,0,0,0.3);
        }
        span::after {
            color:white;
        }
        span:hover::before {
            transform: skew(0deg,25deg);
        }
        span:hover::after {
            transform:rotateY(25deg) skew(0deg,5deg);

        }

    </style>
</head>
<body>
    <div class="box">
        <span data-text="水">水</span>
        <span data-text="晶">晶</span>
        <span data-text="女">女</span>
        <span data-text="孩">孩</span>
    </div>
</body>
</html>


8.css3 动画 animation
◆js中的animate函数调用，是先定义一个animate函数然后再调用animate();
◆css3中的动画，也是先定义然后再调用。
◆css3定义动画:

@keyframes 动画名{
	from{
	初始状态
	}
	to{
	结束状态
	}
}
◆css3执行动画： 
animation: 动画名  一次动画持续时间  执行次数（infinite:无限次）  是否反向（alternate）  运动曲线（linear） 延迟时间;
◆css3动画定义与执行 
/*定义一个移动的动画*/
@keyframes move {
	from{
	transform:translateX(0px);
	}
	to{
	transform:translateY(500px);	
	}
}
/*使用定义的移动的动画*/
animation:move 2s 3;
◆定义多组动画 
@keyframes move{
	0%{
		transform:translateX(0px) translateY(0px);
	}
	25%{
		transform:translateX(500px) translateY(0px);
	}
	50%{
		transform:translateX(500px) translateY(300px);
	}
	75%{
		transform:translateX(0px) translateY(300px);
	}
	100%{
		transform:translateX(0px) translateY(0px);
	}
}
★animation属性详解
            ☆动画名称  必写 
animation-name:move;
            ☆动画一次所持续的时间  必写 
animation-duration:2s;
            ☆动画执行的次数（动画重复的次数） 无数次:infinite; 
animation-iteration-cont:3;
            ☆动画的方向：normal 全正向，alternate 先正向再反向 
animation-direction:alternate;
            ☆动画每次执行时延迟的时间 
animation-delay:1s;
            ☆动画结束后保持的状态  backwards(默认值)表示回退到原点  forwards表示不回到原点，backwards表示动画结束后 保持 动画开始前的状态，forwards表示动画结束后 保持 动画结束后状态 
animation-fill-mode:backwards;
            ☆动画的类型 也就是动画的运动曲线  linear 表示线性匀速   ease-in 表示慢慢变快  ease-in-out 表示先快后慢   steps(3) 表示每一次动画都是分三步完成(速度就像是一帧一帧的完成的)，steps这个属性可以用来做时钟，也能够用来做那些 很准确的一帧一帧完成的动画，因为steps的每一帧都是瞬间完成的 
animation-timing-fuction:linear;
            ☆动画的播放状态  使用这个属性能够改变动画的播放状态，如动画正在播放时，可以通过这个属性，让动画暂停一下 
animation-play-state:paused;

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的动画（animation）</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #f00b;
            background-color: #f00b;

            /*animation:
            动画名  一次动画持续时间  执行次数（infinite:无限次）
            是否反向（alternate）  运动曲线（linear） 延迟时间;
            */
            animation:dong 4000ms infinite alternate linear 0s;

        }

        @keyframes dong {
            0% {
                transform: translate(0px, 0px);
            }
            25% {
                transform: translate(800px, 0px);

            }
            50% {
                transform: translate(800px, 400px);
                border-radius:50%;
            }
            75% {
                transform: translate(0px, 400px);
            }
            100% {
                transform: translate(0px, 0px);
            }
        }

    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

◆

animation:time 60s steps(60);

这表示一根秒钟一分钟转60次

◆美丽的风车效果（我想做的美丽），如果你能做的很美丽，你可以在评论区把代码贴出来分享一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的动画分步效果（steps）（美丽风车）</title>
    <style>
        .fbox {
            width: 500px;
            height: 500px;
            position: relative;
            margin:40px auto;
            transition:transform 2s linear 0s;
        }
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            position: absolute;
            left:250px;

        }

        .box:nth-child(1), .box:nth-child(2), .box:nth-child(3), .box:nth-child(4) {
            width: 200px;
            height: 200px;
            border: 50px solid #000;

            border-left-color: #f00b;
            border-right-color: #0f0b;
            border-top-color: #00fb;
            border-bottom-color: #0ffb;
            border-top-left-radius: 259px;
            border-top-right-radius: 1px;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 259px;
            background-color: #ff0b;

            animation: b 3s infinite alternate steps(2) 0s;
        }

        .box:nth-child(2) {
            transform-origin: left center;
            transform: rotateY(180deg) ;
        }

        .box:nth-child(3) {
            transform-origin: bottom center;
            transform: rotateX(180deg);
        }

        .box:nth-child(4) {
            transform-origin: left bottom;

            transform: rotateY(180deg) rotateX(180deg);
        }

        @keyframes b {
            0% {

            }
            50% {
                border-right: none;

            }
            100% {
                border-right: none;
                border-top: #00fb;

            }

        }

      .fbox:hover {

          transform-origin:center center ;
          transform:rotate(360deg) ;
      }
    </style>

</head>
<body>
<div class="fbox">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</body>
</html>


9.css3 多列布局 column ，可能兼容性问题，需要添加私有前缀 -webkit-、-moz-、-ms-、-o- 

◆

column-count:3;

表示分三列

◆

column-rule:1px dashed red;

表示列与列之间的分割线。

◆

column-gap:30px;

表示列与列之间的间距。

◆

column-width:300px;

表示设置每列的宽度，但是如果默认的宽度大于你设置的宽度，则不会起任何效果，前面三条会影响默认宽度的大小，可以说默认的宽度就是由前面三项属性count、rule、gap产生的。

★

column-span:all;

表示跨列，一般配合

text-algin:center

来让标题居中。

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增的多列布局（column）</title>
    <style>
        .wrapper {
            width: 900px;
            margin:0 auto;

            /*.css3 多列布局 column ，可能兼容性问题，需要添加私有前缀 -webkit-、-moz-、-ms-、-o- */

            /*表示分三列*/
            -webkit-column-count:3;
            -moz-column-count:3;
            column-count:3;

            /*表示列与列之间的分割线*/
            -moz-column-rule: 1px dashed #f00b;
            -webkit-column--rule: 1px dashed #f00b;
            column-rule: 1px dashed #f00b;

            /*表示列与列之间的间距*/
            -webkit-column-gap:30px;
            -moz-column-gap:30px;
            column-gap:30px;

            /*表示设置每列的宽度，
            但是如果默认的宽度大于你设置的宽度，
            则不会起任何效果，
            前面三条会影响默认宽度的大小，
            可以说默认的宽度就是由前面三项属性count、rule、gap产生的*/
            -webkit-column-width:400px;
            -moz-column-width:400px;
            column-width:400px;


        }
        img {
            width: 100%;
        }

        h4 {
            -webkit-column-span:all;
            column-span:all;
            text-align: center;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <h4>CSS3简介</h4>
    <p>
        CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
    </p>
    <p>1、 CSS3圆角表格 CSS3圆角表格 圆角表格，对应属性：border-radius。 2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。 3、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。 4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。 边框 border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果
    </p>
    <p>
        变形(transform)、转换(transition)和动画(animation) transform: rotate | scale | skew | translate |matrix; 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值 在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes:
        <img src="https://img-blog.csdnimg.cn/2022010705475332364.jpeg" alt=""> Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。[2]
    </p>
</div>
</body>
</html>

jwllwj_2018
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
爬虫问题，内容应该如何解码,base64解码技巧，从哪里开始分析
qq_38192709的博客
06-23 5451
问题描述 ： 写爬虫的时候遇到一个问题 爬取 view-source:https://www.360kuai.com/pc/home/next?ch=y2%3Astar&uid=64947c97fe791a7de150a8f9676c060b&sign=360_b7dbbfe4 打开链接可以看到，在最后面几行有： window.__INITIAL_DATA__ = ‘\ ezJzZYN2bIQjOosjMkRpTnV4czI7W4sjdHl1bHUjOjJddUVlZUVddUU2NEZ
CSS3弹性盒模型开发笔记（二）
12-13
本文为大家继续分享CSS3弹性盒模型开发笔记第二篇，之前一篇以及为大家引入了CSS3弹性盒模型的相关介绍，点击查看：CSS3弹性盒模型开发笔记（一） box-flex属性 box-flex属性能够灵活地控制子元素在盒子中的显示空间...
网站突然打不开,解决办法
jacklong2的专栏
08-29 3021
(1)重启服务器(在影响比较小的情况下) (2)重新启动服务里面的,world wide web (3)重新注册asp.net ,运行  C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis.exe -i iis根目录,web 服务扩展,---asp.net(选择版本)---允许
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
热门推荐
u014497548的博客
06-03 55万+
Title img,div,body{margin: 0;padding: 0;} .orgindiv {width: 200px;height: 200px;position: relative;float: left;margin-left: 100px;} .orgindiv img{width: 100%;height: 100%;}
http://91.3p7.us/index.php,bee/new.go at b412890c3385694a5a0034d07c703f1eabd3a22e · ws6/bee · GitHub...
weixin_42348783的博客
03-16 29万+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR42uy9d5Rd13Xm+TvnxhfrVS5UIRSIQEIAQUpMIKlEylGWZblbTi27veyWJXcvjZqW7TVrrPG0Q0vyTKtHtnuWou0ZS1Y7yDOyksd...
CentOS安装指定版本的Mysql
u010476994的博客
01-04 4万+
笔者使用的系统是CentOS 6.5 , 使用yum安装mysql的默认版本是5.1，如果想安装指定版本的mysql，可以通过本帖的方式进行。本文以安装MySQL 5.6为例进行说明。 1、从mysql的官网下载 rpm文档 （下载地址：MySQL官网下载地址）， 根据自己的系统下载响应的版本 ，下载下来的文件是一个rpm格式的压缩包。笔者下载的版本是： 2、查看linux系统中是否有
jquery+css3立体式动画百叶窗切换效果.zip
最新发布
09-25
最后，"lanrenzhijia.com下载说明.txt"可能是提供下载和使用该特效的说明文档，包含了一些基本的使用指导和注意事项，对于初学者来说十分有用。 总的来说，"jquery+css3立体式动画百叶窗切换效果.zip"是一个结合了...
基于css的Individuality 笔记样式menu菜单Demo
05-19
最后，readme.md文件通常包含关于Demo的说明、使用方法、注意事项等信息。在这里，你可以找到关于如何查看和应用这个菜单样例的详细步骤，以及可能存在的依赖库或者特殊浏览器兼容性问题。 总的来说，这个“基于css...
jquery+css3动态新闻左右滑动(支持暂停播放).zip
09-25
标题中的"jquery+css3动态新闻左右滑动(支持暂停播放)"是指一种基于JavaScript库jQuery和CSS3技术实现的交互式新闻展示效果。这个效果允许用户通过左右滑动来浏览新闻，同时支持暂停和继续播放功能，提高了用户体验...
Html\CSS+DIV学习笔记(史上最实用的CSS笔记)
03-09
3. **静态页面**：XHTML+CSS组合形成的静态页面，意味着内容是预先定义好的，没有服务器端动态生成的内容。 4. **表现与结构分离**：内容（HTML）专注于传达信息，结构（HTML标签）使内容逻辑化，CSS则负责视觉设计...
python Selenium
java火推阳光的博客
04-02 7万+
Selenium 基本使用 In [1]: from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys from selenium.webdriver.support import expected_condit...
HLS 直播协议m3u8详解
phymat.nico的专栏
07-08 5233
https://blog.csdn.net/aoshilang2249/article/details/82012187 https://blog.csdn.net/qq_35525304/article/details/81075256 https://www.cnblogs.com/Javame/p/10879455.html https://www.jianshu.com/p/8845b976fcaf
【flutter滑动拼图验证码】
androidhyf的博客
07-04 2811
flutter拖动底图滑块拼图验证码功能
REbnu5/orqHph48ucHB0eA==
庵中十三居士的博客
05-02 6万+
REbnu5/orqHph48ucHB0eA==
使用kindeditor直接粘贴本地图片或者是qq截图
boylong12的专栏
06-11 42万+
最近在使用kindeditor粘贴图片，突然发现可以直接使用Ctrl+V向里面粘贴。这个时候控件会把图片转成data:image 比如： 它会转成： 就可以直接保存到数据库了！
百度语音合成data:audio/x-mpeg；base64转mp3
z19980115的博客
06-24 53万+
百度语音base64转mp3
m3u8源地址，抓片....下片....看片都透露给你
LLLLLLllllIlll的博客
01-28 30万+
这段时间为了下载网页视频（网课、电影等），接触到了 m3u8 文件。在折腾了一段时间之后，猫君越发喜爱上这个格式的文件。今儿特意将关于 m3u8 格式视频链接获取方式、下载方法，以及相关的进阶操作整理成文。若诸位看官有什么更妙的使用方案，不妨分享一二。 恐怕有些朋友对 m3u8 文件还不甚了解，先作个科普吧—— m3u8 是 HLS 协议的部分内容，而 HLS 又是由苹果公司提出的基于 HTTP 的流媒体网络传输协议。其实现的基本原理是将一个大的媒体文件进行分片，而分片文件资源的路径记录于 m3u8 文
http://95u.free.fr/index.php,Electronic Software Distribution Service
weixin_39603327的博客
03-19 32万+
Content-Type: multipart/related; start=; boundary=----------OH5LlQ9dynBJGqR8E2AiMRContent-Location: https://software.pitt.edu/software/software.aspSubject: =?utf-8?Q?Electronic=20Software=20Distributi...
html从零开始——为网页加入樱花飘落效果
weixin_45174208的博客
11-29 15万+
JavaScript代码： var stop, staticx; var img = new Image(); img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUgAAAEwCAYAAADVZeifAAAACXBIWXMAAACYAAAAmAGiyIKYAAAHG2lUWHRYTUw6Y29tLmFkb2Jl...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值