好看的css预加载旋转动画 与 流光字体

简介: 好看的css预加载旋转动画 与 流光字体

今天刚好在做这个功能,就实现一个 预加载的动画效果,随手记录

一、预加载旋转动画

20210527153548522.png

Html

<view class="concentric_round"></view>

css

body {
  background-color: #e9967a;
}
.concentric_round {
  width: 200rpx;
  height: 200rpx;
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
}
.concentric_round::after,
.concentric_round::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  opacity: 0.4;
  border-radius: 100%;
}
.concentric_round::before {
  width: 50%;
  height: 50%;
  animation: beform_round 0.6s ease-in-out infinite alternate;
}
.concentric_round::after {
  width: 100%;
  height: 100%;
  animation: after_round 0.6s ease-in-out infinite alternate;
}
/* 外圆 */
@-webkit-keyframes after_round {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1.3);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@keyframes after_round {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1.3);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
/* 内圆 */
@-webkit-keyframes beform_round {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(0.7);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@keyframes beform_round {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(0.7);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

二、流光字体动画

20210527153548522.png

html

<view class="preload">F-REWARD</view>

css

.preload {
  width: 100%;
  font-weight: bold;
  font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;
  font-size: 2.5rem;
  text-align: center;
  background-image: -webkit-linear-gradient(left, black, transparent 25%, black 50%, transparent 75%, black);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 2s infinite linear;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
}
@-webkit-keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
相关文章
|
7月前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
228 73
|
8月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
137 34
|
10月前
|
移动开发 前端开发 JavaScript
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
297 63
|
10月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
8月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
111 22
|
10月前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
463 58
|
11月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
248 58
|
10月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
171 31
|
9月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
172 6
|
10月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
227 7

热门文章

最新文章