第一模块
课程信息
课程名称:前端工程师
课程章节:过渡项目实战2
课程讲师:
第二模块
课程内容: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过渡效果实战课2</title> <style> *{ margin: 0; padding: 0; } .box{ width: 508px; height: 107px; margin:40px auto; } .box ul{ list-style: none; } .box ul li{ width: 107px; height: 107px; /* 子绝父相 */ position: relative; float: left; margin-right: 20px; } .box ul li::before{ content: ''; display: block; width: 107px; height: 107px; /* 旋转的是伪元素::before 而不是li */ transform: rotate(0); transition: transform 1s ease 0s; } .box ul li:nth-child(1)::before{ background-image: url(images/a_1.png); } .box ul li:nth-child(2)::before{ background-image: url(images/a_2.png); } .box ul li:nth-child(3)::before{ background-image: url(images/a_3.png); } .box ul li:nth-child(4)::before{ background-image: url(images/a_4.png); } .box ul li img{ position: absolute; width: 60px; height: 60px; top: 50%; margin-top: -30px; left: 50%; margin-left: -30px; transition: transform 1s ease 0s; } /* 背景圆环旋转一周 */ /* 当每个li被触碰的时候,里面的before进行旋转 */ .box ul li:hover::before{ transform: rotate(360deg); } /* 中心图标放大1.2倍 */ .box ul li:hover img{ transform: scale(1.2); } </style> </head> <body> <div class="box"> <ul> <li> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/icon1.svg" alt=""> </li> <li> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/icon2.svg" alt=""> </li> <li> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/icon3.svg" alt=""> </li> <li> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/icon4.svg" alt=""> </li> </ul> </div> </body> </html> 学习收获与心得:
由简入奢易,由奢入简难,做过一个看似光彩的项目,心理再难放平稳,去踏实的做一个看上去不那么酷的`产品。这种浮躁心态会严重影响今后的职业发展和成长。
光鲜靓丽的项目被各种老大关注,是难容忍犯错误的,傻瓜都知道犯错误在成长之初的重要性。
学习完毕打卡截图:
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦