当前位置: 首页 » 随笔 » CSS3该用用了

CSS3该用用了

Zero零分 随笔 3,985 0 6年前

html5,CSS3,貌似早就听说过的了。一直都没去理会过,只要是之前XP中的IE兼容性不怎么好,现在XP退出了,有空去了解下html,CSS3,还是蛮好看的。

这两天在写一个鼠标经过慢慢放大图片的东东,用JS似乎比较大,就改用了CSS3,顺便百度了下CSS3 动画,似乎还真的挺好看的。

对应代码:

《style>
    .div1{width:300px;height:300px;overflow:hidden;}
    .div1 img{height:300px;width:auto;-webkit-transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;}
    .div1:hover img{opacity:0.8;-webkit-transform:scale(5); -o-transform:scale(5);  -moz-transform:scale(5);}《img src="//jspintu-photo.stor.sinaapp.com/20141223233246.jpg">

演示地址://2.jspintu.sinaapp.com/dome/css3.php

发布:2014-12-29 22:35:55
标签:
链接:https://blog.32xp.com/css3-71.html
END

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

*

用户评论(0)

一个很有趣的CSS3动画效果

一个很有趣的CSS3动画效果,可当过渡页,如loading! 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="robots" content="noindex,follow"> <title>加载中</title> <style> body{font-weight:100;margin:0}body{-webkit-tap-highlight-color:transparent;background-color:#222428;font-size:100%;font-family:Open Sans;height:100%}.loader{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-mos-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;width:80%;overflow:visible}.loader,.loader div{position:absolute;height:36px}.loader div{width:30px;margin:0 10px;opacity:0;animation:move 2s linear infinite;-o-animation:move 2s linear infinite;-moz-animation:move 2s linear infinite;-webkit-animation:move 2s linear infinite;transform:rotate(180deg);-o-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);color:#fff;font-size:3em}.loader div:nth-child(8):before{background:#db2f00}.loader div:nth-child(8):before,.loader div:nth-child(9):before{content:'';position:absolute;bottom:-15px;left:0;width:30px;height:30px;border-radius:100%}.loader div:nth-child(9):before{background:#f2f2f2}.loader div:nth-child(10):before{bottom:-15px;height:30px;background:#13a3a5}.loader div:after,.loader div:nth-child(10):before{content:'';position:absolute;left:0;width:30px;border-radius:100%}.loader div:after{bottom:-40px;height:5px;background:#39312d}.loader div:nth-child(2){animation-delay:.2s;-o-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-delay:.2s}.loader div:nth-child(3){animation-delay:.4s;-o-animation-delay:.4s;-webkit-animation-delay:.4s}.loader div:nth-child(4){animation-delay:.6s;-o-animation-delay:.6s;-moz-animation-delay:.6s;-webkit-animation-delay:.6s}.loader div:nth-child(5){animation-delay:.8s;-o-animation-delay:.8s;-moz-animation-delay:.8s;-webkit-animation-delay:.8s}.loader div:nth-child(6){animation-delay:1s;-o-animation-delay:1s;-moz-animation-delay:1s;-webkit-animation-delay:1s}.loader div:nth-child(7){animation-delay:1.2s;-o-animation-delay:1.2s;-moz-animation-delay:1.2s;-webkit-animation-delay:1.2s}.loader div:nth-child(8){animation-delay:1.4s;-o-animation-delay:1.4s;-moz-animation-delay:1.4s;-webkit-animation-delay:1.4s}.loader div:nth-child(9){animation-delay:1.6s;-o-animation-delay:1.6s;-moz-animation-delay:1.6s;-webkit-animation-delay:1.6s}.loader div:nth-child(10){animation-delay:1.8s;-o-animation-delay:1.8s;-moz-animation-delay:1.8s;-webkit-animation-delay:1.8s}@keyframes move{0%{right:0;opacity:0}35%{right:41%}35%,65%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}65%{right:59%}to{right:100%;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}}@-webkit-keyframes move{0%,to{opacity:0}0%{right:0}35%{right:41%}35%,75%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}75%{right:59%}to{right:100%;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);opacity:0}} </style> </head> <body class="ie8"> <div class="loader"> <div> C </div> <div> S </div> <div> S </div> <div> 动 </div> <div> 画 </div> <div> 吗 </div> <div> ? </div> <div> </div> <div> </div> <div> </div> </div> </body> </html> 演示地址:效果演示
代码 ·

京东更换logo,狗胖了!

无意中看到一则笑话: 京东更换logo了,你怎么看? 答:膨胀了! 打开手机,看下京东APP,果然,狗胖了!
随笔 ·

赵薇被全网封杀,娱乐圈疑开始整治了

今天,瞬间刮起”小燕子”赵薇被全网封杀的消息,做为吃瓜群众,一直未能百度到赵薇被封杀的原因!视频网站都搜不到“赵薇”这个关键词了 百度一下,也未能百度到赵薇被封杀的原因,有猜测时因旗下艺人张哲瀚,也有猜测是因20年前的时装杂志封面!不论如何,既然被封杀,一定是触犯了底线!    
随笔 ·

安卓手机刷入windows11系统

手机上运行Windows系统,在很早之前就有人研究,之前都是通过模拟器/虚拟机安装运行Windows系统!而微软发布了Windows11之后,安卓手机可以直接输入Windows系统了! 微软发布的 Windows 11 系统拥有两个架构版本,分别是 x86 和 arm64,像我们的电脑,一般都是 x86 架构,而手机基本上是 arm64 架构。 刷入Windows系统的手机要求芯片是高通845,可能是因为UEFI固件,开发者在 Github 移植编译了这个 UEFI 固件,让它支持了骁龙 845 / 855 (部分) 的设备可以刷入 Windows 11 系统。 刷机流程一般就是解锁Bootloader、刷入Twrp、刷入UEFI 固件、刷入Windows 11 系统。 网上已有不少人输入Windows11系统,就目前刷入的Windows11系统,多少都会有一些功能无非使用! 据说Lumia950XL输入Windows11可以打电话,发短信,数据流量上网,当然,毕竟Lumia950XL被称为微软末代机皇!
随笔 ·

扫黑风暴送审版泄露,腾讯已报警

8月20日午夜至21日凌晨,突然在网上流出全集版本,随后,该盗版版本传遍全网。 对此,8月21日,电视剧《扫黑风暴》官方微博发布反盗版声明,腾讯方面表示已报警。 扫黑风暴剧情简介 作为一线干警的李成阳,不断遭到保护伞的打击,黑恶势力的陷害,甚至顶头上司,公安局长等人为了阻止他的调查,构陷他,导致他身陷囹圄。但最终在中政委和中央督导组的指挥和领导下,李成阳重获自由,并联合公检法司各部门,最终将盘踞在中江市十几年的两大黑恶势力团伙一网打尽,并将黑恶势力的保护伞和那些被腐蚀的政府官员绳之以法,还中江政坛一个干净的政治生态,还中江百姓一个清朗的社会环境 最高人民检察院 提醒:在互联网上有人未经许可擅自非法传播、销售电视剧《扫黑风暴》的盗版内容,严重扰乱了电视剧《扫黑风暴》的正常播放秩序,侵犯了出品方以及播出平台的合法权益,也对创作者以及观众造成了极大的伤害,涉嫌构成刑事犯罪。 那么问题是,送审版是哪个环节被泄露的?
随笔 ·
Zero零分
站龄14年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
464
文章
36
评论
27
分类
819
标签
7
友链
onlinelovesky 317355746 122551965@qq.com

百度广告