کد متحرک کردن عکس و متن بعد از لود سایت

کد متحرک کردن عکس و متن بعد از لود سایت با این کد شما میتوانید تصاویر و یا متنهای دلخواه خود را بعد از لود سایت به صورت متحرک در اورید.این کد با css ساخته شده بسیار سبک و کم حجم بوده .حتی کل سایت را نیز میتوان با این کد بعد از لود جابه جا کرد.

[quote]دمو کد[/quote]

<!DOCTYPE html>
<html> 
<head>
	<title>HTML5 & CSS3 Text Animation Example</title>
</head>
<body>

<!-- STYLE  SECTION -->
<style type="text/css">
body {
    font-family: "BarnaulGrotesk";
}
.basic {
    font-size: 2em; /*increased font size*/
    color: green;   /*set a font color to green*/
    -webkit-animation-name: basic; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-duration: 4s; /*set how long will the animation run*/
    animation-name: basic;  /*give the animation a name to refer later in keyframes*/
}
@keyframes basic {         /*refer to our current keyframe: basic*/
    from {color: green;}    /*start animation with this property and value*/
    to {color: red;}        /*end the animation with this property and value*/
}




.codebazan-txt-anim {
    font-size: 2em;
    margin-top: 1em;
    color: black;
    position: relative;
    animation-name: example-4;
    -webkit-animation-name: example-4;
    animation-duration: 5s;
    animation-timing-function: linear; /*how the animation transitions through keyframes*/
    animation-delay: 1s;        /*delay the start of an animation*/
    animation-iteration-count: 2; /*play the animation two times*/
    animation-direction: alternate;  /*alternate direction on each run through the sequence*/
}

@keyframes example-4 {  /*applying multiple animations*/
    ۰%   {left: 0px; top: 0px;}
    ۳۰%  {left: 100px; top: 0px;}
    ۶۰%  {left: 100px; top: 50px;}
    ۹۰%  {left: 0px; top: 50px;}
    ۱۰۰%  {left: 0px; top: 0px;}
} 
  
</style>   
  
<!-- HTML SECTION  -->

 <!-----بخش ویرایش اطلاعات------>
 
<div class="codebazan-txt-anim">

info@codebazan.ir

 
</div>
<div class="codebazan-txt-anim">


<img src="https://codebazan.ir/logo.png" alt="" />


</div>

 
</body>
</html>

برای ویرایش کد میتوانید از ابزار پیش نمایش کدبازارن استفاده نمایید.

کد متحرک کردن عکس و متن بعد از لود سایت

دیدگاهتان را بنویسید لغو پاسخ