web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

2022-05-23 01:28:06

CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记，之后工作了进行内容的补充

7.  CSS动画--页面特效

7.1  2D、3D转换

　　7.1.1  通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸

　　　　转换是使元素改变形状、尺寸和位置的一种效果

　　　　可以使用2D、3D来转换元素

　　7.1.2  2D转换方法

　　　　translate()

　　　　rotate()

　　　　scale()

　　　　skew()

　　　　matrix()

　　7.1.3  3D转换方法：

　　　　rotateX()

　　　　rotateY()

7.2  过渡

　　1、通过使用CSS3，可以给元素添加一些效果

　　2、CSS3过渡是元素从一种样式转换成另一种样式

　　　　动画效果的CSS

　　　　动画执行的时间

　　3、属性

属性 描述
transition 设置四个过渡属性
transition-property 过渡的名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果开始时间

7.3  动画

　　1、通过CSS额，也可以进行创建动画了

　　2、CSS3的动画需要遵循@keyframes规则

　　　　规定动画的时长

　　　　规定动画的名称

7.4  多列

　　1、在CSS3中，可以创建多列来对文本或者区域进行布局

　　2、属性：

　　　　column-count

　　　　column-gap

　　　　column-rule

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1{

            column-count: 3;

            -webkit-column-count: 3;

            -webkit-column-gap: 50px;

            /*webkit是给谷歌浏览器老版本兼容用的*/

            column-gap: 50px;

            column-rule:5px outset #FF0000;

            /*out是间隔线的样式*/

        }

    </style>

</head>

<body>

    <div class="div1">

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

        大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。

    </div>

</body>

</html>

7.5  瀑布流效果（这里的并不是最好的瀑布流效果设计，这是竖着排顺序的，用了7.4的知识）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>瀑布流2</title>

    <style>

        .container{

            column-width: 250px;

            -webkit-column-width: 250px;

            -webkit-column-gap: 5px;

            column-gap: 5px;

        }

        .container div,.container img{

            width:250px;

            margin:5px 0;

        }

        .container p{

            text-align: center;

        }

    </style>

</head>

<body>

<div class="container">

    <div><img src="img/1.jpg" alt=""></div>

    <p>这是第1张图片</p>

    <div><img src="img/2.jpg" alt=""></div>

    <p>这是第2张图片</p>

    <div><img src="img/3.jpg" alt=""></div>

    <p>这是第3张图片</p>

    <div><img src="img/4.jpg" alt=""></div>

    <p>这是第4张图片</p>

    <div><img src="img/5.jpg" alt=""></div>

    <p>这是第5张图片</p>

    <div><img src="img/6.jpg" alt=""></div>

    <p>这是第6张图片</p>

    <div><img src="img/7.jpg" alt=""></div>

    <p>这是第7张图片</p>

    <div><img src="img/8.jpg" alt=""></div>

    <p>这是第8张图片</p>

    <div><img src="img/9.jpg" alt=""></div>

    <p>这是第9张图片</p>

    <div><img src="img/10.jpg" alt=""></div>

    <p>这是第10张图片</p>

    <div><img src="img/11.jpg" alt=""></div>

    <p>这是第11张图片</p>

    <div><img src="img/12.jpg" alt=""></div>

    <p>这是第12张图片</p>

    <div><img src="img/13.jpg" alt=""></div>

    <p>这是第13张图片</p>

    <div><img src="img/1.jpg" alt=""></div>

    <p>这是第14张图片</p>

    <div><img src="img/2.jpg" alt=""></div>

    <div><img src="img/3.jpg" alt=""></div>

    <div><img src="img/4.jpg" alt=""></div>

    <div><img src="img/5.jpg" alt=""></div>

    <div><img src="img/6.jpg" alt=""></div>

    <div><img src="img/7.jpg" alt=""></div>

    <div><img src="img/8.jpg" alt=""></div>

    <div><img src="img/9.jpg" alt=""></div>

    <div><img src="img/10.jpg" alt=""></div>

    <div><img src="img/11.jpg" alt=""></div>

    <div><img src="img/12.jpg" alt=""></div>

    <div><img src="img/13.jpg" alt=""></div>

    <div><img src="img/1.jpg" alt=""></div>

    <div><img src="img/2.jpg" alt=""></div>

    <div><img src="img/3.jpg" alt=""></div>

    <div><img src="img/4.jpg" alt=""></div>

    <div><img src="img/5.jpg" alt=""></div>

    <div><img src="img/6.jpg" alt=""></div>

    <div><img src="img/7.jpg" alt=""></div>

    <div><img src="img/8.jpg" alt=""></div>

    <div><img src="img/9.jpg" alt=""></div>

    <div><img src="img/10.jpg" alt=""></div>

    <div><img src="img/11.jpg" alt=""></div>

    <div><img src="img/12.jpg" alt=""></div>

    <div><img src="img/13.jpg" alt=""></div>

    <div><img src="img/1.jpg" alt=""></div>

    <div><img src="img/2.jpg" alt=""></div>

    <div><img src="img/3.jpg" alt=""></div>

    <div><img src="img/4.jpg" alt=""></div>

    <div><img src="img/5.jpg" alt=""></div>

    <div><img src="img/6.jpg" alt=""></div>

    <div><img src="img/7.jpg" alt=""></div>

    <div><img src="img/8.jpg" alt=""></div>

    <div><img src="img/9.jpg" alt=""></div>

    <div><img src="img/10.jpg" alt=""></div>

    <div><img src="img/11.jpg" alt=""></div>

    <div><img src="img/12.jpg" alt=""></div>

    <div><img src="img/13.jpg" alt=""></div>

</div>

</body>

</html>

8、html与css简单简单页面效果设计

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>极客学院</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        body{

            background-color: snow;

        }

        .wrapper{

            width: 80%;

            height: 1000px;

            background-color: antiquewhite;

            margin: 0px auto;

        }

        .heading{

            width: 100%;

            height: 90px;

            background-color: snow;

            margin: 0px auto;

        }

        .heading_title{

            float: left;

            font-family: Arial, Helvetica, sans-serif;

            font-size: 30px;

            color: burlywood;

        }

        .heading_nav{

            padding-bottom: 30px;

            padding-top: 30px;

            width: 100%;

            height: 30px;

            position: relative;

        }

        ul{

            margin-left: 40px;

            float: left;

            list-style-type: none;

            padding-top: 6px;

            padding-bottom: 6px;

        }

        li{

            padding-left: 10px;

            display: inline;

        }

        a:link,a:visited{

            font-weight: bold;

            color: darkgray;

            text-align: center;

            padding: 6px;

            text-decoration: none;

        }

        a:hover,a:active{

            color: dimgray;

        }

        .heading_img img{

            border-radius: 30px;

            display: inline;

            width: 26px;

            height: 26px;

            box-shadow: 0 1px 1px rgba(0,0,0,0.2);

            float:  right;

        }

        .heading_soptlight form{

            float: right;

            width: 100px;

            height: 26px;

            position: relative;

            margin-right: 50px;

        }

        form input{

            height: 26px;

            border-radius: 30px;

        }

        .body{

            padding: 30px;

            height: auto;

            width: auto;

        }

        .body_title h3{

            font-size: 30px;

            font-family: Arial, Helvetica, sans-serif;

            color: #333333;

        }

        .body_title p{

            margin-top: 20px;

            margin-bottom: 20px;

        }

        .footing{

            padding-top: 20px;

            text-align: center;

            font-size: 10px;

            color: darkgray;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="wrapper">

            <div class="heading">

                <div class="heading_nav">

                    <div class="heading_title">

                        极客学院

                    </div>

                    <div class="heading_navbar">

                        <ul>

                            <li><a href="#">首页</a></li>

                            <li><a href="#">职业课程</a></li>

                            <li><a href="#">技术问答</a></li>

                            <li><a href="#">VIP会员</a></li>

                        </ul>

                    </div>

                    <div class="heading_img">

                        <img src="jokul.jpg">

                    </div>

                    <div class="heading_soptlight">

                        <form>

                            <input type="text">

                        </form>

                    </div>

                </div>

            </div>

            <div class="body">

                <div class="body_title">

                    <h3>熟悉极客学院</h3>

                    <p>加入极客学院，学习最新实战教程，全面提升你的技术能力</p>

                </div>

                <hr/>

                <hr/>

            </div>

        </div>

        <div class="footing">

            @极客学院

        </div>

    </div>

</body>

</html>
上一篇：web前端学习（三）css学习笔记部分（1）-- css入门基础知识+基本样式


下一篇：mysql数据库中实现内连接、左连接、右连接