• 欢迎浏览“String me = Creater\忠实的资深Linux玩家;”,请文明浏览,理性发言,有侵犯你的权益请邮件我(creater@vip.qq.com).
  • 把任何的失败都当作一次尝试,不要自卑;把所有的成功都想成是一种幸运,不要自傲。
  •    4年前 (2014-06-10)  web前端 |   抢沙发  4 
    文章评分 0 次,平均分 0.0

    浏览器支持情况:Internet Explorer 10, Firefox,Chrome 和 Opera支持。
    Chrome 2+(-webkit-transition)
    Firefox3.7+(-moz-transition)
    Safari 3.1+(-webkit-transition)
    Opera 10.5+(-o-transition)

    效果预览

    原图(该图从网上下载)

    使用CSS3美化图片显示

    美化后的图,美化后图片有了阴影,而且有指针hover效果。

    使用CSS3美化图片显示

    使用的CSS 3属性

    使用属性transition来实现变换效果,使用box-shadow来实现阴影。transition:all .2s ease-out分别意味着所有属性都将获得过渡效果,2秒完成,以慢速结束过渡效果。

    测试代码

    以下为测试的html代码,CSS加载在head中。

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    	<title>图片测试</title>
    	<style type="text/css">
    	img#sd { 
    		max-width:850px; 
    		border:6px solid #FFF; 
    		box-shadow:1px 1px 10px #666666; 
    		-webkit-transition:all .2s ease-out;
    		-moz-transition:all .2s ease-out;
    		transition:all .2s ease-out}
    	img#sd:hover {  box-shadow:2px 2px 20px #333;}
    	</style>
    </head>
    <body>
    <img id = "sd" src="./1.jpg"/></img>
    </body>
    </html>
     

    除特别注明外,本站所有文章均为String me = "Creater\忠实的资深Linux玩家";原创,转载请注明出处来自http://unix8.net/home.php/3556.html

    关于

    发表评论

    暂无评论

    切换注册

    登录

    忘记密码 ?

    切换登录

    注册

    扫一扫二维码分享