2018-02-08-CSS3小米商品详情过渡.rar

共17个文件

png：9个

jpg：3个

xml：3个

需积分: 48 29 下载量 110 浏览量 2018-02-08 15:22:58 上传评论收藏 639KB RAR 举报

温馨提示

2018-02-08-CSS3小米商品详情过渡.rar。具体可以看：https://github.com/smyhvae/web

资源推荐

资源详情

资源评论

收起资源包目录

2018-02-08-小米商品详情过渡.rar （17个子文件）

JS-Demo

images

2.png 53KB

bg1.png 21KB

baby0.jpg 9KB

bg3.png 33KB

paopao.png 123KB

1.png 44KB

bg4.png 29KB

3.jpg 40KB

bg5.png 51KB

bg2.png 41KB

border.png 849B

img.jpg 238KB

.idea

misc.xml 174B

workspace.xml 22KB

inspectionProfiles

modules.xml 266B

JS-Demo.iml 458B

index.html 2KB

共 17 条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS 过渡</title> <style> body { margin: 0; padding: 0; background-color: #eeeeee; } .content { width: 800px; height: 320px; padding-left: 20px; margin: 80px auto; } .item { width: 230px; height: 300px; text-align: center; margin-right: 20px; background-color: #FFF; float: left; position: relative; top: 0; overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */ transition: all .5s; /* 从最初到鼠标悬停时的过渡 */ } .item img { margin-top: 30px; } .item .desc { position: absolute; left: 0; bottom: -80px; width: 100%; height: 80px; background-color: #ff6700; transition: all .5s; } /* 鼠标悬停时，让 item 整体往上移动5px，且加一点阴影 */ .item:hover { top: -5px; box-shadow: 0 0 15px #AAA; } /* 鼠标悬停时，让下方的橙色方形现身 */ .item:hover .desc { bottom: 0; } </style> </head> <body> <div class="content"> <div class="item"> <img src="./images/1.png" alt=""> </div> <div class="item"> <img src="./images/2.png" alt=""> <span class="desc"></span> </div> <div class="item"> <img src="./images/3.jpg" alt=""> <span class="desc"></span> </div> </div> </body> </html>

评论收藏

内容反馈