HTML5+CSS3 Pink老师课后作业——小米logo过渡切换的实现

pink老师课后作业——小米logo过渡切换实现

基本思路

精灵图技术+伪类元素+过渡
准备一个div盒子设置放置图标的宽高。
当鼠标经过的时候，通过伪类，精灵图切换为另一张图片
PS:图片是自己使用ps切出来的

代码部分

HTML：

<body><div class="xmlg"></div></body>

CSS:

<style>.xmlg {width: 207px;height: 207px;margin: 0 auto;margin-top: 100px;background: url(../img/ximilogo.png);transition: all 0.5s;}.xmlg:hover{background: url(../img/ximilogo.png) no-repeat -246px,0px;transition: all 0.5s;}</style>

演示效果：

HTML5+CSS3 Pink老师课后作业——小米logo过渡切换的实现相关推荐

HTML5 + css3 + js 网页设计作业网页小游戏
用HTML5 + css3 + js 做的一个翻图片的网页小游戏,挺有意思的吧! 因为上网页课要交一个个人的网页设计作业,时间挺紧的,记得以前玩游戏偶尔看到一个翻转图片的小游戏,就想模仿着做一个! 目 ...
HTML5 第五章CSS3美化网页课后作业
制作北大青鸟课程介绍页面 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
hw1例题-李宏毅老师课后作业
写在前面跟着李宏毅老师从头开始学习深度学习,因此这里用CSDN记录深度学习的课后例题,需要注意的是以下代码来源于网上,应该是李老师的代码,版权不属于我,写这篇博客主要为了巩固自己关于机器(深度)学习 ...
js做简易ATM机-pink老师的作业
<script> var qian = 100; var order = prompt("1.存钱\n2.取钱\n3.显示余额\n4.退出") * 1; while ( ...
HTML5+CSS3构建同页面表单间的动画切换
[CSDN编译]导读:有开发者表示,HTML5将给个人开发者带来更多机遇.下面的稿件详细描述了一个唯美的动画效果,它实现了在同一个页面中进行登录表单和注册表单的转换.这些效果,完全由HTML5和CSS ...
使用HTML5和CSS3第一章HTLM5基础课后作业
第三题,制作聚美优品常见问题页面. <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
使用HTML5和CSS3开发电子商务网站第一章HTLM5基础课后作业
使用HTML5和CSS3开发电子商务网站第一章HTLM5基础课后作业第三题,制作聚美优品常见问题页面. <!DOCTYPE html> <html lang="en&qu ...
个人设计web前端大作业~ 酒店网页设计(HTML5+CSS3+Bootstrap)
个人设计web前端大作业~ 酒店网页设计(HTML5+CSS3+Bootstrap)瑞豪国际酒店临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要 ...
免费html5 css3大学生网页设计期末作业网页制作作业成品
html5 css3大学生网页设计期末作业网页制作作业成品布局技术:html5 css3 页面个数:6个网页元素:图文超链接表单效果图: 目录如下: <!DOCTYPE html&g ...
【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现 html代码 CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...

HTML5+CSS3 Pink老师课后作业——小米logo过渡切换的实现

基本思路

代码部分

HTML5+CSS3 Pink老师课后作业——小米logo过渡切换的实现相关推荐

最新文章

热门文章