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 ...
随机推荐
- 【BZOJ1934】善意的投票(网络流)
[BZOJ1934]善意的投票(网络流) 题面 Description 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己 ...
- [BZOJ3680][JSOI2004]平衡点 / 吊打XXX
BZOJ Luogu (洛谷和BZOJ上的数据范围不同,可能需要稍微调一调参数) sol 这题的参数调得我心累 模拟退火的模型可以形象地理解为:不断降温的小球在一个凹凸不平的平面上反复横跳,根据万有引 ...
- UVa11426 最大公约数之和(正版)
题面 求\(\sum_{i=1}^{n-1}\sum_{j=i+1}^{n}gcd(i, j)\) n<=4000000,数据组数T<=100 答案保证在64位带符号整数范围内(long ...
- 【xsy2140】计数
Time Limit: 1000 ms Memory Limit: 256 MB description 吐槽 所以说..组合数的题是不是都是知道大致思路但是就是不会写qwq菜醒qwq 正题 这题其实 ...
- 【noip模拟】局部最小值
TimeLimit: 1000ms MemoryLimit: 256MB Description 有一个n行m列的整数矩阵,其中1到n×m之间的每个整数恰好出现一次.如果一 ...
- linux里所有命令都不存在
打开/etc/profile ,看这个配置文件里的PATH变量,遍历这个变量里配置的多个路径,查看命令是否存在. 主要是这四个:/bin ,/usr/bin,/sbin,/usr/sbin. PATH ...
- Xamarin改变移动开发的五个理由
企业开发者不能简单的抛弃现有的桌面和Web应用,然而又不得不忙着创建各种各样的应用,没有太多的预算来开发移动版本,尤其是原生版本. 采用Xamarin,C#开发人员可以使用一份基础代码创建桌面版和移动 ...
- 杭电oj-1002-A+B Problem
Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...
- [转]【安卓笔记】AsyncTask源码剖析
[转][安卓笔记]AsyncTask源码剖析 http://blog.csdn.net/chdjj/article/details/39122547 前言: 初学AsyncTask时,就想研究下它的实 ...
- 安装Accumulo——突破自己,就是成长
前言 在我刚开始接触分布式集群的时候,是自己在几台虚拟机中手动安装的 Hadoop 和 Spark ,所以当时对 Hadoop 的配置有个简单的印象 ,但是后面发现了 Cloudera 和 Ambar ...