有时候做网页，如果都写成静态的没有动态效果，犹如一张张图片，没有视觉感受，没有达到很好的视觉效果。

其实一些简单的CSS3动画，可以增添网页的动态感，使自己设计的网页更有视觉享受。
1.图片有一定角度的旋转

代码实现：

<!DOCTYPE html>

<html>

<head>

    <title>css3 animation</title>

    <style type="text/css">

    .animation{animation: myc 3s infinite;}

        @keyframes myc{

            50%{transform:rotate(-5deg);}

        }

        @-webkit-keyframes myc{

            50%{-webkit-transform:rotate(-5deg);}

        }

        @-o-keyframes myc{

            50%{-o-transform:rotate(-5deg);}

        }

</style>

</head>

<body>

    <div class="animation">

    <img src="data:images/carton2.png"><br/>

    </div>

</body>

</html>

3.实现图片上下运动

<html>

    <style type="text/css">

    .ani{ -webkit-animation: khbtn 2s ease-in-out infinite ; animation: khbtn 2s ease-in-out infinite ; animation-fill-mode: forwards;}

@-moz-keyframes khbtn{

    0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}

    10%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);-o-transform:translateY(-6px);transform:translateY(-6px)}

    20%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}

    100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}

}

@-webkit-keyframes khbtn{

    0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}

    10%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);-o-transform:translateY(-6px);transform:translateY(-6px)}

    20%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}

    100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}

}

@keyframes khbtn{

    0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}

    10%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);-o-transform:translateY(-6px);transform:translateY(-6px)}

     20%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}

    100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}

     }

</style>

</html>

<body>

<img src="data:images/carton2.png" class="ani">

</body>

</html>

4.实现小图片的晃动，可以用在网页中含有雪花，金币等，做一些小动画

<!DOCTYPE html>

<html>

<head>

    <title>css3 animation</title>

    <style type="text/css">

.icons .ico img { -webkit-animation: iconShake 2s infinite ease-in-out; animation: iconShake 2s infinite ease-in-out;    animation-fill-mode: initial; }

.icons .ico.ic2 img { -webkit-animation-delay: .2s;animation-delay: .2s; }

.icons .ico.ic3 img { -webkit-animation-delay: .4s;animation-delay: .4s; }

.icons .ico.ic4 img { -webkit-animation-delay: .15s;animation-delay: .15s; }

.icons .ico.ic5 img { -webkit-animation-delay: .3s;animation-delay: .3s; }

.icons .ico.ic6 img { -webkit-animation-delay: .25s;animation-delay: .25s; }

.icons .ico.ic7 img { -webkit-animation-delay: .35s;animation-delay: .35s; }

@-moz-keyframes iconShake {

    0% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }

    50% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); }

    100% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }

}

@-webkit-keyframes iconShake {

    0% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }

    50% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); }

    100% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }

}

@keyframes iconShake {

    0% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }

    50% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); }

    100% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }

}

    </style>

</head>

<body>

    <div class="icons">

                <div class="ico ic1" style="opacity: 1; top: 0px;margin-left: 30px;"><img src="data:images/1.png" alt=""></div>

                <div class="ico ic2" style="opacity: 1; top: 0px;margin-left: 100px;"><img src="data:images/2.png" alt=""></div>

                <div class="ico ic3" style="opacity: 1; top: 0px;margin-left: 300px;"><img src="data:images/3.png" alt=""></div>

                <div class="ico ic4" style="opacity: 1; top: 0px;margin-left: 50px;"><img src="data:images/4.png" alt=""></div>

                <div class="ico ic5" style="opacity: 1; top: 0px;margin-left: 300px;"><img src="data:images/5.png" alt=""></div>

                <div class="ico ic6" style="opacity: 1; top: 0px;margin-left: 10px;"><img src="data:images/6.png" alt=""></div>

                <div class="ico ic7" style="opacity: 1; top: 0px;"><img src="data:images/7.png" alt=""></div>

</div>

</body>

</html>

5.大眼睛blink，blink眨

这个没有用到CSS3动画，只用到了两张图片，用绝对定位把眼睛定位好即可

<style>

.blink{position: relative;}

.eye{position: absolute;top: 35px;left: 20px;}

</style>

<div class="blink" >

<img src="data:images/carton2.png" >

<img src="data:images/blink.gif" class="eye">

</div>

6.动态的进度条和向上滚动的图片：
进度条有一个小小的gif图片

<!DOCTYPE html>

<html>

<head>

    <title>css3 animation</title>

    <style type="text/css">

.percent .pbg{ border:1px solid #f1d99b; height: 13px; position: relative; border-radius: 12px; overflow: hidden;width: 200px; }

.percent .pbg .bar{ width: 91.2%; position: absolute; height: 15px; left: -1px; top: -1px; overflow: hidden; }

.percent .bar span{ display: block; background: url(images/percent.gif) 0 center repeat-x; height: 100%; position: relative; overflow: hidden; }

.percent .bar span:after{ content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 14px; border-color: transparent #fff transparent transparent; position: absolute; right: 0; top: 0; z-index: 2; }

.percent .bar span:before{ content: ''; display: block; position: absolute; right: 0; top: 0; z-index: 1; width: 25px; height: 13px; background: url(images/bar2.png) 0 0 no-repeat; }

.percent .bar.ani span{ -webkit-animation: progressbar .8s ease-in-out; animation: progressbar .8s ease-in-out; animation-fill-mode: forwards;}

@-moz-keyframes progressbar{    0%{width:0}    100%{width:100%}}

@-webkit-keyframes progressbar{    0%{width:0}    100%{width:100%}}

@keyframes progressbar{    0%{width:0}    100%{width:100%}}

.animation-top{height: 37px;overflow: hidden;position: absolute;width: 25px;}

.img1{height: 37px; position: absolute;-webkit-animation: anim1 5s linear infinite;}

.img2{height: 37px; position: absolute; -webkit-animation: anim2 5s linear infinite;}

@keyframes anim1{

        0% {top: 37px;opacity: 1}

        50% {top: -37px;opacity: 1}

        75% {top: -37px ;opacity: 0}

        100%{top:344px;opacity: 0}

}

 @keyframes anim2{

        0% {top: -37px;opacity: 0;}

        50% {top: 37px;opacity: 0;}

        75% {top:37px ;opacity: 1;}

        100%{top:-37px;opacity: 1}

}

    </style>

</head>

<body>

<div class="percent">

    <div class="pbg">

        <div class="bar ani" style="width: 62%; opacity: 1;"><span class=""></span></div>

        </div>

    </div>

<div class="animation-top">

    <img class="img1" src="data:images/1.png"><br/>

    <img class="img2" src="data:images/2.png">

</div>

</body>

</html>

CSS3动画的语法：

div{animation:myfirst(animation-name---动画的名字),5s(animation-duration---规定动画完成一个周期所花费的秒或毫秒),linear(animation-timing-function---规定动画的速度曲线),infinite(animation-iteration-count---规定动画被播放的次数),alternate(animation-direction---动画应该轮流反向播放))

@keyframes myfirst //定义动画
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

超级简单实用的CSS3动画，增添网页效果的更多相关文章

  1. zw版_Halcon图像交换、数据格式、以及超级简单实用的DIY全内存计算.TXT

    zw版_Halcon图像交换.数据格式.以及超级简单实用的DIY全内存计算.TXT Halcon由于效率和其他原因,内部图像采用了很多自有格式,提高运行速度,但在数据交换方面非常麻烦. 特别是基于co ...

  2. 超级简单实用的前端必备技能-javascript-全屏滚动插件

      fullPage.js fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 本章内容将详细介绍Android事件的具体处理及常见事件. 主要功能 支持 ...

  3. 使用jQuery创建可删除添加行的动态表格，超级简单实用的方法

    使用jQuery动态的添加和删除表格里面的行,不多说了直接上代码. <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. css3动画图片波纹效果

    这里的图片很有特点,下面有演示图片样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 超酷震撼 HTML5/CSS3动画应用及源码

    HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3 ...

  6. CSS3动画：YouTube的红色激光进度条

    本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个. 之前一篇文章<CSS3 动画一瞥>简单介绍了CSS3动画相 ...

  7. 常用分享功能.超级简单,qq 微信 新浪微博分享

    <div id="share"> <a href="javascript:void(0)" share-type="qzone&qu ...

  8. 使用jquery封装的动画脚本（无动画、css3动画、js动画）

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  9. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  10. SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子

    今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了. 不过测试体验感觉手机上没有 jQuery ...

随机推荐

  1. 算法学习笔记【8】| 单调队列优化DP

    单调队列:就是滑动窗口,可以求出定长 RMQ,时间复杂度线性. 优化 DP 首先把dp方程写成这个样子: 或者其他运算f[i]=max(或者其他运算){f[j]+calc(i,j)}<scrip ...

  2. Unit 1 Computer hardware【石家庄铁道大学-专业英语课程复习资料】

    Unit 1 Computer hardware 1.Introduction of computer A computer is a machine that can be instructed t ...

  3. sqoop安装配置以及简单使用

    一.下载 链接:https://pan.baidu.com/s/1pc7t4e7GyDcZNJHURADE_w 提取码:420s 二.上传安装包到虚拟机的指定路径并解压 tar -zxvf ( 压缩包 ...

  4. DevSecOps 中的漏洞管理（上）

    DevSecOps意味着在DevOps交付管道把安全性包含进去.该模型尽可能早地将安全原则集成到软件开发生命周期的所有适用阶段中.下图展示了安全方面在DevOps后期阶段的集成,但DevSecOps安 ...

  5. #线段树合并、树上启发式合并#CF600E Lomsat gelral

    题目 一棵树有\(n\)个结点,每个结点都是一种颜色,每个颜色有一个编号,求树中每个子树的最多的颜色编号的和 分析1 线段树合并,记录\(w,sum\)分别表示编号和以及颜色和,当颜色和相同时两个编号 ...

  6. 准备Python环境学习OpenCV的使用

    安装venv模块,执行如下命令: sudo apt-get install python3-venv 创建venv环境,命名为images,执行如下命令: python3 -m venv images ...

  7. Lambda表达式和闭包Closure

    目录 简介 JS中的闭包 java中的闭包 深入理解lambda表达式和函数的局部变量 总结 简介 我们通常讲到闭包,一般都是指在javascript的环境中.闭包是JS中一个非常重要的也非常常用的概 ...

  8. 【Insights直播】华为帐号服务，打造全场景安全帐号体系

    在App运营过程中,如何保持用户增长和提升用户体验始终是开发者关注的问题,而作为用户使用体验感知的第一环节--帐号注册登录环节是不可忽视,且有很大提升空间的.如何提升帐号的注册登录体验?如何保证用户在 ...

  9. Jenkins首次启动慢

    场景描述启动Jenkins后,打开网站,发现一直卡在这个启动页面,慢,很慢,非常慢 解决方法 进入Jenkins的安装目录,找到"hudson.model.UpdateCenter.xml& ...

  10. 【郑州轻工业大学】HarmonyOS宠物健康系统的开发分享

    原文:https://mp.weixin.qq.com/s/upcS6PcMS7UBR5jgoP7eow,点击链接查看更多技术内容. 本期我们给大家带来的是家庭宠物健康监测系统开发者杨光的分享,希望能 ...