h5+css3实现图片飞入和淡入淡出效果的代码实例
正如很多小伙伴们所知道的，楼主最近在开发移动端的响应式布局的自适应页面了，现在分享一个刚写完的小demo
html:
<!doctype html><html lang="en"><head><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><meta name='apple-mobile-web-app-capable' content='yes' /><meta name="format-detection" content="telephone=no" /><meta http-equiv='Content-Type' content='textml;charset=UTF-8' /><title>移动端</title><link rel="stylesheet" href="css/style.css" type="text/css" /></head><body>
<div class="img"> <img src="images/img-1.jpg" /></div>
<script type="text/javascript">
function imgAnimation(){ var imgObj = document.getElementsByTagName("div")[0];
imgObj.onclick =function(){ if(imgObj){
imgObj.className = "img imgAnimation";
}
}
}
imgAnimation(); </script></body></html>css:
@charset "utf-8";/* CSS Document */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,table,tbody,p,th,td{ -webkit-text-size-adjust:none; margin: 0; padding: 0; border: none; -webkit-tap-highlight-color:rgba(0,0,0,0); font-size: 1em; font-family:"Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica ,STHeiti; color: #4c4948; }html,body{ min-height:100%; }img,input,button,a,select,textarea{ margin: 0; padding: 0; resize:none; border:none; outline:none; } ol,ul { list-style:none; } h1,h2,h3,h4,h5,h6,p,em{ font-size:100%; word-wrap:break-word; font-weight: normal; font-style: normal; }a:active, a:focus{ outline:none; }button::-moz-focus-inner,input::-moz-focus-inner{ padding:0; border:0; }table{ border-collapse:collapse; border-spacing:0; }.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size:0; }.clearfix{ zoom:1; }a{ color: #4c4948; text-decoration: none; }.img{ width: 190px; height: 120px; padding: 3px; border: 1px solid #ccc; position: absolute;z-index: 12; top: 50px; left: 50%;
margin-left: -95px; } /*动画名字， 动画运行的时间，alternate平滑过渡， infinite是反复执行*/
.imgAnimation{
animation-name: imgAnimation;
animation: imgAnimation 2s alternate infinite;
-webkit-animation: imgAnimation 2s alternate infinite;
-moz-animation: imgAnimation 2s alternate infinite;
} /*
@-webkit-keyframes imgAnimation{
0%{ left: -198px}
100%{ left: 50%;}
}
@-moz-keyframes imgAnimation{
0%{ left: -198px}
100%{ left: 50%;}
} */
@-webkit-keyframes imgAnimation{
0%{ opacity: 0}
50%{ opacity: 0.5}
100%{ opacity: 1}
}
@-moz-keyframes imgAnimation{
0%{ opacity: 0}
50%{ opacity: 0.5}
100%{ opacity: 1}
}css中屏蔽的那部分代码就是图片飞入的css，简单实用，比当年手写js要方便的多。
【相关推荐】
1. CSS3免费视频教程
Atas ialah kandungan terperinci h5+css3实现图片飞入和淡入淡出效果的代码实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
Apakah maksud h5?
Aug 02, 2023 pm 01:52 PM
H5 merujuk kepada HTML5, versi terkini HTML H5 ialah bahasa penanda yang berkuasa yang menyediakan pembangun dengan lebih banyak pilihan dan ruang kreatif Kemunculannya menggalakkan pembangunan teknologi Web dan menjadikan interaksi dan kesan halaman web lebih Cemerlang, sebagai teknologi H5. secara beransur-ansur matang dan menjadi popular, saya percaya ia akan memainkan peranan yang semakin penting dalam dunia Internet.
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.
Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3
Apr 25, 2022 pm 04:52 PM
Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".
Bagaimana untuk membezakan antara H5, WEB front-end, big front-end dan WEB full stack?
Aug 03, 2022 pm 04:00 PM
Artikel ini akan membantu anda membezakan dengan cepat antara H5, bahagian hadapan WEB, bahagian hadapan yang besar dan timbunan penuh WEB. Saya harap ia akan membantu rakan yang memerlukan.
