微信小程序 CSS 选择器::after和::before的简单使用

前两天看 文档 看到选择器那块儿的时候，前面4个基本都能理解： class ， #id ， element ， element, element ，但后面两个 ::after 和 ::before （文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。于是上网仔细查了下。以下是笔记

wxml

wxss

js

效果

其实，after和before可以添加的不仅仅是像上面这种字符串，以下是可以添加的常用的内容

具体的请参考这篇文章

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

（1）尺寸单位

（2）样式导入

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 05px = 1物理像素。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

一个小程序页面由四个文件组成，分别是：js

页面逻辑 、wxml

页面结构 、wxss

页面样式表 、json

页面配置 。把样式宝贝到当前页面同名的wxss文件里面就可以了

小程序开发使用JS+CSS+HTML5语言，小程序是基于微信平台的轻量级应用，它的开发是应用微信提供的小程序前端规范，结合企业自己开发的应用后端来制作的。

1、微信小程序开发所需要的语言比较特别，首先介绍一下需要使用到的文件类型大致分为：WXML（WeiXinMarkLanguage微信标记语言）、WXSS（WeiXinStyleSheet微信样式表）、JS（JavaScript小程序的主体）；小程序开发底价

2、首先是WXML，它与Android开发中的界面XML描述文件比较像，适合于程序界面的构建；

3、WXSS与前端中使用的CSS在语言上几乎没有差别可以直接通用；

4、JS文件这个与前段中使用的JS也是几乎没有区别，当然针对微信小程序新增了一些微信的API借口，并去除了一些没有必要的功能；

想要了解更多有关小程序开发的相关信息，推荐咨询猪八戒网。猪八戒网成立于2006年，是中国领先的企业服务平台，服务交易独角兽企业。猪八戒网现有注册用户2800万、在全国布局线下数字化创业园区超过100个。十余年来，累计有10万余个人通过平台孵化成长为公司，超过100万人通过平台实现灵活就业，千万企业通过平台解决专业服务需求；专业性值得选择。

1、利用样式实现小程序动画(用法和css用法相识)

wxml 文件

<image class="aniamtion" src="//images/page4jfif" style="width:200rpx;height:200rpx;  position:  relative;"></image>

wxss文件

aniamtion {

animation: mymove 5s infinite;

/ //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 /

}

@keyframes mymove {

from {

  / left: 0px; /

/ transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); /

transform: rotate3d(100,200,300,0deg);

}

to {

 / left: 200px; /

/ transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); /

transform: rotate3d(200,300,400,360deg);

}

}

2、 用小程序的API来实现动画

用wxcreateAnimation(object) 来创建一个动画 -->返回一个animation对象

创建一个动画实例 animation。

onReady: function () {

thisanimation = wxcreateAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

调用实例的方法来描述动画。

Animationstep() 表示一组动画的完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画

rotate(){

thisanimationrotate(150)step() //对动画进行简单的描述

thissetData({

         animation:thisanimationexport()

})

},

最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

thisanimationexport() 导出动画队列。export 方法每次调用后会清掉之前的动画 *** 作

rotate(){

thisanimationrotate(150)step() //对动画进行简单的描述

thissetData({ // 在setData({}) 导出动画数据数据给组件

         animation:thisanimationexport()

})

},

完整的wxml

<view class="container">

<view animation="{{animation}}" class="view">

将做动画的块

</view>

</view>

<button type="default" size="mini" bindtap="rotate">

旋转

</button>

完整的wxjs

Page({

data: {

animation:''

},

onReady: function () {

thisanimation = wxcreateAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

rotate(){

thisanimationrotate(150)step()translate(100)step()

thissetData({

animation:thisanimationexport()

})

}

})

3、用选择器来绑定组件来来实现组件的动画（小程序290 的库可用，版本不够会报thisanimate不是一个方法）

<text>pages/index7/index7wxml</text>

<view id="container" style="height: 100px; width: 100px; background-color: blue;">

container

</view>

<view class="block" style="height: 100px; width: 100px;background-color: #ccc;">

block

</view>

用选择器选择相应的组件进行相应的动画

进行关键帧的处理

onLoad: function () {

  thisanimate('#container', [

    { opacity: 10, rotate: 0, backgroundColor: '#FF0000' },

    { opacity: 05, rotate: 45, backgroundColor: '#00FF00' },

    { opacity: 10, rotate: 90, backgroundColor: '#FF0000' },

  ], 5000)

  thisanimate('block', [

    { scale: [1, 1], rotate: 0, ease: 'ease-out' },

    { scale: [15, 15], rotate: 45, ease: 'ease-in'},

    { scale: [2, 2], rotate: 90 },

  ], 5000)

},

}

4、用第三方的库 animationcss

需要做的有

从>

把 css 文件 改名成 wxss文件（可进行相应的需改，毕竟小程序的大小限制摆在那里）

把它引入到你的appwxss文件中

@import “动画文件的相对目录”

在用的时候把他和你的样式绑定

<view class="swing" style="height: 100px; width: 100px;background-color: #ccc;">

block

</view>

// 给类名为swing 的文件绑定swing 的动画

swing{

animation: swing 5s infinite;

}

小程序开发中的“块”通常指的是小程序页面的不同区域，也称为组件或模块。如果您想改变小程序中某个块的格式，可以采取以下方法：

1 CSS 样式：在小程序开发中，可以使用 CSS 样式来调整块的格式。例如，通过设置不同的样式属性（如宽度、高度、边框、背景颜色等）来调整块的外观。

2 使用自定义组件：自定义组件可以让您创建自己的块，并定义自己的样式和行为。您可以使用小程序提供的组件，也可以自己编写组件代码。要使用自定义组件，您需要在小程序页面中以组件的方式引用它。

3 调整布局：在小程序中，块的位置、大小和排列可以通过调整布局来实现。例如，使用 flex 布局可让块沿着主轴或交叉轴排列，从而实现不同的视觉效果。

无论您采用何种方法，都需要具备一定的 HTML、CSS 和 JavaScript 编程知识。建议您先学习相关基础知识，再尝试修改小程序中的块格式。

以上就是关于微信小程序 CSS 选择器::after和::before的简单使用全部的内容，包括:微信小程序 CSS 选择器::after和::before的简单使用、小程序wxss和css的区别、微信小程序 页面怎么引入css文件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！