css大屏动画效果
图片旋转、列表无限滚动、图片显隐
·
css大屏动画效果
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;
}
/* 动画结束时的不透明度 */
}
效果图:(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;
}
效果图:(动画外圈旋转效果)
案件滚动配置
<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>
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,
}
}
.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条内容
所有评论(0)