采用过渡、定位制作小米 logo制作案例

题目描述

当鼠标移入到logo上的时候，左侧会滑出一个小房子，当鼠标移出logo的时候，恢复成原来的样子，并且中间的切换是有动画的
实现思路
（1）设置一个盒子的大小和logo图片的大小一样
（2）再给盒子加伪元素 before 和after
（3）给两个伪元素添加定位，使home图片的盒子位于盒子的右边
（4）谁过渡给谁加。两个伪元素都要过渡，两个都加
（5）采用hover的时候盒子移动
实现代码
（1）HTML

<div class="logo"></div>

(2)CSS

 <style>* {margin: 0;padding: 0;}.logo {position: relative;margin: 100px auto;width: 49px;height: 49px;line-height: 100px;background-color: #ff6700;}.logo::before {content: "";position: absolute;width: 49px;height: 49px;background: url(images/mi-logo.png) no-repeat center;}.logo::after {content: "";position: absolute;top: 0;left: 49px;width: 49px;height: 49px;transition: all 0.5s;background: url(images/mi-home.png) no-repeat right;}.logo:hover::after {left: 0;}.logo:hover::before {left: -49px;}

采用过渡、定位制作小米 logo制作案例相关推荐

人人都是原研哉：50秒制作小米新LOGO
看了小米的新logo,米粉不淡定了.纷纷表示我上我也行,雷总被骗了,甚至建议小米赶紧报警. 其实,从表面上看,新Logo只是从方变圆,但其背后融入了日本国际著名设计师原研哉对于"Alive& ...
轻松在线制作各种Logo标志
网上有很多提供在线按钮制作.文字标题制作.Logo制作服务的网站,它们可以非常方便了让大家轻松的获得效果出色的各类图标型的图片,下面就快来看看有哪些不错的网站能够做出精美的图标吧! 1.文字标签制作 ...
使用html+css+js制作小米首页
文章目录使用html+css+js制作小米首页 1.html制作小米官网页面结构(`index.html`) 2.使用css设置公共样式(`base.css`) 3.使用css设置页面元素样式(`i ...
案例：仿小米logo渐变效果练习
一.效果: 仿小米logo 二.布局思路三.代码: 代码如下(示例): <!DOCTYPE html> <html lang="en"><head& ...
寻声定位 matlab,一种自动调节范围大的寻声定位拍摄设备的制作方法
一种自动调节范围大的寻声定位拍摄设备的制作方法 [专利摘要]本实用新型涉及一种自动调节范围大的寻声定位拍摄设备,包括拍摄设备(1).声音识别模块(2).定向拾音模块(3).控制芯片(4).数据电源线( ...
用计算机制作数学PPT课件,使用flash制作数学课件经典案例.ppt
使用flash制作数学课件经典案例.ppt 当使用钢笔工具绘画时,可以创建直线段或是曲线段,也可以先画出直线段再调整线条上的点直到曲线段的造型符合用户的要求,这说明直线可以转换为曲线,实际上曲线也可转 ...
e3d教程做logo教程_非标自动化设计教程精选：电池侧面logo制作全自动丝印机
非标自动化设计教程精选:电池侧面logo制作全自动丝印机本视频为小丸子VIP课程节选,需要学习的朋友可以通过视频当中的联系方式联系我们咨询学习!!!每晚8点有免费直播体验课,欢迎莅临课堂学习交流. ...
【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置搜索框输入"格式化",勾选上如图三个选项 ...
【强推】Blender制作逼真人物角色完整案例视频教程
[强推]Blender制作逼真人物角色完整案例视频教程 [强推]Blender制作逼真人物角色完整案例视频教程时长53h 30m 1280X720 MP4 含教程工程文件共九大模块 130小节课程 ...

采用过渡、定位制作小米 logo制作案例

采用过渡、定位制作小米 logo制作案例相关推荐

最新文章

热门文章

采用过渡、定位 制作 小米 logo制作案例

采用过渡、定位 制作 小米 logo制作案例相关推荐

最新文章

热门文章

采用过渡、定位制作小米 logo制作案例

采用过渡、定位制作小米 logo制作案例相关推荐