html图片动态效果

html5怎么添加图片动画效果
千次阅读

2021-06-11 05:13:50

html5添加图片动画效果的方法：1、利用css3 animation的steps实现spirit精灵动画；2、利用html5 canvas实现gif图片。

本教程操作环境：windows7系统、html5&&css3版，DELL G3电脑。

html5添加图片动画效果的方法：

方法一：利用css3 animation的steps实现spirit精灵动画；

在应用 CSS3 渐变/动画时，有个控制时间的属性。它的取值中除了常用到的三次贝塞尔曲线以外，还有个让人比较困惑的 steps() 函数。

steps() 第一个参数 number 为指定的间隔数(必须是正整数)，即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

那么有了这个steps()，我们就可以实现web中常见的Sprite 精灵动画了，见demo：

.bird{background: url(bird.png);width: 140px;height:85px;animation: bird 2s steps(8) infinite; }

@keyframes bird{

from {

background-position: 0 0;

}

to {

background-position: -800% 0px;

}

}

方法二：利用html5 canvas实现gif图片；

利用canvas的drawImage把含有帧的图片加载到canvas中去，再结合js实现动画，见demo：
canvas帧--实现动画
*{padding:0;margin:0;}

canvas{display:block;background:white}

var imgPic = new Image();

imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png';

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d');

imgPic.onload = function () {

drawImg()

}

var i = 0;

var lastTime = new Date().getTime();

var delatime;

var timer = 0;

function drawImg() {

window.requestAnimationFrame(drawImg);

var now = new Date().getTime();

delatime = now - lastTime;

lastTime = now;

timer += delatime;

if (timer > 200) {

i++;

if (i > 7) i = 0;

timer = 0

}

console.log(delatime)

ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);

}

更多相关内容
js浮动图片的动态效果
2020-12-12 13:39:32

代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ...浮动图片</title>[removed]var step = 1; // 移动的像素var y = -1; // 垂直移动的方向，-1表示向上，1表示向下var x =

收起
html动态翻页效果
2017-05-24 15:18:48

html动态翻页效果，总结了很多

收起
用CSS3实现图片动态效果
2021-06-11 00:30:58

页面效果展示效果图片展示如图片所示(这里以网上书城系统为例)，当鼠标滑过书本(中间书)时，书的图片放大，并且会从左边滑过标签显示书目的价格，简介，作者等信息。当鼠标移开就恢复原状。(如图，左右两边的为初始...

一.用CSS3的好处

1.使用简单，易于学习

2.性能相对优化

二.学习前需要了解的知识

html5基本语法

css3基本用法

三.页面效果展示

效果图片展示

如图片所示(这里以网上书城系统为例)，当鼠标滑过书本(中间书)时，书的图片放大，并且会从左边滑过标签显示书目的价格，简介，作者等信息。当鼠标移开就恢复原状。(如图，左右两边的为初始状态，中间的为鼠标滑过的状态)

四.主要内容

1.掌握figure以及figcaption的基本用法

2.熟练掌握transform的基本属性及其用法

3.通过transition和transform配合制作简单的动画

五.属性及其代码介绍

(1)figure和figcaption(HTML)

figure标签：用于规定独立的内容，好比一个容器，用来存放图像，图表，照片等

figcaption标签：和figure一起使用，主要是用来定义figure标签的标题。

(2)transform和transition(CSS属性)

transform：用于元素的变形处理(例如：放大，缩小，旋转等)原理：通过改变元素的位置参数来实现元素的变形。

transition：用于元素过渡动画处理。(通过参数设置控制动画时间，延迟等)

HTML页面：

HTML的基本部署在此不多讲。

如果想要使得页面分布合理些可以建立table标签，将页面分为几个模块，每个模块存放一个元素(这里以书本代替)在此直接编写figure代码。

在table的子标签
中创建figure标签，给figure一个class="test1" 创建figcaption，用于存放图片要用的标签信息。(以下用我的工程作为例子)
(图片地址：如果用DW编辑器建议直接插入图片，如果是myeclipse就得把图片放到工程目录下输入地址导入)

售价：￥10

作者

简介

接下来写CSS 重点！

建立公共类

公共类属性

(以上属性根据我的页面来设置，可以参照，根据实际情况更改)

标签移动起始位置属性

对P标签进行设置，通过transform来实现P标签的动画(P标签从屏幕的左边-180px的位置开始移入(-代表左))

标签终止位置

此代码代表：hover鼠标经过实现动画。(标签移动到0px处，及由-180px到0px)

动画移动时间

标签从-180px滑到0px的时间延迟

图片放大还原

接下来最后一步，实现图片的放大还原，给img设置属性，当hover时，调用transform：scale(1.5，1.5)，表示图片的长宽扩大1.5倍。(根据实际调整)

六.总结

通过此篇教程，可以学习到用单纯的CSS3实现图片的放大缩小，标签的移动。如果用JS去实现也可以，但是代码量更大，设置更复杂。用此种方法更为简便。同时还可以更改transform属性，放大缩小是通过scale来实现，也可以用rotate实现当鼠标经过实现图片的旋转等，做出更绚丽的效果。

收起

展开全文
HTML5动态效果制作方法整理
2021-02-25 21:46:41

随着时代的发展和进步，越来越多的开发者开始在前端界面中加入动态效果。那么我们今天就一起来整理和分享一下前端动态效果的制作方法，并对其中的Canvas进行一下简单的讲解。我们首先先来简单看一下，动态效果的制作...

收起
CSS3实现的图片动态交互效果
千次阅读 2021-06-11 02:44:56

CSS3实现的图片动态交互效果_网页代码站(www.webdm.cn)body {background: #cde;}.view {width: 250px;height: 167px;border: 10px solid #fff;overflow: hidden;position: relative;text-align: center;cursor: ...

CSS3实现的图片动态交互效果_网页代码站(www.webdm.cn)
body {

background: #cde;

}

.view {

width: 250px;

height: 167px;

border: 10px solid #fff;

overflow: hidden;

position: relative;

text-align: center;

cursor: default;

background: #fff;

border-radius: 5px;

margin: 20px auto;

box-shadow:0 1px 0 0 #FFFFFF, 0 2px 0 0 #CCCCCC, 0 3px 0 0 #FFFFFF, 0 4px 0 0 #CCCCCC,0 5px 0 0 #fff,0 6px 0 0 #CCCCCC;

}

.view .mask, .view .content {

width: 250px;

height: 167px;

position: absolute;

overflow: hidden;

top: 0;

left: 0

}

.view img {

display: block;

position: relative

}

.view h2 {

text-transform: uppercase;

font-family:'mouse deco', helvetica, arial, sans-serif;

color: #fff;

text-align: center;

position: relative;

font-size: 18px;

padding: 5px;

background: rgba(0, 0, 0, 0.8);

margin: 20px 0 0 0

}

.view p {

font-family: Georgia, serif;

font-style: italic;

font-size: 12px;

position: relative;

color: #fff;

padding: 7px 7px 8px;

text-align: center

}

.view a.info {

display: inline-block;

text-decoration: none;

padding: 3px 9px;

background: #000;

color: #fff;

text-transform: uppercase;

box-shadow: 0 0 1px #000

}

.view a.info:hover {

box-shadow: 0 0 5px #000

}

.view-tenth img {

-webkit-transform: scaleY(1);

-moz-transform: scaleY(1);

-o-transform: scaleY(1);

-ms-transform: scaleY(1);

transform: scaleY(1);

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out;

-ms-transition: all 0.7s ease-in-out;

transition: all 0.7s ease-in-out;

}

.view-tenth .mask {

background-color: rgba(218, 205, 201, 0.5);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

}

.view-tenth h2 {

border-bottom: 1px solid rgba(0, 0, 0, 0.3);

background: transparent;

margin: 20px 5px 0px 5px;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

color: #333;

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

}

.view-tenth p {

background:transparent;

color: #333;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

}

.view-tenth a.info {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

.view-tenth:hover img {

-webkit-transform: scale(10);

-moz-transform: scale(10);

-o-transform: scale(10);

-ms-transform: scale(10);

transform: scale(10);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

}

.view-tenth:hover .mask {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

}

.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

}

zaole.net

源码分享

开源源代码分享

从这里开始

网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！

收起

展开全文
html5 立体式动画图片切换banner效果
2020-06-09 13:56:41

一款js+html5实现的动态焦点图切换效果，支持左右全屏，响应式设计，适合多种不同分辨率屏幕，立体式动画效果，用户体验较高使用方法： 1、在网页head中调用normalize.css、demo.css 以及component.css样式 2...

收起
CSS3实现图片动态渐变放大缩小的性感效果
2020-06-12 11:41:33

鼠标悬停，图片动态放大缩小。IE 下效果不佳，建议在支持CSS3浏览器的浏览，例如FF等

收起
js html5制作可控制gif动态图片暂时播放效果代码
2019-11-24 17:51:38

js html5制作可控制gif动态图片暂时播放效果代码

收起

HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️

千次阅读 2021-09-10 20:44:33

???? 作者主页：Java李杨勇 ...效果演示：文末获取源码代码目录：主要代码实现： CSS样式： body, figure, figcaption, img, h2, p { padding: 0; margin: 0; } body { width: 1

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

body,
figure,
figcaption,
img,
h2,
p {
    padding: 0;
    margin: 0;
}

body {
    width: 100%;
}

figure {
    position: relative;
    float: left;
    overflow: hidden;
    height: 350px;
    width: 33.33%;
}

figcaption {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-family: "å¾®è½¯é›…é»‘";
}

figure img {
    opacity: 0.8;
}

figure figcaption,
figure figcaption p,
figure img {
    transition: all 0.35s;
}

figure figcaption,
figure figcaption div {
    transition: all 0.35s;
}

figure figcaption p,
figure figcaption h2 {
    transition: all 0.35s;
}

figure:hover img {
    transform: translate(-150px, 0);
    opacity: 0.5
}

@media screen and ( max-width: 600px) {
    figure {
        width: 100%
    }
}

@media screen and (min-width: 601px) and ( max-width: 1000px) {
    figure {
        width: 50%
    }
}

@media screen and (min-width: 1001px) {
    figure {
        width: 33.33%
    }
}

.one {
    background: #f9aa0f;
}

.one figcaption {
    padding: 20px;
}

HTML代码 :

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <title></title>
    <link rel="stylesheet" href="css/css3.css" />
</head>

<body>
    <figure class="one">
        <img src="img/img01.jpg" />
        <figcaption>
            <h2>移动效果标题</h2>
            <p>移动效果一</p>
            <p>移动效果二</p>
            <p>移动效果三</p>
        </figcaption>
    </figure>
    <figure class="two">
        <img src="img/img02.jpg" />
        <figcaption>
            <h2>旋转效果标题</h2>
            <p>旋转效果</p>
            <div></div>
        </figcaption>
    </figure>
    <figure class="three">
        <img src="img/img03.jpg" />
        <figcaption>
            <h2>斜切效果标题</h2>
            <p>斜切效果</p>
        </figcaption>
    </figure>
    <figure class="four">
        <img src="img/img04.jpg" />
        <figcaption>
            <h2>缩放效果标题</h2>
            <p>缩放效果</p>
            <div></div>
        </figcaption>
    </figure>
    <figure class="five">
        <img src="img/img05.jpg" />
        <figcaption>
            <h2>缩放效果标题</h2>
            <p>缩放效果</p>
            <div><input type="button" value="button1" /></div>
        </figcaption>
    </figure>
    <figure class="six">
        <img src="img/img07.jpg" />
        <figcaption>
            <h2>缩放效果标题</h2>
            <p>缩放效果</p>
            <div class="border1"></div>
            <div class="border2"></div>
        </figcaption>
    </figure>
</body>

</html>

源码获取

大家可以点赞、收藏、关注、评论我啦、查看博主主页或下方微信公众号获取更多~！

打卡文章更新 45 / 100天

精彩推荐更新中：

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》

收起

展开全文

css 动画前端大作业

jQuery实现图片动态加载效果
2015-11-14 22:45:23

jQuery实现图片动态加载效果鼠标滚动时图片动态加载

收起
动态网页设计代码网页制作动态图片效果源代码
千次阅读 2021-06-11 02:44:59

动态网页设计需要用到什么工具？一般的用网页三剑客，dreamwear一般必用，比较好上手的，html是要懂的，css+div的标注设计也是要学习的。...各自是页面动态效果是网页的代码都在页面中，不需要执行asp,p...

收起
jquery实现鼠标滑过后动态图片提示效果实例
2020-12-12 13:11:12

本文实例讲述了jquery实现鼠标滑过后动态图片提示...jQuery图片动态信息显示幻灯效果</title> <style> .galleryContainer {width: 1024px;} .galleryImage { background-color:black; width:325px; heig

收起
css 实现图片动态效果
万次阅读 2017-05-11 20:29:10

操作流程首先确定要实现的效果设置初始表示状态动画用到的css属性 transition 属性 transition-property 规定设置过渡效果的 CSS 属性的名称。（ none 没有属性会获得过渡效果。 all 所有属性都将获得...

收起

css
html5炫酷效果图片墙
2018-11-16 23:49:26

一共支持四种图片墙，平面墙，圆球墙，桶装墙，矩阵墙，可以根据自己的要求更改图片。非常炫酷

收起
使用css3实现动态效果
2020-06-10 17:10:21

2.需要使用css3中的至少两种效果，并且用到css3的地方请注释，例如阴影效果，动画效果，2D转换，3D转换，css3过渡等等。 3.要求css样式写在head的style里，或者新建一个css文件写在里面。图片放在单独建立的文件夹下...

收起
一个带点动态效果的html5引导页代码html+css+js
2017-11-01 15:59:25

一个静态单页面，通过jquery.rotate.js实现图片旋转，animate.css实现动画效果，关于背景图片垂直居中和图片垂直居中，可以参考下

收起
javascript动态效果
2021-06-11 01:12:42

javascript如何实现动态效果现在我想要实现当鼠标的小箭头移动到网页导航条中的某个栏目的时候会自JS动态效果，参考如下：浮动图片var step = 1; // 移动的像素var y = -1; // 垂直移动的方向，-1表示向上，1表示向...

收起
自定义404动态效果html
2019-11-29 15:09:55

自定义404页面，有雪花，当前时间，浪迹天涯页面。...h5语法编写，通过js和css结合实现雪花飘落效果。图片以“浪迹天涯”现实页面不存在，有温馨提示，有返回首页按钮，可自定义跳转url。通过time.js,显示系统当前时间

收起

自定义404
HTML5动画效果的图片放大缩小特效.rar
2019-07-10 11:49:48

HTML5动画效果的图片放大缩小特效，动态的图片放大，图片缩小，CSS3内核实现的图片缩放特效，打开演示页面后，图片会向左上角收缩变小，然后再向右下角变大，动画效果也是一大亮点，很流畅。

收起
css如何让图片动起来？
2021-06-11 11:04:45

使用CSS让图片动起来需要使用transform属性，使用语法：transform:none|transform-functions;。该属性允许我们对元素进行旋转、缩放、移动或倾斜。使用CSS让图片动起来需要使用transform属性。transform 属性向元素...

收起
分享10款效果惊艳的HTML5图片特效
万次阅读 多人点赞 2018-01-22 20:34:42

在HTML5的世界里，图片特效都十分绚丽，我们在网站上也分享过很多不错的HTML5图片特效，现在我们精选10款效果惊艳的HTML5图片特效分享给大家。1、HTML5 3D正方体旋转动画很酷的3D特效之前我们分享过很多非常不错的...

收起
html5动态添加图片白色边框单击放大缩小图片.rar
2019-07-10 11:09:31

html5为图片动态添加白色边框，同时鼠标单击边框的4个角，可以放大缩小图片，在显示的过程中，图片不有一定幅度的旋转，可设置参数后，动态适时查看图片修饰的效果，动态为图片添加白色的边框，很有艺术感的图片美化...

收起
怎么制作动态图片
千次阅读 2021-06-12 16:15:33

怎么制作动态图片动态图片其实是一种.gif格式的动画文件，它是由一帧帧的静态图片组合起来的。但有些小白们不知道怎么制作动态图片，下面教大家利用Adobe Photoshop制作简单的动态图片，一起来看看吧。一、利用Adobe...

收起
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2020-12-13 22:46:53

又一款网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的HTML5技术编写而成，演示页面中一共调用了7张图片，为了演示方便，这里让其随滚动条的滚动自动循环显示，这样大家更能清楚的看明白瀑布流的效果。...

收起
HTML 图片鼠标悬停动态效果
万次阅读 2016-02-17 17:01:02

法一：在head中添加： ...图片标签： id = "imgTest" src ="imgs/icon.jpg"/> 法二： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

收起
HTML图片动画特效
千次阅读 2019-10-16 11:05:48

<!DOCTYPE html> <html> <head> ...meta charset="UTF-8">...图片动画</title> <style type="text/css"> html,body{ height: 100%;/*高度使用百分比,body的高度是100...

收起
FrontPage制作网页的动态效果(上)
2021-06-13 00:44:52

在网页的页面中添加一定的动态效果会给网页增加许多的色彩。现在网页的动态效果制作的方法很多，有些需要你学习一些相关的语言。FrontPage是网页制作工具中的一个多功能的工具，它为我们提供了全中文的界面，其中的...

收起
CSS3多种图片切换转场显示动画效果.rar
2019-07-10 10:54:06

CSS3多种图片切换转场显示动画效果，这实际上是一个网页焦点图特效，但这个焦点图的图片切换效果几乎不重复，每切换一次，切换的过渡转场特效都不一样，有淡入淡出渐变，有旋转渐变，有向上向下滑出，有重叠显示，有...

收起

js浮动图片的动态效果

html动态翻页效果

用CSS3实现图片动态效果

HTML5动态效果制作方法整理

CSS3实现的图片动态交互效果

zaole.net

源码分享

html5 立体式动画图片切换banner效果

CSS3实现图片动态渐变放大缩小的性感效果

js html5制作可控制gif动态图片暂时播放效果代码

HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️

代码目录：

主要代码实现：

源码获取

jQuery实现图片动态加载效果

动态网页设计代码网页制作动态图片效果源代码

jquery实现鼠标滑过后动态图片提示效果实例

css 实现图片动态效果

html5炫酷效果图片墙

使用css3实现动态效果

一个带点动态效果的html5引导页代码html+css+js

javascript动态效果

自定义404动态效果html

HTML5动画效果的图片放大缩小特效.rar

css如何让图片动起来？

分享10款效果惊艳的HTML5图片特效

html5动态添加图片白色边框单击放大缩小图片.rar

怎么制作动态图片

HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影

HTML 图片鼠标悬停动态效果

HTML图片动画特效

FrontPage制作网页的动态效果(上)

CSS3多种图片切换转场显示动画效果.rar

html图片动态效果

js浮动图片的动态效果

html动态翻页效果

用CSS3实现图片动态效果

HTML5动态效果制作方法整理

CSS3实现的图片动态交互效果

zaole.net

源码分享

html5 立体式动画图片切换banner效果

CSS3实现图片动态渐变放大缩小的性感效果

js html5制作可控制gif动态图片暂时播放效果代码

HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️

代码目录：

主要代码实现：

源码获取

jQuery实现图片动态加载效果

动态网页设计代码 网页制作动态图片效果源代码

jquery实现鼠标滑过后动态图片提示效果实例

css 实现图片动态效果

html5炫酷效果图片墙

使用css3实现动态效果

一个带点动态效果的html5引导页代码html+css+js

javascript动态效果

自定义404动态效果html

HTML5动画效果的图片放大缩小特效.rar

css如何让图片动起来？

分享10款效果惊艳的HTML5图片特效

html5动态添加图片白色边框单击放大缩小图片.rar

怎么制作动态图片

HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影

HTML 图片鼠标悬停动态效果

HTML图片动画特效

FrontPage制作网页的动态效果(上)

CSS3多种图片切换转场显示动画效果.rar

html图片动态效果

动态网页设计代码网页制作动态图片效果源代码