<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .clear{
                clear: both;
            }
            #div{
                width: 200px;
                height: 200px;
                border: 1px solid transparent;
                background-color: white;

  -------相对于原位置移动-------
                position: relative;

                -------动画：名称；完成全部运动的时间；循环播放；交互循环-------
                animation: a 10s infinite alternate;
            }

--------------------------------------------动画内容：名称所对应的div-------------------------------------------------------
            @keyframes a{

--------------------------------------------运动至0%时所产生的变化-------------------------------------------------------
                0% {
                    background-color:blueviolet ;

--------------------------------------------边框变圆角：15%-------------------------------------------------------
                    border-radius: 15%;

--------------------------------------------盒子阴影：右侧阴影大小；下侧大小；颜色-------------------------------------------------------
                    box-shadow:-10px 10px slategrey;
                    left: 0px;
                    top:80px
                }
                25% {
                    /*width: 0px;
                    height: 0px;
                    border-top: 100px solid cornflowerblue;
                    border-left: 100px solid transparent;
                    border-right: 100px solid transparent;*/
                    background-color:cornflowerblue ;
                    border-radius: 30%;
                    box-shadow:-15px 0px 3px slategrey;
                    left: 600px;
                    top:80px
                }
                50% {
                    background-color: chartreuse;
                    border-radius: 50%;
                    box-shadow: 0px -10px 3px slategrey;
                    left: 600px;
                    top: 300px;
                }
                75% {
                    background-color: orange;
                    border-radius: 30%;
                    box-shadow: 10px 0px 3px slategrey;
                    left: 0px;
                    top: 300px;
                }
                100% {
                    background-color: blueviolet;
                    border-radius: 15%;
                    box-shadow: -10px 10px slategrey;
                    left: 0px;
                    top: 80px;
                }
            }
        </style>
    </head>
    <body>
        <div id="div"></div>
    </body>
</html>

css变化代码的更多相关文章

  1. css变化代码2

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8" />   ...

  2. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  3. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  4. css初始化代码

    最近老有新项目开发,一直在找存留的CSS初始化代码,索性放到这里备份下, @charset "utf-8"; /* -------------------------------- ...

  5. 网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码

    下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大 ...

  6. CSS透明代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...

  7. 各大门户网站的css初始化代码

    腾讯QQ官网 css样式初始 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select ...

  8. CSS颜色代码 颜色值 颜色名字大全(转载)

    CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...

  9. CSS颜色代码大全

    CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...

随机推荐

  1. 一次日语翻译的Chrome插件开发经历

    序言 去年7月刚过了日语N2,想着今年考个N1,为了加深日语文化的了解,还有学习日语,平时免不了经常上日语网站. 但是毕竟水平有限,所以不免遇到不认识的单词,日语单词的一个特点就是很多单词你知道是什么 ...

  2. Attempt to invoke interface method 'boolean java.util.List.add(java.lang.Object)' on a null object reference

    尝试在一个空的对象引用上引用boolean java.util.List.add()这个方法: 错误例子: private ArrayList<String> classList; cla ...

  3. NancyFX 第三章 Web框架

    如果使用Nancy作为一个WEB框架而言,会有什么不同?实际上很多. 在使用Nancy框架为网页添加Rest节点和路由和之前的Rest框架中是相同的,这方面没有什么需要学习的了.Nancy采用一贯的处 ...

  4. angularjs 缓存详解

    一.什么是缓存 一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求. 缓存能够服务的请求越多,整体系统性能就提升得越多. 二.Angular 中的缓存 2.1 $cacheFac ...

  5. Prototype模式

    浅克隆:对值类型的成员变量进行值的复制,对引用类型的成员变量只复制引用,不复制引用的对象.深克隆:对值类型的成员变量进行值的复制,对引用类型的成员变量也进行引用对象的复制. /** * Created ...

  6. SAP OLE中常用的一些方法和属性

    1.ole中如何保存和退出. call method of sheetname = filepath # =. call method of applicationname 'quit'. 2.给sh ...

  7. IPFS的竞争对手们(一)

    IPFS的竞争对手 IPFS这个项目真的开发很慢,相比其它区块链项目,IPFS的进度可真是让小编捉急,恨铁不成钢啊.然而小编仍然对他们充满信心,来,借用一句盗梦空间里的经典台词: 既然做梦,那就做大点 ...

  8. PHP开发程序员的学习路线

    PHP开发程序员的学习路线 兄弟连PHP培训,简单为大家梳理了每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定学习成长目标. 第一阶段:基础阶段(基础PHP程序员) 重点:把LNMP搞熟 ...

  9. ASP.NET MVC编程——控制器

    每一个请求都会经过控制器处理,控制器中的每个方法被称为控制器操作,它处理具体的请求. 1操作输入参数 控制器的操作的输入参数可以是内置类型也可以是自定义类型. 2操作返回结果 结果类型 调用方法 备注 ...

  10. C语言第九次博客作业--指针

    一.PTA实验作业 题目1:两个4位正整数的后两位互换 1. 本题PTA提交列表 2. 设计思路 定义循环变量i,两个数组a[4],b[4] for i=0 to 3 a[i]*p取各个位 *p/=1 ...