文档章节

使用before和after属性选择器

o
 osc_k1o54uky
发布于 07/14 09:23
字数 794
阅读 29
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

最近仿造了小米官网写了一遍,可以说是完全把官网给写完了。

官网中有一个log切换的动态效果,有点把我卡住了找方法找了许久,然后用一个简单的方法实现了:

先了解一下before和after两个属性选择器:

before:在元素之前插入内容;

after:在元素之后插入内容;

两个属性可以添加图片类型,可以添加文字,可以添加div块,所以在网页的应用范围很广。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3小米log切换</title>
    <style>
        .log{ 
            /* 
                设置外部盒子高55宽55文本居中。背景颜色为橙色,溢出隐藏,居中
            */
            text-align: center;
            cursor: pointer;
            overflow: hidden;
            width: 55px;
            height: 55px;
            background-color:rgb(255,103,0);
            margin:40px auto; 
        }
        /* 
            在div前插入一个宽为49 高49 top 3 left -49 将home.png移出log盒子,
            设置过度时间0.2s,背景图片为home.png
        */
        .log::before{
            width: 49px;
            height: 49px;
            content: "";
            position: relative;
            top: 3px;
            left:-49px;
            background: url('img/mi-home.png') center;
            display: inline-block;
            transition:all .2s ease 0s;
        }
        /* 
            在div前插入一个宽为49 高49 top -49 left 0 将log.png移出log盒子,
            设置过度时间0.2s,背景图片为log.png
        */
        .log::after{
            width: 49px;
            height: 49px;
            content: "";
            position: relative;
            top: -49px;
            left: 0;
            background: url('img/mi-logo.png') center;
            display: inline-block;
            transition:all .2s ease 0s;
        }
        /* 
           悬浮对两张图片进行偏移,达到切换效果
        */
        .log:hover::before{
            left: 0;
            
        }
        .log:hover::after{
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="log"></div>
</body>
</html>

在使用这两个属性时:content  是必不可少的。

除此之外:在写这个的过程中我对选择器有了更深一层的理解:

代码如下:

<!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>
        /* 
           设置div1的样式
        */
        .div1 {
            width: 400px;
            height: 200px;
            background-color: lawngreen;
        }
        /* 
           设置div2的样式
        */
        .div2 {
            width: 400px;
            height: 200px;
            background-color: lightcoral;
        }
        /* 
          设置div3的样式
        */
        .div3{
            width: 400px;
            height: 200px;
            background-color: olivedrab;
        }
        /* 
           设置div1的子div样式并隐藏
        */
        .div1>div{
            width: 200px;
            height: 100px;
            background-color: rgb(18, 53, 150);
            display: none;
        }
        /* 
          设置div2的子div样式并隐藏
        */
        .div2>div {
            width: 200px;
            height: 100px;
            background-color: rgb(165, 24, 24);
            display: none;
        }
        /* 第一个悬浮父元素修改其子元素div样式使子div显现 */
        .div1:hover>div{    
            display: inline-block;
        }
        /* 悬浮第一个div1修改其兄弟元素div2的背景颜色*/
        .div1:hover + .div2{    
            background-color: mediumvioletred;
        }
        /* 悬浮第一个div1修改其同级的div3的boder */
        .div1:hover ~ .div3{    
            border: 10px solid rgb(138, 46, 46);
        }
        /* 
           将css选择器一层层嵌套使用就可以实现简单的动画效果,也可以添加过度效果就会更加生动,
           css3的属性可以实现部分js功能,但不建议这样使用,复杂的动画效果使用js将会更加方便快捷
        */
    </style>
</head>

<body>
    <div class="div1">
        我是第一个div1
        <div>
            我是第一个div1的子div
        </div>
    </div>
    <div class="div2">
        我是第二个div2
        <div>
            我是第二个div2的子div
        </div>
    </div>

    <div class="div3">
        我是第三个div3
          <div>
            我是第三个div3的子div
          </div>
    </div>
</body>
</html>

使用的图片 

 

 

 

敲完此次案例对于代码的理解和熟练程度更加的清晰

个人学习,内容简略

 

https://www.w3school.com.cn/cssref/css_selectors.asp

o
粉丝 0
博文 60
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CDH5: 使用parcels配置lzo

一、Parcel 部署步骤 1 下载: 首先需要下载 Parcel。下载完成后,Parcel 将驻留在 Cloudera Manager 主机的本地目录中。 2 分配: Parcel 下载后,将分配到群集中的所有主机上并解压缩。 3 激...

cloud-coder
2014/07/01
6.8K
1
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.7K
1
JS框架--Cyer

Cyer是一个轻量、小巧的js框架,精简易懂的API设计,支持链式调用,有点jQuery的味道。核心部分为选择器(selector)、dom操作、event机制。暂不支持animate功能。版本更新到v1.0.3,增加domRe...

黄昌运
2013/03/06
2.1K
0
JavaScript 模板引擎--fragment.js

Fragment.js 允许你加载 html 碎片到任何元素中,只需要使用 data-fragment 属性。 <div data-fragment="fragment.html"></div> 也可通过 JSON 进行加载,如: <div data-fragment-json="fra......

匿名
2013/03/24
2.4K
0
libqt4json

libqt4jon 是一个使用 Qt QVariant 对象的 JSON 序列化和反序列化库。可系列化原生类型如 integer, double, QString, lists, maps, and QObject recursively. 只序列化通过 QObject Q_PROPER...

匿名
2013/03/29
376
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在Android中以像素为单位获取屏幕尺寸 - How to get screen dimensions as pixels in Android

问题: I created some custom elements, and I want to programmatically place them to the upper right corner ( n pixels from the top edge and m pixels from the right edge). 我创建......

javail
10分钟前
7
0
如何在不安装Microsoft Office的情况下用C#创建Excel(.XLS和.XLSX)文件?

问题: 如何在不使用运行代码的计算机上安装Excel的情况下使用C#创建Excel电子表格? 解决方案: 参考一: https://stackoom.com/question/dHZ/如何在不安装Microsoft-Office的情况下用C-创...

技术盛宴
40分钟前
7
0
如何使用pip升级所有Python软件包? - How to upgrade all Python packages with pip?

问题: Is it possible to upgrade all Python packages at one time with pip ? 是否可以通过pip一次升级所有Python软件包? Note : that there is a feature request for this on the off......

法国红酒甜
今天
9
0
活体检测+合成图鉴别面前,人脸“照片活化”黑产攻击一秒被擒

本文作者:y****n 如今,随着人脸技术的日趋成熟,新兴娱乐文化得到了极大的推动,尤其是随着 DeepFake、FaceSwap 等人脸编辑及生成技术的发展,虚拟主播、人脸合成带给人们全新的体验,但同...

百度开发者中心
昨天
12
0
如何在SQL Server中将多行文本合并为单个文本字符串?

问题: Consider a database table holding names, with three rows: 考虑一个包含名称的数据库表,该表具有三行: PeterPaulMary Is there an easy way to turn this into a single str......

富含淀粉
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部