米兔练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>米兔练习</title><!-- <link rel="stylesheet" href="../chujicss/css/11.27.03.css"> --><style>.box{width: 132px;height: 271px;margin: 0 auto;background-image: url(../chujicss/chujicss\ img/11.27.02.png);background-position: 0 0;transition:all 1s steps(3);}.box:hover{background-position:-396px 0;  /*自左向右*/}.box1{width: 120px;height: 136px;background-image: url(../chujicss/chujicss\ img/11.30.04.webp);margin: 0 auto;background-position: 0 0;transition: all 1s steps(9) ;/*10-1=9*/}.box1:hover{background-position: -1080px 0;/*9*120=1080*/}</style>
</head>
<body><div class="box"></div><div class="box1"></div>
</body>
</html>

运行结果为：

代码引用的图片是：

前端的学习之路：初级CSS---米兔练习相关推荐

前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
我的前端学习之路-----HTML+css（一）
(本条为个人学习随手笔记,以基础知识为主) 我的推荐练习网站:https://www.freecodecamp.org/learn (免费的前端练习网站,像是闯关,推荐指数★★★★★) 推荐学习网站: ...
前端学习之路之CSS （一）
Infi-chu: http://www.cnblogs.com/Infi-chu/ 简介: CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 ...
前端学习之路之CSS （三）
Infi-chu: http://www.cnblogs.com/Infi-chu/ 创建CSS 有三种方法:外部样式表.内部样式表.内联样式. 优先级:内联样式>内部样式>外部样式表&g ...
前端的学习之路：初级CSS---w3cschool的导航条
w3cschool的导航条 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
前端学习之路—用css画一个圆形，三角形，椭圆
用css画一个圆形,三角形,椭圆一.圆形 css代码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
前端的学习之路：初级HTML---超链接的锚点定位
超链接的锚点定位 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...

前端的学习之路：初级CSS---米兔练习

米兔练习

前端的学习之路：初级CSS---米兔练习相关推荐

最新文章

热门文章