本文已参与[新人创作礼]活动，一起开启掘金创作之路

css伪类使用：

1. 清除浮动

<style>
.left {float: left}
.right {float: right}
.clear:after {
    content: '';
    clear: both;
    display: block;
}
</style>

<div class="container clear">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

2.窗口小三角：

``html

.box { width: 200px; height: 100px; border-radius: 5px; background: #fff; position: relative; } .box:after { content: ''; position: absolute; bottom: -20px; right: 20px; width: 0; height: 0; border-top: 10px solid #fff; border-bottom: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; } ```

3.字体图标 （iconfont字体）：

.music:before {
    content: '\266C';
}

4. 没有内容的div控制显示：

<style>
<!--:empty为空时匹配-->
div:empty:after {
    content: '暂无数据';
    color: red;
}
</style>

<div>有内容数据</div>
<div></div>

5.loading提示：

<style>
.loading_title::after{
      content: '';
      width: 30px;
      animation: titleView 2s linear infinite;
    }
    @keyframes titleView{
      0%{
        content: '.';
      }
      33%{
        content: '..';
      }
      66%{
        content: '...';
      }
    }
</style>
<div class="loading_title">加载中</div>

6.其他的：

$("div:has('.mini')")//查询存在mini 的div

$("div:empty") //内容为空的div

$("div:odd") //偶数div

$("div:even") //奇数div

$("div:contains('di')") //选择所有包括di字符串的元素。。。包括body

$("div:parent")   //有子元素的都是非空的，，所有选择父元素parent

$("div:not(:empty)") //查询非空的div

---

css 使用多个iconfont库

1.引入：

@font-face {
  font-family: 'dianzan';  /* Project id 2777465 */
  src: url('//at.alicdn.com/t/font_2777465_0u9lgeg5emrr.woff2?t=1639982110263')     format('woff2'),
       url('//at.alicdn.com/t/font_2777465_0u9lgeg5emrr.woff?t=1639982110263') format('woff'),
       url('//at.alicdn.com/t/font_2777465_0u9lgeg5emrr.ttf?t=1639982110263') format('truetype');
}


@font-face {
  font-family: 'tongxunlu';  /* Project id 3125055 */
  src: url('//at.alicdn.com/t/font_3125055_b7a2vyl6pdt.woff2?t=1641544852156') format('woff2'),
       url('//at.alicdn.com/t/font_3125055_b7a2vyl6pdt.woff?t=1641544852156') format('woff'),
       url('//at.alicdn.com/t/font_3125055_b7a2vyl6pdt.ttf?t=1641544852156') format('truetype');
}

2.定义class :

.iconfont{
	font: normal normal normal 14px/1 "dianzan","orderIconAL";
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

**3.使用： **

<i slot="suffix" class="iconfont icon-biyan"></i>

---

css实现图片翻转动画

  主要是将两张图片重叠放在一起，然后实现翻转使用 backface-visibility:hidden  属性，让正面图的背面不显示

效果:

html:

<view class="icon_img">
//正面图
			<image class="zhengImg rotateAmview" src="http://cdn.za3.cn/official_img/index/home_bg.png"></image>
//背面图
			<view class="fanImg rotateAmview">
				<image  src="http://cdn.za3.cn/official_img/index/home_video.png"></image>
			</view>
		</view>

css:

.icon_img{
		width: 350rpx;
		height: 300rpx;
		position: relative;
		margin: 0 auto;
		.zhengImg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index:1;
			backface-visibility:hidden;
		}
		.fanImg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			image{
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transform: rotateY(180deg);
			}
		}
		@keyframes rotateAm{
				0%{
					transform: scale(1,1) translate3d(0, 0, 0) rotateY(0deg);
					bottom: 0;
				}
				5%{
					transform: scale(1.4,0.6);
					bottom: 3%;
				}
				10%{
					transform: scale(1,1);
					bottom: 0;
				}
				15%{
					transform:scale(1,1) translate3d(0, 0, 0) rotateY(180deg);
				}
				
				50%{
					transform:scale(1,1) translate3d(0, 0, 0) rotateY(180deg);
				}
				55%{
					transform: scale(1.4,0.6) rotateY(180deg);
					bottom: 3%;
				}
				60%{
					transform: scale(1,1) rotateY(180deg);
					bottom: 0;
				}
				65%{
					transform: scale(1,1) translate3d(0, 0, 0) rotateY(0deg);
				}
				
			}
			.rotateAmview{
				transform:translate3d(0, 0, 0) ;
				transform-origin: center center;
				animation: rotateAm 12s  linear  infinite;
				animation-fill-mode: forwards;
				position: absolute;
				bottom: 0;
				left: calc(50% - 43rpx);
			}
	}