首页 > 代码库 > 总结网页中流行的8种css3样式
总结网页中流行的8种css3样式
CSS样式： .f1 img{border-radius:50%;transition: all .4s ease-out;}.f1 a:hover img{border-radius:0px;}.f2 a{transition:all 0.4s ease-out 0s;color:#000;} .f2 a:hover{margin-left:10px; text-decoration:none;}.f21{ transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out; width:200px; height:200px; background-color:#000000; display:block; margin-top:100px; color:#fff; text-align:center; line-height:200px; font-size:20px; font-weight:bold;}.f21:hover { transform:translate(10px,0); -webkit-transform:translate(10px,0); -moz-transform:translate(10px,0); -o-transform:translate(10px,0); -ms-transform:translate(10px,0);}.f22{ transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out; width:200px; height:200px; background-color:#000000; display:block; margin-top:100px; color:#fff; text-align:center; line-height:200px; font-size:20px; font-weight:bold;}.f22:hover { transform:translate(0,-10px); -webkit-transform:translate(0,-10px); -moz-transform:translate(0,-10px); -o-transform:translate(0,-10px); -ms-transform:translate(0,-10px);}.f3 a{ background: url(toux1.jpg) no-repeat; width:200px; height:200px; display:block;}.f3 a:hover{ background-position: 0 -200px; transition: all .4s ease-out;}.f4{ transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out; width:200px; height:200px; background-color:#000000; display:block; margin-top:30px; color:#fff; text-align:center; line-height:200px; font-size:20px; font-weight:bold;}.f4:hover { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg);}.f5{ transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out; width:200px; height:200px; background-color:#000000; display:block; margin-top:30px; color:#fff; text-align:center; line-height:200px; font-size:20px; font-weight:bold;}.f5:hover { transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2);}#f6{ width:200px; height:200px; overflow:hidden; border:2px #61C799 solid;}.f6{ transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out; width:200px; height:200px; display:block; color:#fff; text-align:center; line-height:200px; font-size:20px; font-weight:bold;}.f6:hover { transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2);}
HTML：1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>现在网页中流行的css3样式</title> 6 </head> 7 8 <body> 9 <div class="f1">10 <a href="#"><img src="toux.jpg" width="200" height="200" alt=""/></a>11 </div>12 <hr>13 <div class="f2">14 <a href="#"><img src="toux.jpg" width="200" height="200" alt=""/></a>15 </div>16 <hr>17 <a class="f21">左右移动</a>18 <hr>19 <a class="f22">上下移动</a>20 <hr>21 <div class="f3">22 <a href="#">测试测试</a>23 </div>24 <hr>25 <a class="f4">360度旋转</a>26 <hr>27 <a class="f5">放大效果</a>28 <hr>29 <div id="f6">30 <a class="f6"><img src="toux.jpg" width="200" height="200" alt=""/></a>31 </div>32 33 </body>34 </html>
所需图片：
toux.jpg
toux1.jpg
总结网页中流行的8种css3样式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。