🐬 Wapmaster share code hay: Hiệu ứng ảnh chạy

Thứ Hai, 16 tháng 10, 2017

Hiệu ứng ảnh chạy

HIỆu ỨNG ẢNH CHẠY
Ảnh chai qua phải

Ảnh chai qua lại 2 lần

Ảnh chay qua lai không dừng

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    100% {left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {left:0px; top:0px;}
    25%  {left:400px; top:0px;}
    100% {left:0px; top:0px;}
}
</style>

Ảnh chạy lên xuống không dừng. không dùng chung với 2 code trên

Ảnh chạy lên xuống 3 lần. không dùng chung với code trên

/* Standard syntax */
@keyframes example {
    0%   {left:0px; top:0px;}
    75%  {left:0px; top:700px;}
    100% {left:0px; top:0px;}
}
</style>

Ảnh chạy vòng màn hình khi gê chuộc vào nó

<style>

.xoaytoanmanhinh:hover{
animation xoayanhlientuc1 1s linear infinite;
-moz-animation: xoayanhlientuc1 1s linear infinite;
-webkit-animation: xoayanhlientuc1 1s linear infinite;
-o-animation: xoayanhlientuc1 1s linear infinite;
}

@keyframes xoayanhlientuc1{
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
/* Hien thi cho Safari and Chrome */
@-webkit-keyframes xoayanhlientuc1 {
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}

/* Hien thi cho Firefox */
@-moz-keyframes xoayanhlientuc1{
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}

/* Hien thi cho Opera */
@-o-keyframes xoayanhlientuc1{
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}

</style>

2 cái bông 2 bên trược theo chuộc

Lựa chọn 2: Banner trượt khi lăn chuột

<div id="left_ads_float">
        
<style>
#left_ads_float
{
    bottom:580px;
    left: -10px;
    position:fixed; }
#right_ads_float
{
    bottom:580px;
    right: -10px;
    position:fixed;
}
</style>
<script>
var vtlai_remove_fads=false;
function vtlai_check_adswidth()
    {
        if(vtlai_remove_fads)
        {
            document.getElementById('left_ads_float').style.display='none';
            document.getElementById('right_ads_float').style.display='none';
            return;
        }else if(document.cookie.indexOf('vtlai_remove_float_ads')!=-1)
        {
            vtlai_remove_fads=true;
            vtlai_check_adswidth();
            return;
        }
        else
        {
            var lwidth=parseInt(document.body.clientWidth);
            if(lwidth<1110)
            {
                document.getElementById('left_ads_float').style.display='none';
                document.getElementById('right_ads_float').style.display='none';
            }
            else
            {
                document.getElementById('left_ads_float').style.display='block';
                document.getElementById('right_ads_float').style.display='block';
            }
            setTimeout('vtlai_check_adswidth()',10);
        }
    }
</script>

Lựa chọn 2: Banner trượt khi lăn chuột 
<div id="divAdRight" style="display: none; position: absolute; TOP: 0px">    
<a href="your link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelEDsX7GFQvy8RLIM2zj7iYoulRg134LkazrJju5SFZkP8pzq43rdAs9xwzMfJv_h4v-MoYrLR41wBHdg-6kH5bFFAuMbCUgcNCQSjXncJNIvi6MzokyjPvGcA9g8LnXXXYzrYQqG8qo/s1600/images%25286%2529.jpg" width="80" height="240"/>
</a></div>    
<div id="divAdLeft"  style="display: none; position: absolute; TOP: 0px">    
<a href="your link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelEDsX7GFQvy8RLIM2zj7iYoulRg134LkazrJju5SFZkP8pzq43rdAs9xwzMfJv_h4v-MoYrLR41wBHdg-6kH5bFFAuMbCUgcNCQSjXncJNIvi6MzokyjPvGcA9g8LnXXXYzrYQqG8qo/s1600/images%25286%2529.jpg" width="80" height="240"/>    
</a></div>
    
<script>    
    function FloatTopDiv()    
    {    
        startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;    
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;    
        var d = document;    
        function ml(id)    
        {    
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];   
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};    
            el.x = startRX;    
            el.y = startRY;    
            return el;    
        }    
        function m2(id)    
        {    
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];    
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};    
            e2.x = startLX;    
            e2.y = startLY;    
            return e2;    
        }    
        window.stayTopLeft=function()    
        {    
            if (document.documentElement && document.documentElement.scrollTop)    
                var pY =  document.documentElement.scrollTop;    
            else if (document.body)    
                var pY =  document.body.scrollTop;    
             if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else  {startLY = TopAdjust;startRY = TopAdjust;};    
            ftlObj.y += (pY+startRY-ftlObj.y)/16;    
            ftlObj.sP(ftlObj.x, ftlObj.y);    
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;    
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);    
            setTimeout("stayTopLeft()", 1);    
        }    
        ftlObj = ml("divAdRight");    
        //stayTopLeft();    
        ftlObj2 = m2("divAdLeft");    
        stayTopLeft();    
    }    
    function ShowAdDiv()    
    {    
        var objAdDivRight = document.getElementById("divAdRight");    
        var objAdDivLeft = document.getElementById("divAdLeft");      
        if (document.body.clientWidth < 1000)    
        {    
            objAdDivRight.style.display = "none";    
            objAdDivLeft.style.display = "none";    
        }    
        else    
        {    
            objAdDivRight.style.display = "block";    
            objAdDivLeft.style.display = "block";    
            FloatTopDiv();    
        }    
    }
</script>    
<script>    
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 55;RightBannerW = 55;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");

</script></div>

Bo tròn góc ảnh

Sắp đến Tết rồi! Chỉ còn...

Ngày

Giờ

Phút

Giây

✔ Hình động Sưu tầm các hình ảnh đẹp chia sẻ cho các bạn

✔ Hình ảnh đẹp Sưu tầm các hình ảnh đẹp chia sẻ cho các bạn

✔ Hình ảnh trái tim bộ sưu tập ảnh trái tim cực đẹp

✔ Icon sưu tầm bộ sưu tập icon cực đẹp

✔ truyện ma truyện ma rùng rợn trẻ em không nên đọc

✔ ứng dụng Android ứng dụng Android đây các ứng dụng do mình thường sử dụng

✔ Game cho Android Game cho Android đây các các game hay mình hay thường chơi và mình thường sử dụng

✔ Ứng dụng Windows Sưu tầm các ứng dụng Windows crack mình thường hay sử dụng nó

✔ Game cho Windows Sưu tầm các game Windows mình thường hay trước đây AD chơi nó rất hay

✔ tTrình duyệt Window Trình duyệt lướt web cho Windows

✔ Trình duyệt Android Trình duyệt lướt web cho Android lũ quét nhanh chóng quảng cáo

✔ Nhạc nền cho wap/web Nhạc nền cho wap/web các bạn có thể thay đổi bản nhạc bằng đường link mp3 khác

✔ Bố cục Chia 2,3,4 cột Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng đáp ứng (các cột sẽ sắp xếp bố trí lại từ 4 lên 2 trên màn hình rộng ít hơn 900px

✔ Lớp phủ điều hướng Sidenav Nội dung đẩy Nhấp vào phần tử bên dưới để mở trình đơn điều hướng bên và đẩy nội dung này sang phải..

✔ Thanh trượt tạo một thanh trượt lên xuống bên phải

✔ DIV kéo thả Thành phần DIV có thể kéo được Làm thế nào để - Tạo một thành phần HTML có thể kéo được, code đây

✔ Hiệu ứng xoay ảnh Các hiệu ứng giúp cho bạn làm xoay ảnh

✔ Hiệu ứng ảnh Các hiệu ứng giúp cho bạn làm chạy ảnh

✔ Hiệu ứng chử chạy Hiệu ứng chử hay ảnh chạy qua lại lên xuống

✔ Code thường dùng Code thường dùng cho các bạn nào ích hiểu hay chưa biết vê lập một trang web

✔ Auto nội dung Nội dung Tự đổi mổi lầ truy cập. Và tự động có thể áp dụng cho hình ảnh

✔ Chống copy code chống copy dử liệu của bạn bằng mọi cách click chuột trái phải để xem nguồn trang

✔ Hiệu ứng chuột Hiệu ứng con trỏ chuột đẹp DAT007 chia sẽ cho các bạn đến những hiệu ứng con trỏ chuột có sẵn

✔ Chạy thử Code Công cụ Chạy Thử Code, HTML,SCRIPT.

✔ Chạy thử mã hóa Code Công cụ Chạy Thử và mã hóa việt hhos Code, HTML,SCRIPT.

✔ Lốp Menu Tạo một lớp menu bên trái có thanh kéo lên xuống

✔ Code tổng hợp Tổng hợp các code sưu tầm hay chia sẽ trên trang của bạn

✔ Ẩn hiện nội dung Đơn giản quá phải không, chỉ vài lệnh gọi class là bạn đã có thể ẩn hiện nội dung tùy thích, bạn có thể tham khảo các bài viết

✔ 4 Nút Sidenav 4 Nút Sidenav thiết lập nội dung từ trong một lúc bên trái có thể chuyển động ra vào

✔ Tràn văn bản Khi chúng ta làm văn bản bị tràn ra ngoài code này có thể giúp khác phục

✔ Khung cho blogger Code tạo Khung cho trang thi vụ như đầu trang v.v...

✔ Bo tròn góc Bo tròn các nền link hay các ảnh tùy do bạn thiết kế

✔ Auto Wap/Web wapego Cách auto mình tổng hợp lại những thứ mà mình biết về auto wap web cho wapka và wapego chia sẻ cho các bạn

✔ Auto Wap/Web xtgem Cách auto mình tổng hợp lại những thứ mà mình biết về auto wap web cho xtgem chia sẻ cho các bạn

✔ Đưa website lên google làm thế nào để đưa Website của bạn vào Google một cách nhanh nhất?

✔ Css tooltip Chú giải công cụ thường được sử dụng để chỉ định thêm thông tin về một cái gì đó khi người dùng di chuyển con trỏ chuột qua một phần tử:

✔ Icon đẹp sưu tầm những icon đẹp

✔ Tìm hiểu CSS Tìm hiểu về CSS dành cho những những lập trình viên mới

✔ Mã màu CSS Sưu tập bộ mã màu CSS đầy đủ

✔ Css 1 Việc hiểu biết CSS3 sẽ giúp ích rất nhiều cho các bạn tìm được việc làm ưng ý sau này. Vì thế hôm nay mình xin chia sẻ với các bạn một hiệu ứng đơn giản mà CSS3 mang lại cho chúng ta

✔ Css 2 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Css 3 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Css 4 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Css 5 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Css 6 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Css 7 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Ký tự đặc biệt Các kí tự cổ điển có rất nhiều ý nghĩa, bạn có thể nhận thấy tại đây chứa các biểu tượng về lịch sử như: âm dương, lá bài, vương niệm, các chữ số La Mã

DAT007 KÍNH CHÚC CÁC BẠN THÀNH CÔNG TRONG CÔNG VIỆC

Thứ Hai, 16 tháng 10, 2017

Hiệu ứng ảnh chạy