HTML第八天

作者: 精彩i人生 | 来源:发表于2018-06-12 15:21 被阅读0次

HTML第八天
HTML学习之路-第八天
《一线》（25）：讨论
简笔画8/30
HTML5新特性__第八天
【大学生活的第八天】
3组-185-比纪 08作业 #裂变增长实验室#
2018-11-22
隨手一拍2016.12.16
2022-12-26

1

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>CSS3过渡动画</title>
<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        background-color: gold;
        /*在哪产生动画、动画的时间、运动曲线、延迟*/
        /*transition: border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/
        transition: all 500ms ease;
    }
    .box:hover{
        width: 500px;
        height: 300px;
        background-color: red;
        border-radius: 50px;
    }
</style>
  </head>
  <body>
<div class="box"></div>
  </body>
  </html>

2

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>背面可见</title>
<style type="text/css">
    .con{
        width: 300px;
        height: 300px;
        margin: 50px auto 0;
        border: 1px solid #000;
    }
    .box{
        width: 300px;
        height: 300px;
        background-color: gold;
        text-align: center;
        line-height: 300px;
        font-size: 50px;
        transition: all 500ms ease;
        /*设置盒子按3d空间显示*/
        transform-style: preserve-3d;
        /*设置透视距离、三维旋转的初始角度*/
        transform: perspective(800px) rotateY(0deg);
        /*设置盒子背面是否可见*/
        backface-visibility: hidden;
    }
    .con:hover .box{
        transform: rotateY(180deg);
    }
</style>
  </head>
  <body>
<div class="con">
    <div class="box">div元素</div>
</div>
  </body>
  </html>

3

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>变形</title>
<style type="text/css">
    .box,.box2,.box3,.box4{
        width: 200px;
        height: 200px;
        background-color: gold;
        margin: 50px auto 0;
        transition: all 1s ease;
    }
    .box:hover{
        /*box的动画不会影响到box2*/
        /*位移*/
        transform: translate(50px,50px);
    }
    .box2:hover{
        /*沿Z轴旋转360度*/
        transform: rotate(360deg);
    }
    .box3:hover{
        /*缩放*/
        transform: scale(0.5,0.2);
    }
    .box4:hover{
        /*斜切*/
        /*transform: skew(45deg,0);*/
        transform: skew(0,45deg);
    }
</style>
  </head>
  <body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
  </body>
  </html>

4

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>变形中心点</title>
<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background-color: gold;
        float: left;
        margin: 30px;
        transition: all 500ms ease;
    }
    div:hover{
        transform: rotate(-90deg);
    }
    div:nth-child(1){
        /*设置变形的中心点*/
        transform-origin: left center;
    }
    div:nth-child(2){
        transform-origin: left top;
    }
    div:nth-child(3){
        transform-origin: 50px 50px;
    }
</style>
  </head>
  <body>
<div></div>
<div></div>
<div></div>
  </body>
  </html>

5

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        background-color: blue;
        transition: width 500ms ease, height 500ms ease 500ms,background-color 500ms ease 500ms,border-radius 500ms ease;
    }
    .box:hover{
        width: 300px;
        height: 300px;
        background-color: yellow;
    }
</style>
  </head>
  <body>
<div class="box"></div>
  <body>
  </html>

6

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>图片翻面</title>
<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        backface-visibility: red;
        animation: moving 1s ease 0s 5 infinite alternate/* forwards*//*both*/;
        animation-play-state: paused;
    }
    .box:hover{
        animation-play-state: running; 
    }
    @keyframes moving{
        from{
            width: 100px;
        }
        to{

        }
    }
</style>
  </head>
  <body>

7

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>属性Hack</title>
<style type="text/css">
    body{
        background-color: #bfa;
        /*
        假设在IE6中需要将背景颜色设置为黄色才能达到和其它浏览器相同的效果
        */
        /*
        希望黄色背景只在IE6中生效
            在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
        */
        /*_background-color: yellow;*/
        /*添加了*的样式只有IE7及以下的浏览器认识*/
        /**background-color: yellow;*/
        /*在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别*/
        /*background-color: yellow\0;*/
        /*
        CSS Hack不到万不得已的情况尽量不要使用
        */
    }
</style>
  </head>
  <body>
    </body>
  </html>

8

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>条件Hack</title>
<link rel="stylesheet" type="text/css" href="css/style-normal.css">
<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="css/style-ie8.css">
<![endif]-->
  </head>
  <body>
<!-- 
有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，这时就可以使用CSS Hack来解决该问题
CSS Hack实际上指的是一种特殊的代码，这段代码只在某些浏览器中可以识别，而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码
 -->

<!-- 
条件Hack
    它只对IE浏览器有效，其它的浏览器都会将它识别为注释
    IE10及以上的浏览器已经不支持这种方式
 -->

<!-- 以下内容只会出现在IE6中 -->
<!--[if IE 6]>
    <p>为了您和家人的健康，请远离IE6！！</p>
<![endif]-->

<!--[if IE 8]>
    <p>当前浏览器是IE8！！</p>
<![endif]-->

<!--[if lt IE 9]>
    <p>该标签会在IE9以下的浏览器中显示</p>
<![endif]-->

<!--[if gte IE 9]>
    <p>该标签会在IE9及以上的浏览器中显示</p>
<![endif]-->

<!--[if lte IE 9]>
    <p>该标签会在IE9及以下的浏览器中显示</p>
<![endif]-->

<!--[if ! IE 6]>
    <p>你的浏览器不是IE6</p>
<![endif]-->
  </body>
  </html>

9

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>图片翻面</title>
<style type="text/css">
    .con{
        width: 345px;
        height: 345px;
        margin: 100px auto 0;
        position: relative;
        transform-style: preserve-3d;
        /*transform: perspective(800px) rotateY(0deg);*/
    }
    .con:hover .pic{
        transform: perspective(800px) rotateY(180deg);
    }
    .con:hover .info{
        transform: perspective(800px) rotateY(0deg);
    }
    .pic, .info{
        width: 345px;
        height: 345px;
        position: absolute;
        left: 0;
        top: 0;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        transform: perspective(800px) rotateY(0deg);
        transition: all 500ms ease;
    }
    .info{
        background-color: blue;
        text-align: center;
        line-height: 345px;
        transform: translateZ(2px) rotateY(180deg);
    }
</style>
  </head>
  <body>
<div class="con">
    <div class="pic">
        <img src="timg1.png" alt="薇恩">
    </div>
    <div class="info">觅心射手</div>
</div>

  <body>
  </html>

10

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>图片文字遮罩</title>
<style type="text/css">
    .box{
        width: 200px;
        height: 300px;
        margin: 50px auto 0;
        border: 1px solid #000;
        position: relative;
        overflow: hidden;
    }
    .box img{
        width: 200px;
        height: 300px;
    }
    .box .aaa{
        width: 200px;
        height: 200px;
        background-color: rgba(0,0,0,0.5);
        color: #fff;
        position: absolute;
        left: 0;
        top: 300px;
        transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
    }
    .box:hover .aaa{
        top: 150px;

    }
</style>
  </head>
  <body>
<div class="box">
    <img src="timg3.jpg" alt="xxx">
    <div class="aaa">cccccc</div>
</div>
  <body>
  </html>

11

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>选择符</title>
<style type="text/css">
    /*
    在选择器前添加* html 则该选择器只有IE6可以识别
    */
    * html body{
        background-color: #bfa;
    }
</style>
  </head>
  <body>
  </body>
  </html>

12

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>css3圆角 阴影 透明度</title>
<style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        border: 2px solid #000;
        background-color: gold;
        margin: 50px auto 0;
        /*border-top-left-radius: 100px 50px;左上角为椭圆圆角*/
        /*border-top-left-radius: 100px;
        border-top-right-radius: 100px;左、右上角为正圆圆角*/
        /*border-radius: 40px;曲率半径为40的圆角矩形*/
        /*border-radius: 20%;最大200px，20%即40px*/
        border-radius: 50%;/*正圆*/
    }
    .box1{
        width: 200px;
        height: 40px;
        background-color: gold;
        margin: 100px auto 0;
        /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色*/
        box-shadow: 10px 10px 10px 0px #bfa;
    }
    .box2{
        width: 200px;
        height: 40px;
        background-color: gold;
        margin: 100px auto 0;
        /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影*/
        box-shadow: 0px 0px 20px 2px red inset;
    }
    body{
        background-color: cyan;
    }
    .box3{
        width: 200px;
        height: 200px;
        /*background: url(images/location_bg.jpg);*/
        background-color: gold;
        margin: 50px auto 0;
        border: 2px solid #000;
        border-radius: 50%;
        /*透明度30%，文字也透明了*/
        opacity: 0.3;
        filter: alpha(opacity=30);/*兼容IE*/
        text-align: center;
        line-height: 200px;
    }
    .box4{
        width: 200px;
        height: 200px;
        /*背景色变透明，但文字不会透明*/
        background-color: rgba(255,215,0,0.3);
        margin: 50px auto 0;
        /*边框透明*/
        border: 2px solid rgba(0,0,0,0.3);
        border-radius: 50%;
        text-align: center;
        line-height: 200px;
    }
</style>
  </head>
  <body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">床前明月光</div>
<div class="box4">床前明月光</div>
  </body>
  </html>

13

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>运动曲线</title>
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-top: 20px;
    }
    div:nth-child(1){
        transition: all 1s linear;
    }/*匀速*/
    div:nth-child(2){
        transition: all 1s linear;
    }/*开始和结束慢速，中间加速*/
    div:nth-child(3){
        transition: all 1s linear;
    }/*开始慢，结尾突然停止*/
    div:nth-child(4){
        transition: all 1s linear;
    }/*突然开始，结束时慢速*/
    div:nth-child(5){
        transition: all 1s linear;
    }/*开始和结束时慢速*/
    div:nth-child(6){
        transition: 
    }
    div:hover{
        width: 300px;
        
    }
</style>
  </head>
  <body>
<div>linear</div>
<div>ease</div>
<div>ease-in</div>
<div>ease-out</div>
<div>ease-in-out</div>
<div>ease-</div>
  <body>
  </html>

14

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>走帧图</title>
<style type="text/css">
    .box{
        width: 120px;
        height: 182px;
        border: 1px solid yellow;
        margin: 50px auto 0;
        animation: moving 1s ease 1s both;

    }
    @keyframes walking{
        0%{
            transform: translateY(0px);
        }
        50%{
            transform: translateY(400px);
            background-color: blue
        }
        100%{
            transform: translateY(0px);
            background-color: red
        }
    }
</style>
  </head>
  <body>
<div class="box">
    <img src="walking.png" alt="走路">
</div>

  <body>
  </html>

15

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>作业</title>
<style type="text/css">
    .box{
        width: 300px;
        height: 120px;
        border: 1px solid #000;
        margin: 50px auto ;
    }
    .box1{
        width: 30px;
        height: 30px;
        background-color: red;
        float: left;
        margin-top: 50px;
        margin-left: 10px;
        border-radius: 15px;
        animation: moving 500ms ease infinite alternate;
    }
    
    .box2{
        width: 30px;
        height: 30px;
        background-color: yellow;
        float: left;
        margin-top: 50px;
        margin-left: 20px;
        border-radius: 15px;
        animation: moving 500ms ease 100ms infinite alternate;
    }
    
    .box3{
        width: 30px;
        height: 30px;
        background-color: blue;
        float: left;
        margin-top: 50px;
        margin-left: 20px;
        border-radius: 15px;
        animation: moving 500ms ease 200ms infinite alternate;
    }
    
    .box4{
        width: 30px;
        height: 30px;
        background-color: yellowgreen;
        float: left;
        margin-top: 50px;
        margin-left: 20px;
        border-radius: 15px;
        animation: moving 500ms ease 300ms infinite alternate;
    }
    
    .box5{
        width: 30px;
        height: 30px;
        background-color: pink;
        float: left;
        margin-top: 50px;
        margin-left: 20px;
        border-radius: 15px;
        animation: moving 500ms ease 400ms infinite alternate;
    }
    
    .box6{
        width: 30px;
        height: 30px;
        background-color: orange;
        float: left;
        margin-top: 50px;
        margin-left: 20px;
        border-radius: 15px;
        animation: moving 500ms ease 500ms infinite alternate;
    }
    @keyframes moving {
        from{
            weight: 50px;
        }
        to{
            transform: scale(1,2);
        }
    }
        .aa{
        height: 50px;
        width: 120px;
        text-align: center;
        line-height: 50px;
        margin-top: 80px;
        margin-left: 100px;
        font-size: 10px;
        }

</style>
  </head>
  <body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="aa">laoding...</div>
</div>

  <body>
  </html>