您的位置: 首页  >  IT文章  >  web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

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

分类: IT文章 • 2022-05-11 20:03:11

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>

相关推荐