html

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta name="keywors" content="关键字">

     <title>动态管理</title>

     <link type="text/css" href="a.css" rel="stylesheet">

     <style type="text/css">

         *{margin:0}

 /*start body*/

         body{width:100%;color:#FFFFFF;background-image:url("1.jpeg");/*设置背景平铺*/background-repeat: repeat;/*背景居中*/background-position:center;/*防止背景随文本滚动条滚动至图片底部而背景消失*/background-attachment:fixed;/*当元素内容溢出时选择是否使用滚动条 默认 visible*/overflow:auto}

 /*end body*/

 /*start text*/

         .text{width:700px;height:400px;margin:0 auto;}

         .text p{line-height:200%;font-size:200%;/*首行缩进*/text-indent:2em;/*字体 宋体楷体等*/font-family:Serif;/*字体样式 斜体等*/font-style:oblique;/*字符间距*/letter-spacing:20px;font-weight:1800;/*文本大写字母开头*/text-transform:capitalize;}

         .text h1{font-size:5vh/*vh 表示视图高度 百分比高*/;/*文本对齐方式*/text-align:center; line-height:200%;font-family:Fantasy;}

         /*文本修饰*/

         .text h2{text-decoration:overline}

         .text h3{text-decoration:line-through}

         .text h4{text-decoration:underline}

         .text h5{text-decoration:blink}

 /*end text*/

 /* start img*/

         .imgList{width:100%;height:100%;top:0;left:0;}

         .img1,.img2,.img3,.imgList{position:absolute;}/*绝对定位*/

         .img1{left:10%;top:10%;}

 /*        .img2{bottom:10%;right:10%;animation: myframe 10s esse-in-out 0s infinite alternate; }*/

 /*        .img2{bottom:10%;right:10%;}   */

         .img3{top:10%;right:10%;transform:rotate(50deg);/*图片剪切*/clip:circle(100) }

 /*end img*/

 /*start list*/

         .list{width:100%; height:400px;font-size:200%;/*边框样式*/border:solid;/*边框颜色*/border-color:red;/*边框宽度  上右下左*/border-width: 5px 20px 10px 1px;}

         .l1{list-style-type:none;}

         .l2{list-style-type:circle;}

         .l3{list-style-type:square;}

 /*end list*/

     </style>

 </head>

 <body>

 <!-- start text-->

     <div class="text" >

         <h1>动态网页测试</h1>

         <h2>测试标题2</h2>

         <h3>测试标题3</h3>

         <h4>测试标题4</h4>

         <h5>测试标题5</h5>

 <!--start list-->

         <div class="list">

             <ul class="l1">

                 <li>茶</li>

                 <li>咖啡</li>

             </ul>

             <ul class="l2">

                 <li>茶</li>

                 <li>咖啡</li>

             </ul>

             <ul class="l3">

                 <li>茶</li>

                 <li>咖啡</li>

             </ul>

         </div>

 <!--end list-->

         <p id="test"></p>

     </div>

 <!-- end text-->

 <!--star image-->

     <div class="imgList">

         <img src="1.jpeg" width="250" height="200" alt="" class="img1 bounce">

         <img src="2.jpeg" width="250" height="200" alt="" class="img2 run">

         <img src="3.jpg" width="250" height="200" alt="" class="img3 my">

     </div>

 <!--end image-->

     <script>

         var i=0;

         var str="this is 动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试动态网页测试";

         window.onload = function typing(){

         var myDiv = document.getElementById("test");

         myDiv.innerHTML+=str.charAt(i)

         i++;

         console.log("AAA");

         if(i<=str.length){

             var id =setTimeout(typing,100);

         }

         }

     </script>

 </body>

 </html>

css

 .bounce{animation:bounce 3s ease-out infinite;}

 @keyframes bounce {

   0% {

     transform:translateY(-100%);

     opacity:;

   }

   5% {

       transform:translateY(-100%);

     opacity:;

   }

   15% {

       transform:translateY(0);

     padding-bottom: 5px;

   }

   30% {

       transform:translateY(-50%);

   }

   40% {

       transform:translateY(0%);

     padding-bottom: 6px;

   }

   50% {

       transform:translateY(-30%);

   }

   70% {

       transform:translateY(0%);

     padding-bottom: 7px;

   }

   80% {

       transform:translateY(-15%);

   }

   90% {

       transform:translateY(0%);

       padding-bottom: 8px;

   }

   95% {

       transform:translateY(-7%);

   }

   97% {

       transform:translateY(0%);

       padding-bottom: 9px;

   }

   99% {

       transform:translateY(-3%);

   }

   100% {

       transform:translateY(0);

       padding-bottom: 9px;

     opacity:;

   }

 }

 .my{animation:my 3s ease-out infinite;}

 @keyframes my {

  0%{transform:translate3d(0,0,0);}

  33%{transform:translate3d(-10px,20px,0);}

  66%{transform:translate3d(5px,-20px,0);}

  100%{transform:translate3d(0,0,0);}

 }

 .run{animation:run 5s ease-in-out 0s infinite;}

 @keyframes run {

 0%{bottom: 20px;left:200px;opacity:;}

 50%{bottom: 50px;left:300px;opacity:0.5;}

 75%{bottom: 100px;left:400px;opacity:;}

 100%{bottom: 200px;left:500px;}

 }

cssTest的更多相关文章

  1. css-test

    transition-content See the Pen NLOgVR by nakata139@gmail.com (@deepblue1982) on CodePen.

  2. 从is(":checked")说起

    *此文所用jQuery版本应大于1.6.1   如何判断一个单选(复选)框是否选中. 对于刚接触jQuery的人,第一反应必然是. <input id="checkbox1" ...

  3. HTML基础

    HTML指的是超文本标记语言 (Hyper Text Markup Language), HTML不是一种编程语言,而是一种标记语言 (markup language) ,HTML使用标记标签来描述网 ...

  4. 使用gulp解决RequireJS项目前端缓存问题（一）

    1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...

  5. 静态Include和动态Include测试并总结

    主要代码 hjzgg.css .center-div{ width:auto; margin-left: 40%; margin-right: 40%; display: block; positio ...

  6. html基础大全(经典)

    HTML教程 一.HTML基础(人) 1.基础概念: 1.1.自动闭合标签和闭合标签(如出错html编写时不会报错) 自闭合:<mete  /> 闭合:<table>文字< ...

  7. html/css基础篇——link和@inport详解以及脚本执行顺序探讨

    先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...

  8. flex 4 布局样式

    Flex 4 样式与布局 第一篇 Flex 4 与自定义布局(Layout) Flex 4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身.您需要做的就是定义一个自定义布局. ...

  9. Django配置静态文件（CSS\js)及Django调用JS、CSS、图片等静态文件

    1 新建一项目: root@python:django-admin.py startproject csstest root@python:cd csstest root@python:ls csst ...

随机推荐

  1. https://blog.csdn.net/blmoistawinde/article/details/84329103

    背景    很多场景需要考虑数据分布的相似度/距离:比如确定一个正态分布是否能够很好的描述一个群体的身高(正态分布生成的样本分布应当与实际的抽样分布接近),或者一个分类算法是否能够很好地区分样本的特征 ...

  2. 初识Python（windows）——下载、安装、使用

    Table of Contents 1. Why is Python 1.1. Python和R 2. python的下载与安装 2.1. python的版本选择 2.2. python的下载 2.3 ...

  3. [Python3网络爬虫开发实战] 1.3.1-lxml的安装

    lxml是Python的一个解析库,支持HTML和XML的解析,支持XPath解析方式,而且解析效率非常高.本节中,我们了解一下lxml的安装方式,这主要从Windows.Linux和Mac三大平台来 ...

  4. Linux内核0.11体系结构 ——《Linux内核完全注释》笔记打卡

    0 总体介绍 一个完整的操作系统主要由4部分组成:硬件.操作系统内核.操作系统服务和用户应用程序,如图0.1所示.操作系统内核程序主要用于对硬件资源的抽象和访问调度. 图0.1 操作系统组成部分 内核 ...

  5. 19Spring返回通知&异常通知&环绕通知

    在前置通知和后置通知的基础上加上返回通知&异常通知&环绕通知 代码: package com.cn.spring.aop.impl; //加减乘除的接口类 public interfa ...

  6. loaction.reload(false)和location.reload(true) js发起请求

    loaction.reload(false)和location.reload(true)差别: loaction.reload(false) 先判断页面有没修改,有的话就从服务器下载页面,没有就直接从 ...

  7. 模板 求GCD&LCM

    求最大公倍数 int GCD(int a,int b) { ) return b; else return GCD(b,a%b); } 求最小公倍数 int LCM(int a,int b) { re ...

  8. UVa 806 四分树

    题意: 分析: 类似UVa 297, 模拟四分树四分的过程, 就是记录一个左上角, 记录宽度wideth, 然后每次w/2这样递归下去. 注意全黑是输出0, 不是输出1234. #include &l ...

  9. 一种RC滤波电路的验证

    在做电源的时候,在开关管的D极经常是出现不想看到的尖峰脉冲.以CCFL推挽式缓冲电路为准,我与一个同学杨进行了相应的验证. 其中的出来的现象和反思如下: 1,加上电阻和电容串联的滤波的确能将尖峰脉冲消 ...

  10. em的理解

    em 版本:CSS1 说明: 自己的理解: 注意地方: 浏览器默认大小为16px. 谷歌浏览器最小字体为12px. font-size;有继承性. 判断步骤: []看该元素本身有没有设置字体大小: 有 ...