<!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. SpringBoot集成Shiro并用MongoDB做Session存储

    之前项目鉴权一直使用的Shiro,那是在Spring MVC里面使用的比较多,而且都是用XML来配置,用Shiro来做权限控制相对比较简单而且成熟,而且我一直都把Shiro的session放在mong ...

  2. [cogs2701]动态树

    题面戳我 sol 比较裸啊. 注意操作顺序就行了. code #include<cstdio> #include<algorithm> using namespace std; ...

  3. Java学习第一周

    第一周学习了JDK的安装和环境的配置,初步了解了Java与C的不同之处,学习了Java的变量.基本数据类型.以及面向对象的基础.并且自行完成了一些简单Java程序的编写. (1)学习了为什么使用抽象类 ...

  4. 微信公众号接口配置验证URL

    /** * 审核填写的URL */ public function checkUrl(){ //获得参数 signature nonce token timestamp echostr $nonce ...

  5. JAVA线程sleep和wait方法区别

    一. sleep 是线程类(Thread)的方法,导致此线程暂停执行指定时间,给执行机会给其他线程,但是监控状态依然保持,到时后会自动恢复,调用sleep 不会释放对象锁.由于没有释放对象锁,所以不能 ...

  6. Asp.Net Boilerplate Project (ABP) 视频教程

    转自youtube:https://www.youtube.com/playlist?list=PLlu_PkRHZce-EtuVO1zVQpNgrB7Hiu1vu 虽然全部都没有声音,但看操作还是可 ...

  7. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  8. git远程提交失败

    同步仓库并解决403报错 这时候对本地仓库和github进行同步 # git push -u origin master error: The requested URL returned error ...

  9. PHP面试和PHP开发者都应掌握的10个问题

    PHP面试和PHP开发者都应掌握的10个问题 问题 :1 MySQL里的存储引擎有什么不同,哪一个是默认的? 答案: 1 我们可以一下存储引擎: 1. MyISAM(MySQL的默认引擎. 每个MyI ...

  10. Netty实现客户端和服务端通信简单例子

    Netty是建立在NIO基础之上,Netty在NIO之上又提供了更高层次的抽象. 在Netty里面,Accept连接可以使用单独的线程池去处理,读写操作又是另外的线程池来处理. Accept连接和读写 ...