css变化代码
<!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变化代码的更多相关文章
- css变化代码2
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> ...
- web前端学习笔记(CSS变化宽度布局)
一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...
- 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码
1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...
- css初始化代码
最近老有新项目开发,一直在找存留的CSS初始化代码,索性放到这里备份下, @charset "utf-8"; /* -------------------------------- ...
- 网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码
下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大 ...
- CSS透明代码
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...
- 各大门户网站的css初始化代码
腾讯QQ官网 css样式初始 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select ...
- CSS颜色代码 颜色值 颜色名字大全(转载)
CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...
- CSS颜色代码大全
CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...
随机推荐
- [SDOI2010]粟粟的书架
题目大意: 网址:https://daniu.luogu.org/problemnew/show/2468 大意:本题有两问: [1] 给定一个\(R*C\)的带权矩阵,询问\(2×10^5\)次在一 ...
- 'net’ 不是内部命令或外部命令,也不是可运行的程序或批处理文件
我的电脑-->属性-->高级-->环境变量 path的变量值新加: %SystemRoot%\system32 修改完成后,需要重新打开cmd命令行,否则不会生效的.
- Docker下redis的主从、持久化配置
Docker下redis的主从.持久化配置 redis是k-v型nosql数据库,支持字符串(string).列表(list).集合(set).散列(hash).有序集合(zset:形如member: ...
- windows下编译caffe报错:error MSB4062: 未能从程序集 E:\NugetPackages\OpenCV.2.4.10\......的解决办法
参考博客:http://blog.csdn.net/u013277656/article/details/75040459 在windows上编译caffe时,用vs打开后会自动加载还原NugetPa ...
- eclipse的常用快捷键和一些基本设置!!!
对于一些比较繁琐简单的代码没必要天天敲,为了提高效率,还是需要使用一些快捷键的:下面就说了一些比较基本的. alt+shift+s+c 无参构造器 alt+shift+s+O 有参构造器 ...
- vc的环境变量配置和缺少mspdb60.dll的解决方法
vc的编译器是cl.exe,我们如果在vc中编译就不用配置环境,但是如果要在任何位置用命令提示符打开编译器cl.exe来编译程序,那么就要配置环境了. 下面我就讲讲vc的环境变量配置和缺少mspdb6 ...
- 简述TCP的三次握手过程
一.TCP报文格式 TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷本.下面是TCP报文格式图: 图1 TCP报文格式 上图中有几个字段需要重点介绍下: ...
- Spring data Redis
http://www.cnblogs.com/tankaixiong/p/3660075.html http://www.aboutyun.com/thread-20755-1-1.html
- linux下Tomcat 安装后执行startup.sh,出现– Cannot find …bin/catalina.sh
linux下Tomcat 安装后执行startup.sh,出现– Cannot find …bin/catalina.sh 是因为权限不够,执行以下命令就可以: chmod +x startup.sh ...
- 剑指Offer-链表中环的入口结点
package LinkedList; import java.util.HashSet; /** * 链表中环的入口结点 * 一个链表中包含环,请找出该链表的环的入口结点. */ public cl ...