航海王_html_css3_旋转效果demo
生活随笔
收集整理的這篇文章主要介紹了
航海王_html_css3_旋转效果demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
航海王_html_css3_旋轉效果demo
海賊王_html_css3_旋轉效果demo
效果如下圖：
下載地址與圖片資源：
【航海王_html_css3_旋轉效果demo-網頁制作文檔類資源-CSDN下載】?
部分編碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>通緝令</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css"> * {margin: 0px;padding: 0px; /*通配一下*/ }#bgbox {width: 1250px;height: 740px;background: url("img/女帝.jpg");margin: 0px auto; /*確定背景大小及位置,居中*/ }#left_box {width: 590px;float: left;margin-top: 30px;margin-left: 5px;padding: 10px; }#left_box li {list-style: none;width:161px;height:170px;float:left;padding: 10px; }.img1 img {border-radius: 12px;width: 161px;height: 170px;float: left;padding: 6px;border: 3px solid #cccccc;margin: 5px 2px auto;cursor: pointer; /*鼠標形狀*/box-shadow: 2px 3px 3px #a1a1a1, -1px -1px 3px #7e7e7e; /*陰影部分*/ }li:HOVER {transform: rotate(360deg); /*旋轉*/transition: all 800ms ease; /*旋轉時間*/ /*中心點*/transform:origin(50%,50%)； }li:HOVER img{transform: scale(2.5);/*方法倍數*/transition: all 1000ms ease;/*運行時間*/border-radius: 12px; /*圓角*/ } </style></head><body><div id="bgbox"><div id="left_box"><ul><li class="img1"><img src="img/圖片1.jpg" /></li><li class="img1"><img src="img/圖片2.jpg" /></li><li class="img1"><img src="img/圖片3.jpg" /></li><li class="img1"><img src="img/圖片4.jpg" /></li><li class="img1"><img src="img/圖片5.jpg" /></li><li class="img1"><img src="img/圖片6.jpg" /></li><li class="img1"><img src="img/圖片7.jpg" /></li><li class="img1"><img src="img/圖片8.jpg" /></li><li class="img1"><img src="img/圖片9.jpg" /></li></ul></div></div></body> </html>總結
以上是生活随笔為你收集整理的航海王_html_css3_旋转效果demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阿里云——ECS——Linux服务器购买
- 下一篇： 华为云——给【服务器】一个温暖的家