超级简单实用的CSS3动画，增添网页效果

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

其实一些简单的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动画，增添网页效果的更多相关文章

zw版_Halcon图像交换、数据格式、以及超级简单实用的DIY全内存计算.TXT
zw版_Halcon图像交换.数据格式.以及超级简单实用的DIY全内存计算.TXT Halcon由于效率和其他原因,内部图像采用了很多自有格式,提高运行速度,但在数据交换方面非常麻烦. 特别是基于co ...
超级简单实用的前端必备技能-javascript-全屏滚动插件
fullPage.js fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站本章内容将详细介绍Android事件的具体处理及常见事件. 主要功能支持 ...
使用jQuery创建可删除添加行的动态表格，超级简单实用的方法
使用jQuery动态的添加和删除表格里面的行,不多说了直接上代码. <!DOCTYPE html> <html> <head> <meta charset=& ...
css3动画图片波纹效果
这里的图片很有特点,下面有演示图片样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
超酷震撼 HTML5/CSS3动画应用及源码
HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3 ...
CSS3动画：YouTube的红色激光进度条
本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个. 之前一篇文章<CSS3 动画一瞥>简单介绍了CSS3动画相 ...
常用分享功能.超级简单,qq 微信新浪微博分享
<div id="share"> <a href="javascript:void(0)" share-type="qzone&qu ...
使用jquery封装的动画脚本（无动画、css3动画、js动画）
自己封装好的showhide.js 包含无动画.css3动画.js动画包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子
今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了. 不过测试体验感觉手机上没有 jQuery ...

随机推荐

C++一些例子
虚析构 #include<iostream> class Base { public: Base() { std::cout << "base 构造" &l ...
测试开发之系统篇-Docker容器安装
前面文章我们讲到,容器是运行在宿主机上的一个进程,多个容器之间使用同一个宿主机上的操作系统内核.此处以Ubuntu20.04系统为例,介绍Docker容器引擎的安装过程. 安装安装依赖. sudo ...
从入门到精通：C++ 学习路线指南，附详细学习计划
C++是一种高级编程语言,广泛用于开发操作系统.应用程序.游戏和各种工具.如果你想学习这门语言,以下是一个适合初学者的学习路线: 第一步:学习C++基础知识在学习C++之前,你需要掌握一些基础知识, ...
解析 Go 编程语言数据类型：bool、整数、浮点数和字符串详细介绍
数据类型数据类型是编程中的重要概念.数据类型指定了变量值的大小和类型.Go是静态类型的,这意味着一旦变量类型被定义,它只能存储该类型的数据. 基本数据类型 Go 有三种基本数据类型: bool:表示 ...
网上 server2008数据库恢复方法
从网下下载文件有两个:XX_DB_log.ldf 和XX_DB.mdf 首先:文件处理:右键--属性--安全---编辑--勾选"完全控制"--确定--即可.(两个文件都是相同操作) ...
HDD与你相约深圳，一起探讨创新开发与运营增长
12月14日,HUAWEI Developer Day(以下简称HDD)将在深圳与广大开发者见面.本次HDD共设有主论坛.两个分论坛及两个闭门会议,期待各位开发者前来参加. 精彩预告 01·主论坛在 ...
HarmonyOS振动效果开发指导
Vibrator开发概述振动器模块服务最大化开放硬工最新马达器件能力,通过拓展原生马达服务实现振动与交互融合设计,打造细腻精致的一体化振动体验和差异化体验,提升用户交互效率和易用性.提升用户体验 ...
HDC 2022 开发者主题演讲与技术分论坛干货分享（附课件）
原文:https://mp.weixin.qq.com/s/axm6HyX0PqKCKksFxIfehg,点击链接查看更多技术内容. 11月4日-11月6日,HDC 2022在东莞成功举办,这是 ...
RestfulApi 学习笔记——分页和排序（六）
前言分页和排序时一些非常常规的操作,同样也有一些我们注意的点. 正文分页先来谈及分页. 看下前端传递的参数. public class EmployeeDtoParameters { priva ...
http json请求工具类
import java.io.InputStream; import java.net.URL; import java.net.URLConnection; import java.util.Sca ...

超级简单实用的CSS3动画，增添网页效果

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

随机推荐

热门专题