<!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. 【NOIP2013】华容道（最短路）

    题目戳我 懒得粘贴题目了..就这要凑合一下吧... 题解 反正棋盘的状态不会变的... 所以,预处理一下??? 恩,如果一个棋子要移动到某个目标位置的话, 可以看成只有空格和这个子要动呀(其他的有区别 ...

  2. shell 脚本下执行Mongodb命令

    最近项目中搭建了两台mongodb的服务器,由于服务器只有两台的情况下,目前只是搭建了主从模式架构(官方目前并不推荐主从模式),缺点就是故障转移不变等等原因,而是推荐副本集模式(这里就不多说了)... ...

  3. Zabbix 微信报警Python版（带监控项波动图片）

    #!/usr/bin/python # -*- coding: UTF- -*- #Function: 微信报警python版(带波动图) #Environment: python import ur ...

  4. 深入java虚拟机学习 -- 类的加载机制(三)

    类的初始化时机 在上篇文章中讲到了类的六种主动使用方式,反射是其中的一种(Class.forName("com.jack.test")),这里需要注意一点:当调用ClasLoade ...

  5. windows下编译caffe报错：error MSB4062: 未能从程序集 E:\NugetPackages\OpenCV.2.4.10\......的解决办法

    参考博客:http://blog.csdn.net/u013277656/article/details/75040459 在windows上编译caffe时,用vs打开后会自动加载还原NugetPa ...

  6. Java爬取 百度图片Google图片Bing图片

    先看看抓取的结果. 8个Java类: Startup.java - main函数 ImageCrawler.java - Crawler基类 BaiduImageCrawler.java - 百度图片 ...

  7. 1-2 maven学习笔记(7-8章)

    一,生命周期和插件 1.除了坐标.依赖和仓库之外,maven的另外两个核心概念就是声明周期和插件. 生命周期和插件协同工作,密不可分. 清理 初始化 编译 测试 打包 集成测试 验证 部署 站点生成 ...

  8. 第八届蓝桥杯B组java第四题

    标题:取数位 求1个整数的第k位数字有很多种方法.以下的方法就是一种.对于题目中的测试数据,应该打印5.请仔细分析源码,并补充划线部分所缺少的代码.注意:只提交缺失的代码,不要填写任何已有内容或说明性 ...

  9. 排序算法Java实现（归并排序）

    算法描述:对于给定的一组记录,首先将每两个相邻的长度为1的子序列进行归并,得到 n/2(向上取整)个长度为2或1的有序子序列,再将其两两归并,反复执行此过程,直到得到一个有序序列. package s ...

  10. 【Python】 魔法方法

    魔法方法 这个名字真的很中二有没有 = =(或者说翻译气息太浓了,作为一个学外语的看到这种真是想吐槽的不行..) 从形式上来说,在方法的名字前后个加上两条下划线的就是魔法方法了 .从功能上说,所有魔法 ...