Home > Article > Web Front-end > Code examples for h5+css3 to achieve image fly-in and fade-out effects
As many friends know, the poster has recently been developing an adaptive page with responsive layout on the mobile side. Now I am sharing a small demo that I just finished writing
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} }
The part of code blocked in css is the css that picture flies in. It is simple and practical, and much more convenient than handwriting js back then.
【Related Recommendations】
2. Teach you how to use CSS3 to create 8 kinds of Loading animations
3. Teach you to use CSS to draw a standard circular pattern
4. CSS3 code tutorial to complete a square box rounded corner effect
5. Teach you how to write CSS styles in a standardized way
The above is the detailed content of Code examples for h5+css3 to achieve image fly-in and fade-out effects. For more information, please follow other related articles on the PHP Chinese website!