【HTML+CSS】pink老师课后作业2——logo过渡切换的实现

最新推荐文章于 2022-11-15 18:12:11 发布
最新推荐文章于 2022-11-15 18:12:11 发布
阅读量1.1k 收藏 10
点赞数 4
分类专栏： 前端学习 HTML+CSS 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cherish_hyx/article/details/110245958
版权
本文介绍了pink老师的课后作业，内容涉及如何使用HTML和CSS实现logo的过渡切换效果。基本思路是设置一个大的盒子包含所有图标，通过鼠标悬停改变盒子位置，展示不同logo。提供了HTML和CSS代码实现，并展示了不悬停和悬停时的效果。
摘要由CSDN通过智能技术生成

【HTML+CSS】pink老师课后作业2——logo过渡切换的实现

在这里插入图片描述

基本思路

把要切换的图标放在一个大的盒子里 另外准备一个显示的盒子。
当鼠标经过时，通过移动打盒子的位置，使需要显示的部分摆在显示的盒子中间，其余部分隐藏。
在这里插入图片描述
在这里插入图片描述

代码实现

HTML部分：

<body>
    <div class="grandfather">
        <div class="father">
            <span class="smile"
最低0.47元/天 解锁文章
Cherish_1127
关注
专栏目录
前端学习（835）：开关灯案例
歌谣的博客
04-13 546
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
【HTML+CSS】pink老师课后作业1——购物格模块的实现
Cherish_hyx的博客
11-27 673
【前端入门】pink老师课后作业——小米进度条&logo过渡模块的实现 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代
过渡效果练习
qq15045846160的博客
03-18 240
一、弹性效果 1.不要过渡，先编写基本界面 2.修改我们认为需要修改的属性 3.再回过头去给被修改属性的那个元素添加过渡即可 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;过渡之弹性效果&lt;/title&gt;
pink老师 css课后作业(商品页面)纯css
m0_69551472的博客
08-01 265
pink老师课后作业
CSS3_过渡练习01
weixin_36282409的博客
11-17 253
&amp;lt;style&amp;gt; #box{ width: 300px; height: 300px; border: 1px solid red; margin: 0 auto; /*第一个值表示给哪个属性制造过渡,第二个实现1s*/ transition: top 1s;...
HTML5+CSS3期末大作业——城市简介源码
05-05
在这个“HTML5+CSS3期末大作业——城市简介源码”项目中，学生或开发者将有机会实践这两门技术，构建一个介绍特定城市的网页。 HTML5作为最新的超文本标记语言版本，引入了许多新特性，旨在提高网页的交互性和可用...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML+CSS制作简单的家乡网页 ——我的家乡介绍广东 web前端期末大作业
weixin__BJ050106的博客
08-11 2048
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
HTML+CSS静态页面网页设计作业——我的家乡-四川成都(4页) HTML+CSS+JavaScript
12-29 5372
HTML5期末大作业：我的家乡网站设计——我的家乡-四川成都(4页) HTML+CSS+JavaScript 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电
和pink老师学习CSS
qq_45598568的博客
07-19 110
1.选择器 选择器分为基础选择器和复合选择器两个大类 基础选择器： 基础选择器 作用 特点 用法 标签选择器 可以设置所有相同的标签的属性 不能差异化选择 p{color: red;} 类选择器 可以设置一个或多个标签 可以根据需求选择 .nav{color: red;} id选择器 一次只能设置一个 id属性只能在每个html文档中出现一次 #nav{color :red;} 通配符选择器 设置所有标签
pink老师js案例---tab栏切换案例
最新发布
m0_57030573的博客
11-15 653
【代码】pink老师js案例---tab栏切换案例。
pink老师课后作业
m0_61837007的博客
11-12 1568
1.字符串长度 2.取出指定位置的字符如：0、3、5、9等 3.查找指定字符是否在以上字符串中存在，如i\c\b 如果存在就会返回索引号 indexof（'要查找的值'，从第几位开始（不写则默认从0）） 4.替换指定的字符 如：g替换成22，ss替换为b replace('被替换的数','需要换为的值') 5.截取指定开始位置到结束位置的字符串如1-5的字符串 左闭右开 6.找出以上字符串中出现次数最多的字符和出现的次数（有可能有不同的字符但次数相同） <!DOCTYPE html&g.
实现小米logo渐变的效果
weixin_45558236的博客
08-17 620
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .red {
前端学习（259）:flex-flow
歌谣的博客
12-30 407
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
HTML5+CSS3 Pink老师课后作业——小米logo过渡切换的实现
weixin_45328723的博客
04-23 1509
pink老师课后作业——小米logo过渡切换实现 基本思路 精灵图技术+伪类元素+过渡 准备一个div盒子设置放置图标的宽高。 当鼠标经过的时候，通过伪类，精灵图切换为另一张图片 PS:图片是自己使用ps切出来的 代码部分 HTML： <body> <div class="xmlg"> </div> </body> CSS: <style> .xmlg { width: 207px;
小白初上手HTML+CSS 仿写小米官网logo动画
o__o__o__o的博客
10-16 2584
小白初上手HTML+CSS 仿写小米官网logo动画
Vue 组件切换的过渡
虔诚带着决然
08-07 1786
Vue 组件切换的过渡 上一章博客中，实现了组件的切换，不过对于有强迫症的码农来说，没有实现过渡，组件的切换就显得很突兀，下面就为他们加上过渡效果来增加用户体验 声明组件 &lt;script&gt; //组件名称是 字符串 Vue.component('login',{ template :'&lt;h3&gt;登陆组件&lt;/h3&gt;' ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值