css大屏动画效果

通过改变图片透明度实现图片呼吸效果

通过调整图片透明度，结合animation，实现图片呼吸效果

	.circle{
		/* 不透明度 */
		opacity: 1;
		/* 动画名称 */
		animation-name: breath;
		/* 动画时长3秒 */
		animation-duration: 1200ms;
		/* 动画速度曲线：以低速开始和结束 */
		animation-timing-function: ease-in-out;
		/* 播放次数：无限 */
		animation-iteration-count: infinite;
		/* Safari and Chrome */
		/* 动画名称 */
		-webkit-animation-name: breath;
		/* 动画时长3秒 */
		-webkit-animation-duration: 1200ms;
		/* 动画速度曲线：以低速开始和结束 */
		-webkit-animation-timing-function: ease-in-out;
		/* 播放次数：无限 */
		-webkit-animation-iteration-count: infinite;
	}
	/* 1.图标呼吸 */
	@keyframes breath {
		from {
			opacity: 1;
		}

		/* 动画开始时的不透明度 */
		/* 50% { */
		/* opacity: 0.8; */
		/* } 动画50% 时的不透明度 */
		to {
			opacity: 0.7;
		}

		/* 动画结束时的不透明度 */
	}

	@-webkit-keyframes breath {
		from {
			opacity: 1;
		}

		/* 动画开始时的不透明度 */
		/* 50% { */
		/* opacity: 0.8; */
		/* } 动画50% 时的不透明度 */
		to {
			opacity: 0.7;
		}

		/* 动画结束时的不透明度 */
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

效果图：（PS：锤子透明度不变 呼吸的是锤子下面的圈）
透明度为1：

透明度为0.7：

图片旋转动画

// 圈旋转动画
	@keyframes circleRotate {

		50% {
			transform: rotate(180deg);
			opacity: 1;
		}


		100% {
			transform: rotate(360deg);
			opacity: 1;
		}
	}
	div ::before {   // 伪元素
		content: '';    // 伪元素
		position: absolute;
		width: 4.125rem;
		height: 4.125rem;
		margin-top: -0.4rem;
		margin-left: -4.9rem;
		background: url(../assets/tupian.png) center no-repeat;
		animation: circleRotate 20s linear infinite normal;
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果图：（动画外圈旋转效果）

案件滚动配置

<div class="dataList" :data="dynamicCityList">
	<vue-seamless-scroll :data="dataList" :class-option="classOption">
		<div class="dataListItemConten">
			<div v-for="(item, index) in dataList" :key="index + 'jfah'"
				@click="loginSys(item.link)" class="dataListItem">
				<div class="dynamicNo">
					<div>{{ item.dynamicCityNo }}div>
				div>
				<div class="dynamicType">【{{ item.type }}】div>
				<div class="dynamicContent">{{ item.content }}div>
				<div class="dynamicSourse">【{{ item.sources }}】div>
				<div class="dynamicTime">{{ item.time }}div>
			div>
		div>
	vue-seamless-scroll>
div>
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import VueSeamlessScroll from 'vue-seamless-scroll/src';
export default {
	data() {
		return {
			dataList:[],
		}
	},
	computed: {
		//最新案件滚动配置
		classOption() {
			return {
				step: 0.2, // 数值越大速度滚动越快
				limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
				hoverStop: true, // 是否开启鼠标悬停stop
				direction: 1, // 0向下 1向上 2向左 3向右
				openWatch: true, // 开启数据实时监控刷新dom
				singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
				singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
				waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
			}
		},
	},
	components: {
		VueSeamlessScroll,		
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.dataList{
	width: 42.375rem;
	height: 13rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 1.2875rem auto 1.5875rem;
	overflow: hidden;
}

.dataListItem{
	height: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	color: #c9e1fd;
	font-size: 0.875rem;
	line-height: 2rem;
	font-family: SimHei;
	cursor: pointer;
}

.dataListItemConten> :nth-child(odd) {
	background: #007efe30;
}

.dynamicNo {
	height: 1.875rem;
	width: 1.25rem;
	line-height: 1.875rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 1.25rem;
	line-height: 1.875rem;
}

.dynamicNo>div {
	font-family: fantasy;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 1.25rem;
	border-radius: 0.625rem;
	margin: auto;
	background: #9c7b12;
	text-align: center;
}

.dynamicType {
	height: 1.875rem;
	width: 5.625rem;
	line-height: 1.875rem;
	text-align: center;
}

.dynamicContent {
	height: 1.875rem;
	width: 21.25rem;
	line-height: 1.875rem;
	white-space: nowrap;
	overflow: hidden;

	text-overflow: ellipsis;
}

.dynamicSourse {
	height: 1.875rem;
	width: 5.625rem;
	line-height: 1.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
}

.dynamicTime {
	height: 1.875rem;
	width: 7.375rem;
	line-height: 1.875rem;
	text-align: end;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

效果图：（列表无限滚动，左侧编号可看出效果）