首頁手記心形動態圖，拷貝來的

心形動態圖，拷貝來的

標簽：

Html/CSS

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>

@keyframes movingheart{

0% {width:100px;height:100px;left:0px;top:0px;opacity:0.2}

25% {width:200px;height:200px;left:100px;top:100px;opacity:0.4；transform:rotate(30deg);}

75% {width:100px;height:100px;left:300px;top:0px;opacity:0.8;transform:rotate(60deg);}

100% {width:100px;height:100px;left:0px;top:0px;opacity:0.2;tranform:rotate(90deg);}

}

img.movingheart{

position:absolute;

width:100px;

height:100px;

animation-name:movingheart;

animation-duration:6s;

animation-iteration-count:infinite;

animation-direction:normal;

}

img.delay1{

animation-delay:2s;

}

img.delay2{

animation-delay:4s;

}

</style>

</head>

<body>

<img class="movingheart"

class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/169px-Heart_coraz%C3%B3n.svg.png">

<img class="movingheart delay1"

class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.iconsplace.com/download/pink-hearts-512.gif">

<img class="movingheart delay2"

class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.iconsplace.com/download/orange-hearts-512.gif">

</body>

</html>

點擊查看更多內容