超级简单实用的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 ...

随机推荐

第十三届蓝桥杯大赛软件赛省赛【Java 大学B 组】试题D: 最少刷题数
1 import java.util.ArrayList; 2 import java.util.Scanner; 3 4 public class Main { 5 public static vo ...
C#第一个helloworld程序
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 usin ...
#dp，排列#LOJ 2743「JOI Open 2016」摩天大楼
题目将互不相同的 \(n\) 个数重排,使得相邻两数差的总和不超过 \(L\) 的有多少种方式. \(n\leq 100,L\leq 1000\) 分析对于排列的问题,有一种很妙的方法就是从小到大 ...
#杜教筛，欧拉函数,整除分块#HDU 6683 Rikka with Geometric Sequen
题目由\(1,2,\dots,n-1,n\)组成的序列中有多少个子序列是等比数列\((n\leq 5*10^{17})\) 分析分类讨论,先设公比为\(q=\frac{i}{j}[gcd(i,j) ...
#树状数组，哈希#洛谷 6687 论如何玩转 Excel 表格
题目分析首先一列的数不会发生变化,只是交换列, 并且交换列的时候奇数列变成偶数列取反, 偶数列变成奇数列取反,考虑直接将偶数列全部取反, 那只需要交换列就可以了,奇数列交换到偶数列会取反, 奇数列 ...
Python 安装与快速入门
Python安装许多PC和Mac已经预装了Python. 要检查在Windows PC上是否安装了Python,请在开始菜单中搜索Python,或在命令行(cmd.exe)上运行以下命令: C:\U ...
openGauss Cluster Manager RTO Test
一.环境介绍软件环境类别版本下载链接备注 OS openEuler 20.03 (LTS) https://repo.openeuler.org/openEuler-20.03-LTS/IS ...
Ansible 学习笔记 - 批量巡检站点 URL 状态
前言不拖泥带水,不东拉西扯. 速战速决,五分钟学到一个工作用得上的技巧. 通过一个个具体的实战案例,来生动演示 Ansible 的用法. 需求我需要定期巡检或定时监控我公司的所有站点的首页的可用性 ...
C/C++常考习题
1.什么是虚函数?什么是纯虚函数? 虚函数:允许被其子类重新定义的成员函数. 虚函数的声明:virtual returntype func(parameter);引入虚函数的目的是为了动态绑定: 纯虚 ...
IaC：实现持续交付和 DevOps 自动化的关键
基础架构即代码(IaC)和 CI/CD 流水线最初似乎并不匹配.因为它们代表了两种不同的流程.IaC 主要关注基础设施的配置和开发,而 CI/CD 则围绕软件开发.测试和部署. 然而,将 IaC 集成 ...

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

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

随机推荐

热门专题