A2021-A2022年度总结项目内容（三）（二）-阿里云开发者社区

/*css样式模块外链式
 */
*{
  background: lightpink;
  color: black;
  font-family: "微软雅黑";
  font-weight: bolder;
  text-shadow: 3px 1px paleturquoise;
}

*{
            padding: 0;margin:0;
            background: lavender;
            background: linear-gradient(to top, pink,green);
        }
        html,body{
            width: 100%;
            height: 100%;
            background: -webkit-radial-gradient(#f50607,#800807);
            background: -moz-radial-gradient(#f50607,#800807);
            background: -o-radial-gradient(#f50607,#800807);
            background: radial-gradient(#f50607,#800807);
        }
        .container{
            width: 500px;
            padding:100px;
            margin:0 auto;
            overflow: hidden;
        }
        .left{width: 250px;float: left;}
        .left h2{line-height: 50px;text-align: center;color: #fff;}
        .level,.result-box,button{ width: 250px;
            height: 40px;}
        .level{
            border-radius: 4px;
            font-size:18px;
        }
        .result-box{
            margin:15px 0;
            border-radius: 4px;
            background-color:mediumaquamarine;
            text-align:center; line-height:36px; font-size:18px;
        }
         button{
            border:none; color:#fff;font-size:18px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:focus{outline:none;}
        .start{ background-color: darkgray;}
        .end{ background-color:lightcoral;}
        .list{width: 200px;
            min-height: 250px;
            background: khaki;
            float: right;
            border-radius: 4px;
            padding: 10px;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画来回循环</title>
    <style>
        .pics{
            position: relative;
            width: 400px;
            height: 400px;
        }
        .pic1{
            width: 400px;
            height: 400px;
            -webkit-animation: picDraw 5s ease-in-out infinite;
        }
        .pic3{
            position: absolute;
            width: 400px;
            height: 400px;
            left: 0;
            top: 0;
            -webkit-animation: picDraw 5s ease-in-out infinite;
        }
        @keyframes picDraw {
            0%{
                opacity: 0;
                transform: rotate(12deg);
               /* transform: scale(0.5);
                transform: translate(1000px, 0);*/
            }
            25%{
                opacity: 1;
                transform: scale(1.2);
                /*transform: rotate(6deg);
                transform: translate(1000px, 500px);*/
            }
            50%{
                opacity: 0;
               /* transform: scale(0.8);
                transform: rotate(30deg);*/
                transform: translate(800px, 400px);
            }
            100%{
                opacity: 0;
                transform: scale(1.2);
                /*transform: rotate(100deg);*/
                transform: translate(0px, 0px);
            }
        }
    </style>
</head>
<body>
<div class="pics">
    <img src="like/a%20(5).jpg" alt="" class="pic1">
    <img src="like/a%20(7).jpg" alt="" class="pic3">
</div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>

<!DOCTYPE html>
<!--进入 css3的学习内容-->
<html>
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style type="text/css">
        *{
            text-align: center;
            /*这种方法自己参考*/
            /* background-image: linear-gradient(0deg,  white, whitesmoke);*/
            /*颜色写法的模式*/
            /*方法一color+颜色单词*/
            color: red;
            /*方法二color+#后六的字符*/
            color: #FF0000;
            /*方法三定义RGB模式*/
            color: rgb(64,423,154);
            color: rgb(24%,123%,67%);
            /*背景色的定义方法一*/
            background-color: rgba(223,124,67,0.6);
            /*背景色的定义方法二*/
            background-color: rgba(40%,30%,67%,0.6);
        }
        /*自定义字体内容学习模块*/
        @font-face {
            /*字体的名称为F*/
            font-family: f;
            /*src: url('STCAIYUN.TTF');*/
            /*引入字体模块*/
            src: url('YUGOTHM.TTC');
        }
        h1{
            /*字体名称*/
            font-family: f;
        }
    </style>
</head>
<body>
<h1>我是自定义字体一我是自定义字体一我是自定义字体一我是自定义字体一我是自定义字体一我是自定义字体一我是自定义字体一 定义字体一我是自定义字体一我是自定义字体一我是自定义字体一</h1>
<h1>我是自定义字体二</h1>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画二</title>
    <!--Css学习内容二动画效果-->
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: pink;
            animation-name: k;
            animation-duration: 15s;
            /*动画运行运动曲线*/
            animation-timing-function: ease;
            animation-timing-function: ease-in-out;
            animation-timing-function: ease-out;
            /*动画播放次数*/
            animation-iteration-count: 3;
            /*动画是否反向*/
            animation-direction: alternate;
            animation-direction: alternate-reverse;
            /*动画初始*/
            animation-fill-mode: backwards;
            animation-fill-mode: forwards;
            animation-fill-mode: both;
            /*连写*/
            /*animation: move 4s ease 2s infinite alternate forwards;*/
        }
        div:hover{
            animation-play-state: paused;
        }
        /*动画的效果图*/
        @keyframes k{
            15%{
                transform: translate(2200px,0);
                background: lavender;
                font-size: 50px;
                height: 300px;
            }
            20%{
                transform: translate(2200px,500px);
                width: 200px;
                background: royalblue;
            }
            35%{
                transform: translate(0px,500px);
               background-color: #FF0000;
            }
            45%{
                transform: translate(1000px,0);
                height: 200px;
                background: lavender;
                font-size: 50px;
            }
            55%{
                transform: translate(1000px,500px);
                width: 10px;
                background: royalblue;
                height: 20px;
            }
            65%{
                transform: translate(0px,500px);
                height: 20px;
                background: peachpuff;
                font-size: 20px;
            }
            75%{
                transform: translate(0px,500px);
                height: 20px;
                background: yellow;
                font-size: 20px;
            }
            85%{
                transform: translate(0px,500px);
                height: 20px;
                background: palevioletred;
                font-size: 20px;
            }
            95%{
                transform: translate(0px,500px);
                height: 20px;
                background: pink;
                font-size: 20px;
            }
            100%{
                transform: translate(0px,0px);
            }
        }
    </style>
</head>
<body>
<div style="background: gray; float: left;" >1</div>
<div style="background: red; float:right;">2</div>
<div style="background: khaki; float: initial;" >3</div>
<div style="background: crimson; float: left;" >1</div>
<div style="background: #1E90FF; float:right;">2</div>
<div style="background: khaki; float: initial;" >3</div>
<div style="background: salmon; float: right;">4</div>
<div style="background: mediumpurple;">5</div>
<div style="background: skyblue;">6</div>
<div style="background: salmon; float: right;">4</div>
<div style="background: mediumpurple;">5</div>
<div style="background: lightblue;">6</div>
<div style="background: gray; float: left;" >1</div>
<div style="background: red; float:right;">2</div>
<div style="background: khaki; float: initial;" >3</div>
<div style="background: crimson; float: left;" >1</div>
<div style="background: #1E90FF; float:right;">2</div>
<div style="background: khaki; float: initial;" >3</div>
<div style="background: salmon; float: right;">4</div>
<div style="background: mediumpurple;">5</div>
<div style="background: skyblue;">6</div>
<div style="background: salmon; float: right;">4</div>
<div style="background: mediumpurple;">5</div>
<div style="background: lightblue;">6</div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
    <title>二D转动图</title>
<head>
    <style  type="text/css">
        div{
            overflow: hidden;
            border: solid 2px red;
            font-weight: bolder;
            width: 200px;
            height: 200px;
           float: left;
            margin: 10px;
            background-color: #FF99CC;
            /*2D转动的角度*/
            transform: rotate(125deg);
            /*2D转动的时间*/
            transition: all 5s;
        }
/*当鼠标经过*/
        div:hover{
         /* 当鼠标经过是色彩为green*转动-200度*/
            overflow: hidden;
            transform-origin: 100px 100px;
            background-color: green;
            transform: rotate(-200deg);
            /*缩放的位置*/
            transform: scale(3,2);
       }
        div:before {
            display: block;
            content: '增加的内容divbefore';
            height: 200px;
            width: 200px;
            background-color: yellow;
            /*设置原点*/
            transform-origin: left bottom;
            transform: rotate(60deg);
            transition: all 5s;
        }
        div:hover::before{
            overflow:hidden ;
            /* 当鼠标经过是色彩为green*转动-200度*/
            overflow: hidden;
            transform-origin: 100px 100px;
            background-color: red;
            transform: rotate(-180deg);
            /*缩放的位置*/
            transform: scale(3,2);
        }
    </style>
    <meta charset="UTF-8">
</head>
<body>
<h1>本案例的要点内容：
    transform: rotate(125deg);设置角度<br>
    transform: scale(1,1.5); 设置大小<br>
    transform-origin: left bottom; 设置原点<br>
    transition: all 5s; 设置时间<br>
    overflow: hidden; 隐藏不需要的部分<br>
</h1>
<hr>
<div>观看二D动画@1</div>
<div>观看二D动画@2</div>
<div>观看二D动画@3</div>
<div>观看二D动画@4</div>
<div>观看二D动画@5</div>
<div>观看二D动画@5</div>
<div>观看二D动画@6</div>
<div>观看二D动画@4</div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
    <title>二D转动图</title>
<head>
    <style  type="text/css">
        div{
            overflow: hidden;
            border: solid 2px red;
            font-weight: bolder;
            width: 200px;
            height: 200px;
           float: left;
            margin: 10px;
            background-color: #FF99CC;
            /*2D转动的角度*/
            transform: rotate(125deg);
            /*2D转动的时间*/
            transition: all 5s;
        }
/*当鼠标经过*/
        div:hover{
         /* 当鼠标经过是色彩为green*转动-200度*/
            overflow: hidden;
            transform-origin: 100px 100px;
            background-color: green;
            transform: rotate(-200deg);
            /*缩放的位置*/
            transform: scale(3,2);
       }
        div:after {
            display: block;
            content: '增加的内容divafter';
            height: 200px;
            width: 200px;
            background-color: yellow;
            /*设置原点*/
            transform-origin: left bottom;
            transform: rotate(60deg);
            transition: all 5s;
        }
        div:hover:after{
            overflow:hidden ;
            /* 当鼠标经过是色彩为green*转动-200度*/
            overflow: hidden;
            transform-origin: 100px 100px;
            background-color: red;
            transform: rotate(-180deg);
            /*缩放的位置*/
            transform: scale(3,2);
        }
    </style>
    <meta charset="UTF-8">
</head>
<body>
<h1>本案例的要点内容：
    transform: rotate(125deg);设置角度<br>
    transform: scale(1,1.5); 设置大小<br>
    transform-origin: left bottom; 设置原点<br>
    transition: all 5s; 设置时间<br>
    overflow: hidden; 隐藏不需要的部分<br>
</h1>
<hr>
<div>观看二D动画@1增加的内容divafter</div>
<div>观看二D动画@2增加的内容divafter</div>
<div>观看二D动画@3增加的内容divafter</div>
<div>观看二D动画@4增加的内容divafter</div>
<div>观看二D动画@5增加的内容divafter</div>
<div>观看二D动画@5增加的内容divafter</div>
<div>观看二D动画@6增加的内容divafter</div>
<div>观看二D动画@4增加的内容divafter</div>
<div>观看二D动画@5增加的内容divafter</div>
<div>观看二D动画@5增加的内容divafter</div>
<div>观看二D动画@6增加的内容divafter</div>
<div>观看二D动画@4增加的内容divafter</div>
<div>观看二D动画@5增加的内容divafter</div>
<div>观看二D动画@5增加的内容divafter</div>
<div>观看二D动画@6增加的内容divafter</div>
<div>观看二D动画@5增加的内容divafter</div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪元素选择器</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        div::before {
            content: '我';
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        div::after {
            content: '伪元素';
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div>
    是hellow
</div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        *{
            background-image: linear-gradient(0deg, white, whitesmoke);
            font-size: 20px;
            text-shadow: 1px 1px 1px pink;
            font-weight: bolder;
            border:   lavender 1px;
        }
        div{
            font-size: 43px;
            width: 0px;
            height: 200px;
            line-height: 100px;
            color:black;
            font-weight: bold;
            background-color: #CCFFFF;
            /*定义字体的步数*/
            animation: move 10s steps(28)forwards;
        }
        @keyframes move {
            0% {
                width: 0%;
                height: 0%;
            }
            100% {
                width: 1200px;
            }
        }
    </style>
    <title>动画打字机</title>
</head>
<body>
<div style="float: left">天行健君子以自强不息，地势坤君子以厚德载物。静以修身@1</div>
<br>
<div style="float: bottom">天行健君子以自强不息，地势坤君子以厚德载物。静以修身@2</div>
<br>
<hr>
<div style="float: bottom">天行健君子以自强不息，地势坤君子以厚德载物。静以修身@3</div>
<hr>
<div style="float: initial">天行健君子以自强不息，地势坤君子以厚德载物。静以修身@4</div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <style>
       div {
           overflow: hidden;
           border: solid 2px red;
           font-weight: bolder;
           width: 200px;
           height: 200px;
           float: left;
           margin: 10px;
           background-color: #FF99CC;
           /*2D转动的角度*/
           transform: rotate(125deg);
           /*2D转动的时间*/
           transition: all 5s;
           /*动画名称*/
           animation-name: k;
           animation-duration: 15s;
           /*动画运行运动曲线*/
         /*  animation-timing-function: ease;
           animation-timing-function: ease-in-out;*/
           animation-timing-function: ease-out;
           /*动画播放次数*/
           animation-iteration-count: 5;
           /*动画是否反向*/
         /*  animation-direction: alternate;*/
           animation-direction: alternate-reverse;
           /*动画初始*/
          /* animation-fill-mode: backwards;
           animation-fill-mode: forwards;*/
           animation-fill-mode: both;
       }
       /*当鼠标经过*/
       div:hover{
           /* 当鼠标经过是色彩为green*转动-200度*/
           overflow: hidden;
           transform-origin: 100px 100px;
           background-color: green;
           transform: rotate(-200deg);
           /*缩放的位置*/
           transform: scale(3,2);
       }
       div:before {
           display: block;
           content: '增加的内容divbefore';
           height: 200px;
           width: 200px;
           background-color: yellow;
           /*设置原点*/
           transform-origin: left bottom;
           transform: rotate(60deg);
           transition: all 5s;
       }
       div:hover::before{
           overflow:hidden ;
           /* 当鼠标经过是色彩为green*转动-200度*/
           overflow: hidden;
           transform-origin: 100px 100px;
           background-color: red;
           transform: rotate(-180deg);
           /*缩放的位置*/
           transform: scale(3,2);
       }
       /*动画的效果图*/
       @keyframes k {
           15% {
               transform: translate(1000px, 0);
               background: lavender;
               font-size: 20px;
               height: 200px;
           }
           45% {
               transform: translate(1000px, 0);
               height: 300px;
               background: lavender;
               font-size: 50px;
           }
           55% {
               transform: translate(1000px, 500px);
               width: 200px;
               background: royalblue;
               height: 200px;
           }
           65% {
               transform: translate(0px, 500px);
               height: 200px;
               background: peachpuff;
               font-size: 200px;
           }
           75% {
               transform: translate(0px, 500px);
               height: 200px;
               background: yellow;
               font-size: 20px;
           }
           85% {
               transform: translate(0px, 500px);
               height: 200px;
               background: palevioletred;
               font-size: 20px;
           }
           95% {
               transform: translate(0px, 500px);
               height: 200px;
               background: pink;
               font-size: 20px;
           }
           100% {
               transform: translate(0px, 0px);
           }
       }
   </style>
    <title>动画加二D</title>
</head>
<body>
<div>
    我是div动画+二维的综合案例
    </div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        *{
            background-image: linear-gradient(0deg, white, whitesmoke);
            font-size: 20px;
            text-shadow: 1px 1px 1px pink;
            font-weight: bolder;
            border:   lavender 1px;
        }
     div{
         font-size: 43px;
         width: 0px;
         height: 200px;
         line-height: 100px;
         color:black;
         font-weight: bold;
         background-color: #CCFFFF;
         /*定义字体的步数*/
         animation: move 10s steps(28)forwards;
     }
        @keyframes move  {
            0%{
                width: 0%;
                height: 0%;
            }
            100%{
                width: 1200px;
            }
            /*定义动画的角度*/
            /*from to 从什么90度时刻开始到那个时刻360度*/
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(1deg);
            }
        }
    </style>
    <title>动画打字机</title>
</head>
<body>
<div style="float: left">天行健君子以自强不息，地势坤君子以厚德载物。静以修身@1</div>
<br>
<div style="float: bottom">天行健君子以自强不息，地势坤君子以厚德载物。静以修身@2</div>
<br>
<hr>
<div style="float: bottom">天行健君子以自强不息，地势坤君子以厚德载物。静以修身@3</div>
<hr>
<div style="float: initial">天行健君子以自强不息，地势坤君子以厚德载物。静以修身@4</div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画来回循环</title>
    <style>
        .pics{
            position: relative;
            width: 400px;
            height: 400px;
        }
        .pic1{
            width: 400px;
            height: 400px;
            -webkit-animation: picDraw 5s ease-in-out infinite;
        }
        .pic3{
            position: absolute;
            width: 400px;
            height: 400px;
            left: 0;
            top: 0;
            -webkit-animation: picDraw 5s ease-in-out infinite;
        }
        @keyframes picDraw {
            0%{
                opacity: 0;
                transform: scale(0.5);
            }
            25%{
                opacity: 1;
                transform: scale(0.7);
            }
            50%{
                opacity: 0;
                transform: scale(0.8);
            }
            0%{
                opacity: 0;
                transform: scale(1.2);
            }
        }
    </style>
</head>
<body>
<div class="pics">
    <img src="like/a%20(5).jpg" alt="" class="pic1">
    <img src="like/a%20(7).jpg" alt="" class="pic3">
    <img src="like/a%20(5).jpg" alt="" class="pic1">
    <img src="like/a%20(7).jpg" alt="" class="pic3">
    <img src="like/a%20(5).jpg" alt="" class="pic1">
    <img src="like/a%20(7).jpg" alt="" class="pic3">
    <img src="like/a%20(5).jpg" alt="" class="pic1">
    <img src="like/a%20(7).jpg" alt="" class="pic3">
</div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--定义动画-->
    <style type="text/css">
        @keyframes a {
           0%{
               transform: scale(1);
           }
            30%{
                transform: scale(0.5);
            }
            60%{
                transform: scale(1.7);
            }
            100%{
                transform: scale(2);
            }
        }
        div{
            width: 300px;
            height: 300px;
            border: lightblue  solid 12px;
            margin: auto;
            background: url("like/a (1).jpg");
            background-size: 200px 200px;
          -webkit-animation-name: a;
            -webkit-animation-timing-function: ease-in-out;
            animation-iteration-count: 3;
            -webkit-animation-duration: 10s;
        }
    </style>
    <title>动画的放大与缩小</title>
</head>
<body>
<div style="align-content: center ;text-align: center">图片的放大缩小</div>
<div style="align-content: center ;text-align: center">图片的放大缩小</div>
<div style="align-content: center ;text-align: center">图片的放大缩小</div>
<div style="align-content: center ;text-align: center">图片的放大缩小</div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

A2021-A2022年度总结项目内容（三）（二）

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

A2021-A2022年度总结项目内容（三）（二）

热门文章

最新文章

相关电子书

相关实验场景