这几天公司需要更新一个移动端web的页面，因为任务简单，就交给作为菜鸟新人的我来做。第一次接触css还是在14年刚上大一的时候跟着html一起学习的，之后就再也没有接触过。所以只好一边学习，一边完成任务(⊙﹏⊙)b

结构：java web项目中的WebContent目录下创建名为“main”的文件夹，再在文件夹里创建两个子文件夹，css（存放css文件），img（存放图片），至于html文件就放在main文件夹里。

在html文件中，不要忘记了在<head>...</head>中加入<link rel="stylesheet" href="main/css/test.css" type="text/css">,否则css样式加载不出来的。

 

css中的整体布局没劲写，就讲讲动画的设置　

.logo{

		            position: absolute;

			    width: 86%;

			    left: 6%;

			    height: 33%;

			    z-index: 3;

			    top: 50%;

			    background: url(../img/test.png) no-repeat top center;

			    background-size: contain;

			}

			section.active .logo{

				animation: bounceInUp .7s ease 0s normal both;

				-moz-animation: bounceInUp .7s ease 0s normal both;

				-webkit-animation: bounceInUp .7s ease 0s  normal both;

				-o-animation:  bounceInUp .7s ease 0s normal both;

			}

			@keyframes bounceInUp

			{

			0% {top: -30%;}

			40%{top: 55%;}

			60%{top: 30%;}

			80%{top: 45%;}

			100% {top: 50%;}

			}

			@-webkit-keyframes bounceInUp  /* Safari 鍜� Chrome */

			{

			0% {top: -30%;}

			40%{top: 55%;}

			60%{top: 30%;}

			80%{top: 45%;}

			100% {top: 50%;}

			}

			@-moz-keyframes bounceInUp /* Firefox */

			{

			0% {top: -30%;}

			40%{top: 55%;}

			60%{top: 30%;}

			80%{top: 45%;}

			100% {top: 50%;}

			}

			@-o-keyframes bounceInUp /* bounceInUp */

			{

			0% {top: -30%;}

			40%{top: 55%;}

			60%{top: 30%;}

			80%{top: 45%;}

			100% {top: 50%;}

			}

　　

　.logo{...}包含了全部某一个图片的相关的css样式，

　　　　position属性用于规定元素的定位类型，absolute值为生成绝对定位的元素;

　　　　width,height是设置图片的宽高，在这里需要注意，当没有为图片设置宽高的话，图片自己是不会撑开元素的；

　　　　left（/right）用于指定图片与左边框（/右边框）的。

　　　　z-index用于指定图片层叠的顺序，后边的值越大，图片就在最前面显示（即不会被其他图片覆盖在上面）；

　　　　top指定图片距离上边框的距离；

　　　　background:url(../img/2.png);指定使用的图片的路径

　　　　background-repeat:属性表示是否让图片重复，一般情况下是默认为“no-repeat”即不重复

　　　　background-size属性设置图片背景的大小尺寸

　　　　在section.active.logo{...}中的四句就是对图片动画的设定，在这里我们需要对动画animation属性的语法做一定的了解：

        animation:   name    duration    timing-function     delay    iteration-count    direction    fill-mode     play-state;
其相应的作用是：
　　　　动画(声明) :   动画的名称   动画完成时间    运动路径   延迟时间   播放次数   是否逆向播放   动画不播放时要用到的元素样式   指定动画是否正在运行或暂停
     此时会有人说为什么相同的一句语法要重复四次？因为有些浏览器不支持keyframes规则，所以要用相应的浏览器中的支持替代，所以
    @keyframes bounceInUp{...}  
    @-webkit-keyframes bounceInUp{...} 
    @-moz-keyframes bounceInUp{...} 
    @-o-keyframes bounceInUp{...}
    这四条语句块中的内容也是完全相同，其中的0%{}，40%{}，60%{}，80%{}，100%{}指定图片的动画在完成到整体动画的百分比进度时的位置所在，因为我使用的是bounceInUp动画，即从上往下进入，所以其中用top指定图片的位置

最后在html中调用外部css样式语句，在<body>...</body>中添加<div class="logo"></div>即可调用动画

css简单动画的更多相关文章

  1. css简单动画（transition属性）

    一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性:transition-property     过渡效果的 CSS 属性的名称(height ...

  2. jquery添加光棒效果的各种方式以及简单动画复杂动画

    过滤器.绑定事件.动画   一.基本过滤器 语法 描述 返回值 :first 选取第一个元素 单个元素 :last 选取最后一个元素 单个元素 :not(selector) 选取去除所有与给定选择器匹 ...

  3. Effeckt.css项目：CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...

  4. jQuery中自定义简单动画的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. JQuery 基本使用、操作样式、简单动画

    JQ与JS JQ是JS写的插件库,就是一个JS文件 凡是用JQ能实现的,JS都能实现,JS能实现的,JQ不一定能实现 引入 BootCDN:https://www.bootcdn.cn/jquery/ ...

  6. 有趣的css—简单的下雨效果2.0版

    简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...

  7. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  8. UIView简单动画

    UIView动态实现的效果有以下几种: 1.动态改变frame 2.动态改变color 3.动态改变alpha 4.动态改变bounds 首先,我们先看几种BasicView动画 #pragma ma ...

  9. IOS 简单动画 首尾式动画

    首尾式动画 首尾式动画即通过实现控件由初始状态到结束状态的过程.(主要表现在控件的Frame 透明度 ) // // ViewController.m // CX 简单动画 // // Created ...

随机推荐

  1. HAOI2006受欢迎的牛——缩点

    题目:http://poj.org/problem?id=2186 本题是缩点模板题,将强连通分量缩成一个点,从而形成一个有向无环图,当仅有一个出度为0的点时答案即此点的大小,否则无解. 代码如下: ...

  2. poj3585树最大流——换根法

    题目:http://poj.org/problem?id=3585 二次扫描与换根法,一次dfs求出以某个节点为根的相关值,再dfs遍历一遍树,根据之前的值换根取最大值为答案. 代码如下: #incl ...

  3. poj2182Lost Cows——树状数组快速查找

    题目:http://poj.org/problem?id=2182 从后往前确定,自己位置之前没有被确定的且比自己编号小的个数+1即为自己的编号: 利用树状数组快速查找,可另外开一个b数组,角标为编号 ...

  4. 创建自己的YUM仓库

    1. 首先,假定我们应用的名字叫helloworld(可以参考简单 RPM 包制作来创建两个版本helloworld安装RPM包,helloworld-1.0.0-1.el6.x86_64.rpm和h ...

  5. C#支持从自定义日期时间格式到DateTime类型

            /// <summary>         ///         /// </summary>         /// <param name=&quo ...

  6. alter table *** add constraint *** 用法---约束

    1.主键约束:要对一个列加主键约束的话,这列就必须要满足的条件就是分空因为主键约束:就是对一个列进行了约束,约束为(非空.不重复)以下是代码   要对一个列加主键,列名为id,表名为emp 格式为:a ...

  7. zoom在清除浮动中的利用

    zoom 是个困惑了好久的元素,今天对它有了个初步的认识 zoom , ie 的专属属性,在其他浏览器中不起作用,它的原本功能是设置或检测对象的缩放比例(只在ie下起作用) 比如   <div ...

  8. Divide Two Integers-不用'/' '*' '%'操作实现整数的除法

    题目描述: 不用 '*' '/' 和 '%' 运算实现两个整数的除法 题目来源:http://oj.leetcode.com/problems/divide-two-integers/ 题目分析: 例 ...

  9. gSoap使用入门（2）----自定义接口头文件

    摘自:http://blog.csdn.net/zhuzhihai1988/article/details/8131556 接口头文件的格式在向导中没有看到明确的说明性的内容,但通过看开发包中示例程序 ...

  10. 【机器学习】迭代决策树GBRT（渐进梯度回归树）

    一.决策树模型组合 单决策树C4.5由于功能太简单,并且非常容易出现过拟合的现象,于是引申出了许多变种决策树,就是将单决策树进行模型组合,形成多决策树,比较典型的就是迭代决策树GBRT和随机森林RF. ...