1.物体滚动效果

 <div class="box"><div class="boxLoading"></div></div>

<style>.boxLoading {width: 50px;height: 50px;margin: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}.boxLoading:before {content: '';width: 50px;height: 5px;background: #fff;opacity: 0.7;position: absolute;top: 59px;left: 0;border-radius: 50%;animation: shadow .5s linear infinite;}.boxLoading:after {content: '';width: 50px;height: 50px;background: #075222;animation: animate 0.6s linear infinite;position: absolute;top: 0;left: 0;border-radius: 3px;}@keyframes animate {17% {border-bottom-right-radius: 3px;}25% {transform: translateY(9px) rotate(22.5deg);}50% {transform: translateY(18px) scale(1, .9) rotate(45deg);border-bottom-right-radius: 40px;}75% {transform: translateY(9px) rotate(67.5deg);}100% {transform: translateY(0) rotate(90deg);}}@keyframes shadow {0%,100% {transform: scale(1, 1);}50% {transform: scale(1.2, 1);}}
</style>

2.音乐播放效果

  <div class="music"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>

<style>.music {position: absolute;top: 0px;bottom: 0px;left: 0px;right: 0px;margin: auto;width: 175px;height: 100px;}.music span {display: block;background: #e04960;width: 7px;height: 100%;border-radius: 14px;margin-right: 5px;float: left;}.music span:last-child {margin-right: 0px;}.music span:nth-child(1) {animation: load 2.5s 1.4s infinite linear;}.music span:nth-child(2) {animation: load 2.5s 1.2s infinite linear;}.music span:nth-child(3) {animation: load 2.5s 1s infinite linear;}.music span:nth-child(4) {animation: load 2.5s 0.8s infinite linear;}.music span:nth-child(5) {animation: load 2.5s 0.6s infinite linear;}.music span:nth-child(6) {animation: load 2.5s 0.4s infinite linear;}.music span:nth-child(7) {animation: load 2.5s 0.2s infinite linear;}.music span:nth-child(8) {animation: load 2.5s 0s infinite linear;}.music span:nth-child(9) {animation: load 2.5s 0.2s infinite linear;}.music span:nth-child(10) {animation: load 2.5s 0.4s infinite linear;}.music span:nth-child(11) {animation: load 2.5s 0.6s infinite linear;}.music span:nth-child(12) {animation: load 2.5s 0.8s infinite linear;}.music span:nth-child(13) {animation: load 2.5s 1s infinite linear;}.music span:nth-child(14) {animation: load 2.5s 1.2s infinite linear;}.music span:nth-child(15) {animation: load 2.5s 1.4s infinite linear;}@keyframes load {0% {background: #409EFF;transform: scaleY(0.08);}50% {background: #F56C6C;transform: scaleY(1);}100% {background: #409EFF;transform: scaleY(0.08);}}
</style>

3.交错动画loading效果

 <div class="loading"><div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="drop"></div></div>

 <style lang="scss" scoped>
body {display: flex;height: 100vh;justify-content: center;align-items: center;background: #222;
}.loading {position: fixed;left: 500px;right: 0;margin: 0 auto;top: 300px;$colors: #7ef9ff,#89cff0,#4682b4,#0f52ba,#000080;display: flex;.drop {position: relative;width: 2em;height: 2em;margin: 0.8em;border-radius: 50%;&::before {position: absolute;content: "";width: 100%;height: 100%;background: inherit;border-radius: inherit;animation: wave 2s ease-out infinite;}@for $i from 1 through 5 {&:nth-child(#{$i}) {background: nth($colors, $i);&::before {animation-delay: $i * 0.2s;}}}}
}@keyframes wave {50%,75% {transform: scale(2.5);}80%,100% {opacity: 0;}
}
</style>

4.小球移动

 <div class="move"><span></span></div>

.move {width: 150px;height: 4px;border-radius: 2px;margin: 0 auto;margin-top: 300px;position: relative;background: #409eff;-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;animation: changeBgColor 1.04s ease-in infinite alternate;
}
.move span {display: inline-block;width: 30px;height: 30px;border-radius: 50%;background: #409eff;position: absolute;margin-top: -30px;margin-left: -8px;-webkit-animation: changePosition 1.04s ease infinite alternate;animation: changePosition 1.04s ease infinite alternate;
}
@-webkit-keyframes changeBgColor {0% {background: lightblue;}50% {background: red;}100% {background: #409eff;}
}
@-webkit-keyframes changePosition {0% {background: lightblue;}50% {background: red;}100% {margin-left: 142px;background: #409eff;}
}

5.电影闭幕效果(这个gif太大了，只能搞个图片将就一下，各位ikun一看就懂)

  <div class="container"><div class="box"></div><div class="text"><p>为坤护航,伴坤远航</p><br><p>你如此黑我家哥哥,难道不吃我家哥哥的肉吗?</p></div></div>

 .box {height: 100%;width: 100%;position: absolute;background: url('https://img0.baidu.com/it/u=2771945787,9120044&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500') no-repeat;background-size: cover;animation: fade-away 3s linear forwards;
}
.text {position: absolute;line-height: 55px;color: #fff;font-size: 36px;text-align: center;left: 50%;top: 50%;transform: translate(-50%, -50%);opacity: 0;animation: show 2s cubic-bezier(0.74, -0.1, 0.86, 0.83) forwards;
}@keyframes fade-away {30% {filter: brightness(1);}100% {filter: brightness(0);}
}
@keyframes show {20% {opacity: 0;}100% {opacity: 1;}
}

这些css 动画效果你一定要收藏相关推荐

CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
CSS动画效果构成分析
CSS动画特效的基本构成文章目录 CSS动画特效的基本构成 CSS动画效果一.动画轨迹,运动路径 1.规定目标样式属性transfrom: 二.控制运动路径 transition animati ...
css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
Html/CSS动画效果个人练习（11）
CSS动画效果个人练习第十一天 Html源代码 <!doctype html> <html> <head> <meta charset="utf-8 ...
jQuery及css动画效果
1.jQuery动画效果首先引入jQuery,进入链接地址:https://www.bootcdn.cn/jquery/ <!DOCTYPE html> <html lang=&q ...
css动画效果：鼠标移上去底部线条从中间往四周动画延伸
css动画效果:鼠标移上去底部线条从中间往四周动画延伸如图: .top-nav a:after {content: ' ';position: absolute;z-index: 2;bottom: ...

这些css 动画效果你一定要收藏

1.物体滚动效果

2.音乐播放效果

3.交错动画loading效果

4.小球移动

5.电影闭幕效果(这个gif太大了，只能搞个图片将就一下，各位ikun一看就懂)

这些css 动画效果你一定要收藏相关推荐

最新文章

热门文章