Tutorials Require By Little Piano Girl .
效果如下图 -
课程开始 >>>
--------------------------------------------------
Step ① 登入部落格首页 > 布局 > 添加小工具 > HTML/JavaScript
Step ② 在 HTML/JavaScript 里面添加Code ⑴ / Code ⑵
Step ③ 浏览、保存.
基本版
Code ⑴
<style type="text/css">.img-hov{background: #fff;color: #000;width: 250px;height: 185px;margin-top:-185px;opacity: 0;-webkit-transition:all .5s ease-in-out;}.img-side:hover{opacity:0.8;}</style><img src="图片网址" width="250" /><div class="img-hov"><br /><center>内容</center></div>
旋转式
Code ⑵
<style type="text/css">.img-hov{background: #fff;color: #000;width: 250px;height: 185px;margin-top:-185px;opacity: 0;-webkit-transition:all .5s ease-in-out;}.img-hov:hover{-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);opacity:0.8;}</style><img src="图片网址" width="250" /><div class="img-hov"><br /><center>内容</center></div>
---------------------------------------------------
Step ① 登入部落格首页 > 模板 > Ctrl+F 找</style>
Step ② 在</style> 的上面添加代码 ⑴ / 代码 ⑵
Step ③ 然后在想要的地方置放代码 ⑶ Step ④ 浏览、保存.
基本版
代码 ⑴
.img-hov{background: #fff;color: #000;width: 250px;height: 185px;margin-top:-185px;opacity: 0;-webkit-transition:all .5s ease-in-out;}.img-side:hover{opacity:0.8;}
旋转式
代码 ⑵
.img-hov{background: #fff;color: #000;width: 250px;height: 185px;margin-top:-185px;opacity: 0;-webkit-transition:all .5s ease-in-out;}.img-hov:hover{-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);opacity:0.8;}
代码 ⑶
<img src="图片网址" width="250" /><div class="img-hov"><br /><center>内容</center></div>
---------------------------------------------------
Explain ::
橙色代码 ; 背景颜色 ( 建议白色/灰色 )
黄色代码 ; 字体颜色
青色代码 ; 图片的宽度
红色代码 ; 图片的高度 ( margin-top的数字要与高度一样,"-"符号别删除 )
蓝色代码 ; 透明度,数字越小就越透明
灰色代码 ; 旋转的代码,旋转角度可自行更换
紫色代码 ; 图片网址
---------------------------------------------------
这样应该明白了吧?
任何疑问可以到cbox 留言
我会尽快回复
转帖前请得到夲博主同意
并附上本部落格logo
谢谢合作 :)
