王庆召_20210113 王庆召

一、知识点总结

1、transform

transform 是 css3 的属性,该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放, 移动,倾斜等。

transform: none|transform-functions;

2、transition

transition 属性设置元素当过渡效果,四个简写属性为

  • transition-property 指定CSS属性的name,transition效果

  • transition-duration transition效果需要指定多少秒或毫秒才能完成

  • transition-timing-function 指定transition效果的转速曲线

  • transition-delay 定义transition效果开始的时候

    transition: property duration timing-function delay;
    

3、动画

动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色 定义语法:

@keyframes animationName{
    from {}
    to {}
}

3.1 使用
animation: name duration timing-function delay iteration-count direction
fill-mode play-state;

4、列表属性

List-style

  • list-style:none; 没有点的呈现
  • list-style: disc; 呈现圆点
  • list-style: circle; 空心圆
  • list-style: square;正方块

5、透明度

opacity·: 0.8; /属性值 [0-1] 0:完全透明 1:不透明/

6、光标

cursor: pointer;

  • repeat 水平和垂直方向都重复
  • default 默认光标
  • help 指示可用的帮助(通常是一个问号或一个气球)
  • wait 指程序正忙(通常是一个表或沙漏)

7、布局(排版)

之前呢,我们已经学习了CSS的基础知识,如何设置文本的样式,背景等。现在我们来看看如何把你的 内容放在与你想要的正确位置上。 CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者 主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节 :

  • 正常布局流
  • display 属性
  • 弹性盒子
  • 网格 浮动
  • 定位
  • CSS
  • 表格布局
  • 多列布局

8、清除浮动

clear可以取三个值:

  • left :停止任何活动的左浮动
  • right :停止任何活动的右浮动
  • both :停止任何活动的左右浮动

9、总结

  • 脱离文档流,不占原来的文档流位置
  • 浮动元素在父元素中所占的面积的有效高度为0
  • 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间

10、代码实例

10.1导航栏
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航栏</title>
        <style type="text/css">
            ul > li {
                /* 相对定位 */
                position: relative;
                /* 列表尺寸 */
                width: 150px;
                height: 30px;
                /* 去掉 列表 前的点 */
                list-style: none;
                /* 浮动到一行 */
                float: left;
                /* 距离左边元素 15 像素 */
                margin-left: 15px;
                /* 鼠标样式 修改为 手指 */
                cursor: pointer;
                /* 文字居中显示 */
                text-align: center;
                /* 纵向居中 */
                line-height: 30px;
                /* 字体加粗 */
                font-weight: bold;
                
                /* 保留3d效果 */
                transform-style: preserve-3d;
                
                /* 过渡效果 */
                transition: all 1s linear;
            }
            ul > li:nth-child(1){
                margin-left: 0;
            }
            
            ul > li:hover{
                transform: rotateX(90deg);
            }
            
            .top, .bottom{
                width: 150px;
                height: 30px;
                /* 绝对定位 */
                position: absolute;
                top: 0;
                left: 0;
            }
            .top{
                background-color: #ccc;
                transform: translateZ(15px);
            }
            .bottom{
                background-color: lightyellow;
                /* 旋转 */
                transform: translateY(15px) rotateX(-90deg);
            }
        </style>
    </head>
    <body>
        <ul>
            <!-- (li>div.top+div.bottom)*5 tab -->
            <li>
                <div class="top">云创动力</div>
                <div class="bottom">首页</div>
            </li>
            <li>
                <div class="top">云创动力</div>
                <div class="bottom">首页</div>
            </li>
            <li>
                <div class="top">云创动力</div>
                <div class="bottom">首页</div>
            </li>
            <li>
                <div class="top">云创动力</div>
                <div class="bottom">首页</div>
            </li>
            <li>
                <div class="top">云创动力</div>
                <div class="bottom">首页</div>
            </li>
        </ul>
        
    </body>
</html>

10.2 翻转
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        ul>li{
            margin-top: 300px;
            list-style: none;
            position: relative;
            width: 80px;
            height: 40px;
            transition: transform 1s linear;
            transform-style: preserve-3d;
            float: left;
            margin-left: 250px;
        }
        span{
            display: block;
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            position: absolute; 
            color: white;
            
        }
        span:nth-child(1){
            background-color: #008000;
            transform: translateZ(20px);
        }
        span:nth-child(2){
            background-color: mediumpurple;
            transform: translateY(20px) rotateX(-90deg)
        }
        li:hover{
            transform: rotateX(90deg);
            
            cursor: pointer;
        }
    </style>
    <body>
        <ul>
            <li>
                <span>云创动力</span>
                <span>IT特种兵</span>
            </li>
            <li>
                <span>云创动力</span>
                <span>IT特种兵</span>
            </li>
            <li>
                <span>云创动力</span>
                <span>IT特种兵</span>
            </li>
    
        </ul>
    </body>
</html>
10.3 旋转相册
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>相册</title>
        <style type="text/css">
            body{
                perspective: 800px;
            }
            
            .box{
                /* 相对定位 */
                position: relative;
                width: 380px;
                height: 300px;
                /* 居中 */
                margin: 200px auto;
                /* 保留3d 效果 */
                transform-style: preserve-3d;
                
                transform: rotateX(-20deg);
                
                animation: rotatu 6s linear infinite;
            }
            
            .box:hover{
                /* 动画暂停 */
                animation-play-state: paused;
            }
            .box>div{
                /* 绝对定位 */
                position: absolute;
                top: 0;
                left: 0;
                width: 380px;
                height: 300px;
                background-image: url(img/2.jpg);
                background-size: cover;
            }
            
            .box>div:nth-child(1){
                transform: translateZ(450px);
            }
            
            .box>div:nth-child(2){
                transform: rotateY(60deg)  translateZ(450px) ;
            }
            .box>div:nth-child(3){
                transform: rotateY(120deg) translateZ(450px) ;
            }
            
            .box>div:nth-child(4){
                transform: rotateY(180deg) translateZ(450px) ;
            }
            .box>div:nth-child(5){
                transform: rotateY(240deg) translateZ(450px) ;
            }
            .box>div:nth-child(6){
                transform: rotateY(300deg) translateZ(450px) ;
            }
            
            @keyframes rotatu{
                from{
                    transform: rotateX(-20deg) rotateY(0deg);
                }
                to{
                    transform: rotateX(-20deg) rotateY(360deg);
                }
            }
            
        </style>
    </head>
    <body>
        <div class="box">
            
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>w
10.3 浮动
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>浮动2</title>
        <style type="text/css">
            body {
              width: 90%;
              max-width: 900px;
              margin: 0 auto;
            }
            
            div{
                width: 48%;
            }
            
            .first{
                float: left;
            }
            
            .second{
                float: right;
            }
            footer{
                clear:both;
            }
            
        </style>
    </head>
    <body>
        <h1>2 column layout example</h1>
        <div class="first">
          <h2>First column</h2>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
        </div>
        
        <div class="second">
          <h2>Second column</h2>
          <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
        <footer>
          <p>&copy;2020 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p>
        </footer>
    </body>
</html>

二、心得体会

  1. 今日所学习的CSS动画效果的制作,理解起来和运用起来比较困难,但学习的兴趣很浓厚,对这一块的知识点也很感兴趣,对于敲代码的时候所遇到的一些问题,也能够独立解决,或者通过上网查询也能够解决一部分,对自己的编程能力是有一定提高的。

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1