27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]
E-mail:mzze@163.com
Q Q:32362389
W X:xiaomi168527
27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]
大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]
E-mail:97157726@qq.com
Q Q:97157726
css3的transform属性用的好了可以做出很多绚丽的网页效果,不亚于js,首先我们先来看通过transform旋转属性做出来的效果,鼠标放上去
怎么样是不是很炫??现在我把transform的源码贴出来,希望能给大伙提供帮助,有时间多了解transform旋转属性,真的很好用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >transform旋转属性</ title > < script src = "html5.js" ></ script > < style type = "text/css" > .b{width:634px;height:350px;position:relative;overflow:hidden;float:left;cursor:pointer;} .b img { width: 100%; } .b { background: #000; } .b:hover img { opacity: 0.3; } .c{padding:2.5em; position: absolute; top: 0; left: 0; width: 80%; height: 80%; overflow:hidden; text-align:center; } .b .c::before, .b .c::after { position: absolute; top: 30px; right: 130px; bottom: 30px; left: 130px; content: ''; -webkit-transition: opacity 0.35s,-webkit-transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -ms-transition: opacity 0.35s, -ms-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .b .c::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0,1); -moz-transform: scale(0,1); -o-transform: scale(0,1); -ms-transform: scale(0,1); transform: scale(0,1); } .b .c::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); -moz-transform: scale(1,0); -o-transform: scale(1,0); -ms-transform: scale(1,0); transform: scale(1,0); } .b:hover .c::before, .b:hover .c::after { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .b h4 { padding-top:16%; -webkit-transition: transform 0.35s; -moz-transition: transform 0.35s; -o-transition: -o-transform 0.35s; -ms-transition: -ms-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,-20px,0); -moz-transform: translate3d(0,-20px,0); -o-transform: translate3d(0,-20px,0); -ms-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0); opacity:0; } .b p { padding: 12px 2.5em; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -ms-transition: opacity 0.35s, -ms-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,20px,0); -moz-transform: translate3d(0,20px,0); -o-transform: translate3d(0,20px,0); -ms-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); } .b:hover h4,.b:hover p { color:#fff; opacity: 1; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /*--//banner--*/ </ style > </ head > < body > < div class = "b" > < img src = "img1.jpg" alt = "" > < div class = "c" > < h4 >Enimet pulvinar posuere</ h4 > < p >In sit amet sapien eros < br />Integer dolore magna aliqua</ p > </ div > </ div > </ body > </ html > |
本站内容均为小米原创,转载请注明出处:小米技术社区>> 利用css3【transform】旋转属性做出绚丽的效果