<!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. 【洛谷3047】[USACO12FEB]附近的牛Nearby Cows

    题面 题目描述 Farmer John has noticed that his cows often move between nearby fields. Taking this into acc ...

  2. 【Webpack的使用指南 01】Webpack入门

    使用Webpack有一段时间了,但是感觉之前学的用的都比较零散,所以在这里整理一下Webpack的使用知识,从入门到进阶. 创建项目 首先创建最简单的一个项目 npm init 得到以下项目结构: 安 ...

  3. C# 委托Delegate的使用 笔记

    使用delegate总是一头雾水,记录一下笔记,备忘. 主要用于线程间操作UI上的控件,以便使用.或者是大家统一操作入口使用. using System.Windows.Forms; namespac ...

  4. javaweb 关于页面获取数据

    EL(Excepress Language表达式语言) 1.....所有的EL都是以$"{"开始,以"}"结尾的.例:${sessionScope.user.s ...

  5. 常见排序算法及Java实现

    先上个总图↓: ①.直接插入排序 插入排序(Insertion Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并 ...

  6. [.Net Core] 在 Mvc 中简单使用日志组件

    在 Mvc 中简单使用日志组件 基于 .Net Core 2.0,本文只是蜻蜓点水,并非深入浅出. 目录 使用内置的日志组件 简单过渡到第三方组件 - NLog 使用内置的日志 下面使用控制器 Hom ...

  7. cxGrid_Q31584 cxgrid 拖放移动记录

    cxgrid 拖放移动记录,cxgrid 拖放,cxgrid 拖动记录,cxgrid 鼠标拖动记录 这是cxgrid开发公司回复客户时所发送的源码项目,用于实现鼠标拖动记录,改变记录在表格中的位置,所 ...

  8. 初尝Eclipse

    一.选择开发工具 1.Eclipse和JDK 我所选用的是Eclipse开发工具,此工具可以用来编译JAVA语言,但windows系统没有内置的JAVA运行环境,所以需要下载JDK,用来配置JAVA的 ...

  9. es6 Generator生成器函数

    生成器函数使用function*声明. 在生成器函数内部,有一种类似return的语法:关键字yield.二者的区别是,普通函数只可以return一次,而生成器函数可以yield多次(当然也可以只yi ...

  10. JS基础三

    1.delete删除对对象的属性和方法的定义.强制解除对它的引用,将其设置为 undefined delete 运算符不能删除开发者未定义的属性和方法. 2.void 运算符对任何值返回 undefi ...