一、有现成图片

线上demo：https://my.weblf.cn/alone_page/css_ani/flag2.html

代码：

<!doctype html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>飘动的旗帜~</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;width: 100%;background-color: lightgrey;}body {text-align: center;position: relative;}ul,li {list-style: none;}.flag_box{/* transform: rotate(90deg);margin-top: 200px; *//* transform: scale(1); */}#flag {position: absolute;left: 50%;top: 50%;animation: flag-reverse ease-in-out infinite;}#flag>li {height: 100%;float: left;background-image: url('../statics/images/flag2.png');background-size: auto 100%;animation: flag ease-in-out infinite;}</style>
</head><body><div class="flag_box"><ul id="flag"></ul></div><script>(function () {// 这里是js代码var flagEle = document.getElementById('flag')var image = new Image()image.src = '../statics/images/flag2.png'var IMG_MAX_WIDTH = 600var IMG_MAX_HEIGHT = 600var imgHeightvar imgWidthimage.onload = function () {imgWidth = image.widthimgHeight = image.heightvar ratio = image.width / image.heightif (imgWidth > IMG_MAX_WIDTH) {imgWidth = IMG_MAX_WIDTHimgHeight = imgWidth / ratio}if (imgHeight > IMG_MAX_HEIGHT) {imgHeight = IMG_MAX_HEIGHTimgWidth = imgHeight * ratio}flagEle.style.width = imgWidth + 'px'flagEle.style.height = imgHeight + 'px'flagEle.style.marginLeft = -imgWidth / 2 + 'px'flagEle.style.marginTop = -imgHeight / 2 + 'px'console.log('图片加载完成')splitImg(100, 5, 1.5, 3)}/*** 分割图片* @param sliceCount 切片数量* @param amplitude 振幅* @param period 固定周期个数* @param duration 一个周期的时长*/function splitImg(sliceCount, amplitude, period, duration) {console.log('切割图片开始')var styleEle = document.createElement('style')// styleEle.innerHTML = 'body{background: red}'var styleHtmlAry = []var sliceCountPerPeriod = Math.floor(sliceCount / period)var sliceWidth = imgWidth / sliceCountvar formula = sliceCountPerPeriod + 'n+'var interval = duration * period / sliceCount// 添加动画延时for (var i = 0; i < sliceCount + 1; i++) {if (i < sliceCountPerPeriod) {styleHtmlAry.push('#flag > li:nth-child(' + formula + i + ') { ')styleHtmlAry.push('animation-delay: -' + (interval * (sliceCountPerPeriod - i)) + 's;')styleHtmlAry.push('}')}styleHtmlAry.push('#flag > li:nth-child(' + i + ') { background-position: -' + (i * sliceWidth) +'px 0; }') // 设置切片背景}// 添加关键帧动画styleHtmlAry.push('@keyframes flag {')styleHtmlAry.push('0% { transform: translate3d(0, ' + amplitude + 'px, 0); }')styleHtmlAry.push('50% { transform: translate3d(0, ' + (-amplitude) + 'px, 0); }')styleHtmlAry.push('100% { transform: translate3d(0, ' + amplitude + 'px, 0); }')styleHtmlAry.push('}')// 添加反向关键帧动画styleHtmlAry.push('@keyframes flag-reverse {')styleHtmlAry.push('0% { transform: translate3d(0, ' + (-amplitude) + 'px, 0); }')styleHtmlAry.push('50% { transform: translate3d(0, ' + amplitude + 'px, 0); }')styleHtmlAry.push('100% { transform: translate3d(0, ' + (-amplitude) + 'px, 0); }')styleHtmlAry.push('}')// 容器应用flag-reverse动画styleHtmlAry.push('#flag {')styleHtmlAry.push('animation-duration: ' + duration + 's;') // 添加周期时长styleHtmlAry.push('animation-delay: -' + (interval * sliceCountPerPeriod) + 's;')styleHtmlAry.push('}')// 切片样式styleHtmlAry.push('#flag > li {')styleHtmlAry.push('animation-duration: ' + duration + 's;') // 添加周期时长styleHtmlAry.push('width: ' + (imgWidth / sliceCount) + 'px;') // 设置切片宽度styleHtmlAry.push('}')styleEle.innerHTML = styleHtmlAry.join('')// 创建切片元素flagEle.innerHTML = new Array(sliceCount + 1).join('<li></li>')document.documentElement.appendChild(styleEle)}})();</script>
</body></html>

二、自动生成图片后飘动

线上demo：https://my.weblf.cn/vuecli3_wp4_alone_demo/html2canvas_flag.html

此demo使用vue编写，调用html2canvas生成图片：

<template><div id="pageDiv" :style="{'padding-top':isWeiXin || isApps?'0':'3rem'}"><!-- 页面头部--><header-com :poptitle="'html2canvas截图'" :type="'doc_title'" v-if="!isWeiXin && !isApps"></header-com><!-- 页面的主要内容 --><section class="content"><div class="box_main" ref="imageToFile"><div id="flag1">欢迎光临 一路顺风</div></div><button type="button" class="shot-btn" @click="screenShot">截图</button><!-- 截图结果 --><p>截图结果</p><img id="new_img" :src="img" v-if="img"/><!-- 旗帜飘动 --><div class="flag_box"><ul id="flag"></ul></div></section></div>
</template>
<script>
import HeaderCom from "@/components/header"; //页面头部
import {changeUrl} from "@/utils/changeUrl"
import html2canvas from 'html2canvas'
export default {data() {return {isWeiXin: TS_WEB.isWeiXin,isApps: TS_WEB.isApp,config: {value: '',logo: require('@/statics/images/system/sjbj.jpg')},img: ""};},components: {HeaderCom,html2canvas},methods: {changeUrl,//生成图片screenShot() {html2canvas(this.$refs.imageToFile, {width: 80,height: 200,scale: 1,}).then((canvas) => {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等this.img = canvas.toDataURL('image/png');setTimeout(()=>{this.img_ini()},1000)})},/*** 分割图片* @param sliceCount 切片数量* @param amplitude 振幅* @param period 固定周期个数* @param duration 一个周期的时长*/splitImg(sliceCount, amplitude, period, duration,image,flagEle) {console.log('切割图片开始')var imgWidth = image.widthdocument.getElementById('flag').style.width=imgWidth+'px'var imgHeight = image.heightvar styleEle = document.createElement('style')// styleEle.innerHTML = 'body{background: red}'var styleHtmlAry = []var sliceCountPerPeriod = Math.floor(sliceCount / period)var sliceWidth = imgWidth / sliceCountvar formula = sliceCountPerPeriod + 'n+'var interval = duration * period / sliceCount// 添加动画延时for (var i = 0; i < sliceCount+1; i++) {console.log(i)if (i < sliceCountPerPeriod) {styleHtmlAry.push('#flag > li:nth-child(' + formula + i + ') { ')styleHtmlAry.push('animation-delay: -' + (interval * (sliceCountPerPeriod - i)) + 's;')styleHtmlAry.push('}')}styleHtmlAry.push('#flag > li:nth-child(' + i + ') { background-position: -' + (i * sliceWidth) +'px 0; }') // 设置切片背景}// 添加关键帧动画styleHtmlAry.push('@keyframes flag {')styleHtmlAry.push('0% { transform: translate3d(0, ' + amplitude + 'px, 0); }')styleHtmlAry.push('50% { transform: translate3d(0, ' + (-amplitude) + 'px, 0); }')styleHtmlAry.push('100% { transform: translate3d(0, ' + amplitude + 'px, 0); }')styleHtmlAry.push('}')// 添加反向关键帧动画styleHtmlAry.push('@keyframes flag-reverse {')styleHtmlAry.push('0% { transform: translate3d(0, ' + (-amplitude) + 'px, 0); }')styleHtmlAry.push('50% { transform: translate3d(0, ' + amplitude + 'px, 0); }')styleHtmlAry.push('100% { transform: translate3d(0, ' + (-amplitude) + 'px, 0); }')styleHtmlAry.push('}')// 容器应用flag-reverse动画styleHtmlAry.push('#flag {')styleHtmlAry.push('animation-duration: ' + duration + 's;') // 添加周期时长styleHtmlAry.push('animation-delay: -' + (interval * sliceCountPerPeriod) + 's;')styleHtmlAry.push('}')// 切片样式styleHtmlAry.push('#flag > li {')styleHtmlAry.push('animation-duration: ' + duration + 's;') // 添加周期时长styleHtmlAry.push('width: ' + (imgWidth / sliceCount) + 'px;') // 设置切片宽度styleHtmlAry.push('}')styleEle.innerHTML = styleHtmlAry.join('')// 创建切片元素flagEle.innerHTML = new Array(sliceCount+1).join(`<li style="background-image:url('${this.img}')"></li>`)document.documentElement.appendChild(styleEle)},//获取新图片img_ini(){var flagEle = document.getElementById('flag')var image = new Image()image.src = this.imglet that=thisimage.onload = function () {console.log('图片加载完成')that.splitImg(80, 5, 1.5, 3,image,flagEle)}}},mounted(){},created() {document.title='html2canvas截图'}
};
</script>
<style>
#flag {height: 100%;position: absolute;animation: flag-reverse ease-in-out infinite;
}#flag>li {height: 100%;float: left;background-size: auto 100%;animation: flag ease-in-out infinite;
}
</style>
<style lang="less" scoped>
// 盒子模型
#pageDiv {width: 100%;height: 100%;padding-top: 0;padding-bottom: 0;overflow: hidden;position: relative;box-sizing: border-box;.content{height: 100%;width: 100%;overflow: scroll;overflow-x: hidden;.box_main{width: 80px;height: 200px;#flag1{width: 80px;height: 200px;background: red;writing-mode: vertical-lr;font-size: 16px;line-height: 80px;padding-top: 20px;box-sizing: border-box;color: white;}}#new_img{display: block;width: 80px;height: 250px;}ul,li {list-style: none;}.flag_box{position: absolute;right: 50px;top: 4rem;height: 200px;width: 80px;}}
}
</style>

H5横幅，旗帜飘动动画相关推荐

H5 水球加载动画 - canvas应用篇
水球加载动画 - canvas应用篇效果图: html代码如下: <!doctype html> <html lang="en"> <head> ...
html手机页面弹幕效果,H5移动端弹幕动画实现
需求已知20条内容要有弹幕效果,分成三层,速度随机. 先来看看效果: 小小弹幕效果.gif 所以这里不考虑填写生成的.只是一个展现的效果. 如果要看填写生成的,请不要浪费Time 思路把单个内容编辑 ...
AE教程：纸张飘动动画
今天我们来分享的是一个较为简单的小动画--报纸飘动动画,应该如何通过AE进行制作呢?一起来看教程. 报纸飘动动画AE教程 1.导入报纸元素,然后添加[CC Page Turn]效果,调大[Fold R ...
H5 CSS3特性实现动画效果
H5 CSS3特性制作动画曾手写纯js实现过轮播图,那会挺费劲的,更别提动画了,现在CSS3让这一步变得越来越简单了一,开始准备材料一张雪碧图(足够了) 手撕代码创建文件 animation ...
unity怎么制作云飘动_Unity3D 实用技巧 - 分享实时飘动动画插件
其实在游戏制作里面,实现角色头发衣服飘带等实时飘动,有很多的物理模拟插件,无论是通过骨骼驱动模拟,还是布料的的物理模拟,都有很多现成的插件能快速实现.小编针对实现实时飘动动画插件进行了简单的资源收集调 ...
html5 水母,h5游动的水母动画特效
h5游动的水母动画特效 html,body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .conta ...
前端实现旗帜飘动效果系列 (Ⅰ)：dom+css实现
hello,民娜桑~~我又来开新坑了(￣ε(#￣)╰╮o(￣皿￣///),这次尽量保证把这个坑填完~ 本系列我会分四篇来完成主题,分别是① DIV+CSS的实现,② canvas2D的简单实现,③ c ...
初学RenderMonkey做一面旗帜飘动的效果
这几天在捣鼓一个游戏骑马与砍杀不知道有没有人玩过.官方出了个shader包,可以自定义shader,于是就开始学起来了,学了一点,简单的实现了一直想弄的动态世界.这期间一直在用RenderMonk ...
中秋祝福代码，中秋快乐代码，采用H5制作的中秋动画祝福
1)此demo利用了swiper框架,animat动画库,还有设置js代码来做到自适应移动端,转换单位是rem,与px转换是/100 2)此素材在千图网使用会员下载原创psd,谢谢提供的h5设计稿的作 ...
从手机端 H5 制作来看 WEB 动画的术与道
我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式.企业商户对于这种方式也很有好感,从而导致了 H5 ...

H5横幅，旗帜飘动动画

一、有现成图片

二、自动生成图片后飘动

H5横幅，旗帜飘动动画相关推荐

最新文章

热门文章