ホームページ > 記事 > ウェブフロントエンド > 画像のフライインおよびフェードアウト効果を実現するための h5+css3 のコード例
画像のフライインおよびフェードアウト効果を実現するための h5+css3 のコード例
- Y2Jオリジナル
- 2017-05-23 10:32:188140ブラウズ
多くの友人が知っているように、著者は最近、モバイル側でレスポンシブ レイアウトを備えたアダプティブ ページを開発中です。今、書き終えたばかりの小さなデモを共有します
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よりもはるかに便利です。
【関連する推奨事項】
2. CSS3 を使用して 8 種類の読み込みアニメーションを作成する方法を説明します
3. CSS を使用して標準的な円形パターンを描画する方法を説明します
4 . ボックスの角丸効果を完成させるための CSS3 コードチュートリアル
5. 標準化された方法で CSS スタイルを記述する方法を説明します以上が画像のフライインおよびフェードアウト効果を実現するための h5+css3 のコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。