如何让页面所有图片加载完后再加载或执行css样式动画?

html-css012

如何让页面所有图片加载完后再加载或执行css样式动画?,第1张

你可以使用onload事件,图片加载完成后触发函数,然后输出css,我给你打个简单的例子

<img src="xx.png" onload="cssd()">

<div id="csss"></div>

<script>

function cssd(){

document.getElementById("csss").innerHTML='<STYLE>.x{background:#ff0000}</style>'

}

</script>

Please search 安林网络话题社

可以试试移除动画的类再重新给节点添加动画的类

下面这个demo是执行一次动画,2s后再重新执行一遍

(因为是demo,我就没有考虑兼容性问题,没有添加css前缀)

1

<div class="dot anm" id="anm"></div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

.dot {

position: relative

width: 100px

height: 100px

margin: 100px

border-radius: 50%

background: #000

}

.anm {

animation: move 1s forwards

}

@keyframes move

{

from {

left:0px

}

to {

left:200px

setTimeout(function() {

var dom = document.getElementById('anm')

dom.className = 'dot'

setTimeout(function() {

dom.className = 'dot anm'

}, 10)

}, 2000)

《GitHub精选》是我们分享Github中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个使用纯CSS实现动画加载效果的项目——SpinKit。

SpinKit通过使用transform和opacity属性实现了包括方块翻转、圆点旋转、圆环缩放和九宫格渐变等10余种动画加载的效果。

部分效果代码:

其他效果:

GitHub: https://github.com/tobiasahlin/SpinKit