概述

本案例主要是运用到了css3的animation、keyframes、transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大。

详细

首先,我们先来看看效果图哟。

一、准备工作

1、需要了解animation、keyframes、transform属性:

  • animation:是一个简写属性,用于设置六个动画属性

    • animation-name 规定需要绑定到选择器的 keyframe 名称

    • animation-duration 规定完成动画所花费的时间,以秒或毫秒计

    • animation-timing-function 规定动画的速度曲线

    • animation-delay 规定在动画开始之前的延迟

    • animation-iteration-count 规定动画应该播放的次数

    • animation-direction 规定是否应该轮流反向播放动画

  • keyframes:让开发者通过指定动画中特定时间点必须展现的关键帧样式(或者说停留点)来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理

  • transform:向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

描述 测试
none 定义不进行转换。 测试
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。  
translate(x,y) 定义 2D 转换。 测试
translate3d(x,y,z) 定义 3D 转换。  
translateX(x) 定义转换,只是用 X 轴的值。 测试
translateY(y) 定义转换,只是用 Y 轴的值。 测试
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。  
scale(x,y) 定义 2D 缩放转换。 测试
scale3d(x,y,z) 定义 3D 缩放转换。  
scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
rotate(angle) 定义 2D 旋转,在参数中规定角度。 测试
rotate3d(x,y,z,angle) 定义 3D 旋转。  
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 测试
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 测试
perspective(n) 为 3D 转换元素定义透视视图。 测试

2、本例子要规划好各个环节动画出场时间顺序

二、例子分析

1、部分html代码:

<div class="w-t">
<div class="w-t-m">老婆,嫁给我好吗?</div>
<img src="png/boom.png" alt="" class="boom1">
<img src="png/boom.png" alt="" class="boom2">
<img src="png/boom.png" alt="" class="boom3">
</div>
<div class="w-p">
<div class="w-m">
<img src="png/man.png" alt="">
</div>
<div class="w-w">
<img src="png/woman.png" alt="">
</div>
<div class="w-f">
<img src="png/flower.png" alt="">
</div>
</div>

2、新郎动画分析

.w-m img{
margin-right: 0;
float: right;
margin-top: 60px;
animation: toWoman 0.5s ease .5s both;
}
@keyframes toWoman{
0%{
opacity: 0;
transform: translate(-200px);
}
100%{
opacity: 1;
transform: translate(0);
}
}

3、那朵花的css

.w-f{
position: absolute;
z-index: 20;
left: 50%;
margin-left: -30px;
margin-top: 75px;
}
.w-f img{
width: 60px;
animation: show 0.4s ease 1s both;
} @keyframes show{
0%{
opacity: 0;
transform: scale(0.1,0.1);
}
100%{
opacity: 1;
transform: scale(1,1);
}
}

4、文字部分的css

.w-t-m{
position: absolute;
left: 50%;
z-index: 10;
line-height: 80px;
color: #ff720a;
letter-spacing: 5px;
opacity: 0;
animation: titleBloom 1s linear 1s both;
font-size: 26px;
margin-left: -125px;
}
@keyframes titleBloom{
0% {
transform: translate(-50px);
}
100% {
opacity: 1;
transform: translate(0);
}
}

5、文字边烟花的效果css

.w-t img{
opacity: 0;
animation: bloom 2s ease 1.2s infinite;
}
.w-t img.boom2{
float: right;
animation: bloom 2s ease 1.5s infinite;
}
.w-t img.boom3{
position: absolute;
margin-top: 40px;
animation: bloom 2s ease 1.4s infinite;
}
@keyframes bloom{
0% {
transform: scale(0,0);
}
100% {
opacity: 1;
transform: scale(1,1);
}
}

6、最后几束花的效果css

.w-fls{
width: 820px;
margin: 0 auto;
}
.w-fls img{
height: 120px;
z-index: 400;
animation: showFlows 0.4s ease 2.3s both;
}
@keyframes showFlows{
0%{
opacity: 0;
transform: translate(0,200px);
}
100%{
opacity: 1;
transform: translate(0);
}
}
.w-2{
margin-top: -130px;
padding-left: 100px;
}
.w-2 img{
animation: showFlows 0.4s ease 2.7s both;
}

三、演示效果

演示demo效果

四、文件截图以及运行操作

1、文件截图

2、运行操作:

双击index.html即可看到效果。

五、浏览器兼容性

1、目前只兼容ie10+,firefox,360浏览器等主流浏览器

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

用css3做一个求婚小动画的更多相关文章

  1. 又见angular----步一步做一个angular4小项目

    这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...

  2. Python做一个计时器的动画

    一.问题在做连连看的时候需要加一个计时器的动画,这样就完成了计时功能的设计. 二.解决主要思路: 1.先产生一个画布,用深颜色填充满. 2.产生一个新的矩阵用来覆盖画布,背景用白色,就可以渲染出来递减 ...

  3. 用 CSS3 做一个流星雨动画

    昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一.流星动画 首先创建一个 div 作为画布 <div id="stars" ...

  4. 用js+css3做一个小球投篮的动画(easing)

    <!DOCTYPE html> <html> <head> <script src="jquery-1.11.3.min.js">& ...

  5. 一步步用svg做一个声波扩散动画

    有个项目需要在某个坐标显示一个声波扩散(不知道这个表达对不对)的动画. 这种需求一般做法有几种,一种做成gif图片,然后贴上去,一种是用html+css3完成,要么就是画上去,这画又分两种,一种是Ca ...

  6. 突发奇想想学习做一个HTML5小游戏

    前言: 最近一期文化馆轮到我分享了,分享了两个,一个是关于童年教科书的回忆,一个是关于免费电子书的.最后我觉得应该会不敌web,只能说是自己在这中间回忆了一下那个只是会学习的年代,那个充满梦想的年代. ...

  7. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 使用SpannableString实现一个load小动画

    依然是github开源项目:WaitingDots 这个项目代码不多,实现的非常easy.可是非常有意思由于动画的基本元素不是画出来的,而是使用了spannableString来实现. DotsTex ...

  9. 【CSS3】横屏引导小动画

    演示地址:http://codepen.io/anon/pen/oXbXdX 主要知识点: @media all and (orientation : landscape) { /* 这是匹配横屏的状 ...

随机推荐

  1. Linux 系统分析命令图

    sar命令: 编辑 /etc/default/sysstat 设置为true sudo /etc/init.d/sysstat restart

  2. Visual GC(监控垃圾回收器)

    Java VisualVM默认没有安装Visual GC插件,需要手动安装,JDK的安装目录的bin目露下双击jvisualvm.exe,即可打开Java VisualVM,点击菜单栏 工具-> ...

  3. C语言:字符串读取流读取文件中的数据

    #include<stdio.h> int main() { //定义文件指针 FILE *f = NULL; //打开文件 f = fopen("1.txt",&qu ...

  4. sql server2005 express和Northwind数据库安装

    最近在学<C#入门经典>的数据库章节时,发现机子上既没有sql server又没书中所说的northwind数据库,想立刻运行下第一个工程DataReading都没法进行.在网上折腾后有了 ...

  5. go语言之进阶篇成员操作

    1.成员操作 示例: package main import "fmt" type Person struct { name string //名字 sex byte //性别, ...

  6. Mysql之sql语句操作

    一.数据库级别操作 1.显示数据库 1 SHOW DATABASES; 默认数据库: mysql - 用户权限相关数据 test - 用于用户测试数据 information_schema - MyS ...

  7. 倒计时实现方案总结 Timer Handler

    利用Timer实现倒计时 @BindView(R.id.send) Button send;//发送验证码 private int time = 60;//倒计时 private Timer time ...

  8. 25个精致的IPHONE 6和APPLE WATCH原型下载!

    自iPhone 6 和Apple Watch那场的发布会后,很多设计师开始创作相关的原型素材,值得感谢的是,这些作品有好多都无私分享到了网上,不仅可个人使用,也可商用.今天我们收集了从这组免费的素材中 ...

  9. JQuery缓冲加载图片插件lazyload.js的使用方法

    lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...

  10. ASP 未结束的字符串常量

    之前的电脑是XP的,前段时间公司将电脑升级到了Windows7 今天在处理一个asp项目时发现打开就报错了"未结束的字符串常量" 在网络上了解到是因为编码的问题,但我的项目文件都是 ...