旋转的沙漏ui动画特效

最新推荐文章于 2023-02-05 13:51:36 发布
最新推荐文章于 2023-02-05 13:51:36 发布
阅读量441 收藏 1
点赞数 2
分类专栏： 网页特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45959525/article/details/107246575
版权

纯css3绘制卡通沙漏，当沙漏滴完，自动旋转沙漏动画特效。
在这里插入图片描述

<body>
<div class="title">
    Give it a minute...
</div>
<div class="container">
    <div class="hourglass">
        <div class="top"></div>
        <div class="bottom">
            <div class="bottom_sand"></div>
        </div>
        <div class="mid"></div>
        <div class="drops">
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
            <div class="drop"></div>
        </div>
        <div class="woods">
            <div class="wood"></div>
            <div class="wood"></div>
        </div>
        <div class="glares">
            <div class="glare"></div>
            <div class="glare"></div>
            <div class="glare"></div>
            <div class="glare"></div>
        </div>
    </div>
</div>
</body>

* {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  font-family: 'Yellowtail', cursive;
  background-color: #eee;
  color: #777;
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.title {
  font-size: 24px;
  width: 420px;
  text-align: left;
}

.container {
  position: relative;
  width: 420px;
  height: 420px;
  border: 2px solid #fff;
  border-radius: 4px;
}

.hourglass {
  position: relative;
  width: 100;
  height: 100%;
  -webkit-animation: rotateGlass 60s ease-in-out infinite;
          animation: rotateGlass 60s ease-in-out infinite;
}
@-webkit-keyframes rotateGlass {
  0%, 90% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.15));
            filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.15));
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-filter: drop-shadow(-2px -4px 8px rgba(0, 0, 0, 0.15));
            filter: drop-shadow(-2px -4px 8px rgba(0, 0, 0, 0.15));
  }
}
@keyframes rotateGlass {
  0%, 90% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.15));
            filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.15));
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-filter: drop-shadow(-2px -4px 8px rgba(0, 0, 0, 0.15));
            filter: drop-shadow(-2px -4px 8px rgba(0, 0, 0, 0.15));
  }
}
.wood {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: saddlebrown;
  width: 220px;
  height: 30px;
  border-radius: 5px;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.25));
  background-size: 200%, 100%;
  -webkit-animation: woodGlr 60s infinite linear;
          animation: woodGlr 60s infinite linear;
}
.wood:nth-child(1) {
  top: 20px;
}
.wood:nth-child(2) {
  bottom: 20px;
}
@-webkit-keyframes woodGlr {
  0%, 90% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@keyframes woodGlr {
  0%, 90% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
.top {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 200px;
  height: 110px;
  border: 2px solid saddlebrown;
  border-radius: 20px 20px 200px 200px;
  -webkit-transform: translateX(-50%) scale(1, 1.5);
          transform: translateX(-50%) scale(1, 1.5);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  overflow: hidden;
}
.top::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: sandybrown;
  -webkit-animation: sandHeightTop 60s linear infinite;
          animation: sandHeightTop 60s linear infinite;
  -webkit-filter: blur(3px);
          filter: blur(3px);
}
@-webkit-keyframes sandHeightTop {
  0% {
    height: 100%;
  }
  90%, 100% {
    height: 0%;
  }
}
@keyframes sandHeightTop {
  0% {
    height: 100%;
  }
  90%, 100% {
    height: 0%;
  }
}
.bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 110px;
  border: 2px solid saddlebrown;
  border-radius: 200px 200px 20px 20px;
  -webkit-transform: translateX(-50%) scale(1, 1.5);
          transform: translateX(-50%) scale(1, 1.5);
  -webkit-transform-origin: top;
          transform-origin: top;
  overflow: hidden;
}
.bottom_sand {
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: sandybrown;
  -webkit-transform: scale(3, 1);
          transform: scale(3, 1);
  -webkit-animation: sandTop 60s linear infinite;
          animation: sandTop 60s linear infinite;
}
.bottom_sand::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 5px;
  background-color: sandybrown;
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
  -webkit-animation: sandAngle 60s linear infinite;
          animation: sandAngle 60s linear infinite;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
@-webkit-keyframes sandTop {
  0% {
    top: 135%;
  }
  90%, 100% {
    top: 20%;
  }
}
@keyframes sandTop {
  0% {
    top: 135%;
  }
  90%, 100% {
    top: 20%;
  }
}
@-webkit-keyframes sandAngle {
  0% {
    border-radius: 5px;
  }
  90%, 100% {
    border-radius: 50px;
  }
}
@keyframes sandAngle {
  0% {
    border-radius: 5px;
  }
  90%, 100% {
    border-radius: 50px;
  }
}
.mid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 6px;
  border: solid saddlebrown;
  border-width: 0 3px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center;
          transform-origin: center;
  background-color: sandybrown;
}
.mid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: sandybrown;
  width: 12px;
  height: 14px;
  border-radius: 50%;
  -webkit-filter: blur(3px);
          filter: blur(3px);
}

.drop {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: sandybrown;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  --dropx: -50%;
  -webkit-animation: sandDrop 0.6s ease-in infinite, dropVis 60s linear infinite;
          animation: sandDrop 0.6s ease-in infinite, dropVis 60s linear infinite;
}
.drop:nth-child(1) {
  -webkit-animation-delay: 0s, 60s;
          animation-delay: 0s, 60s;
  --dropx: -100%;
}
.drop:nth-child(2) {
  -webkit-animation-delay: 0.06s, 60s;
          animation-delay: 0.06s, 60s;
  --dropx: 30%;
}
.drop:nth-child(3) {
  -webkit-animation-delay: 0.12s, 60s;
          animation-delay: 0.12s, 60s;
  --dropx: -40%;
}
.drop:nth-child(4) {
  -webkit-animation-delay: 0.18s, 60s;
          animation-delay: 0.18s, 60s;
  --dropx: 90%;
}
.drop:nth-child(5) {
  -webkit-animation-delay: 0.24s, 60s;
          animation-delay: 0.24s, 60s;
  --dropx: 20%;
}
.drop:nth-child(6) {
  -webkit-animation-delay: 0.3s, 60s;
          animation-delay: 0.3s, 60s;
  --dropx: -50%;
}
.drop:nth-child(7) {
  -webkit-animation-delay: 0.36s, 60s;
          animation-delay: 0.36s, 60s;
  --dropx: 80%;
}
.drop:nth-child(8) {
  -webkit-animation-delay: 0.42s, 60s;
          animation-delay: 0.42s, 60s;
  --dropx: 10%;
}
.drop:nth-child(9) {
  -webkit-animation-delay: 0.48s, 60s;
          animation-delay: 0.48s, 60s;
  --dropx: -60%;
}
.drop:nth-child(10) {
  -webkit-animation-delay: 0.54s, 60s;
          animation-delay: 0.54s, 60s;
  --dropx: 70%;
}
@-webkit-keyframes sandDrop {
  from {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  to {
    top: calc(50% + 160px);
    -webkit-transform: translate(var(--dropx), -50%) scale(0.25);
            transform: translate(var(--dropx), -50%) scale(0.25);
  }
}
@keyframes sandDrop {
  from {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  to {
    top: calc(50% + 160px);
    -webkit-transform: translate(var(--dropx), -50%) scale(0.25);
            transform: translate(var(--dropx), -50%) scale(0.25);
  }
}
@-webkit-keyframes dropVis {
  0% {
    opacity: 0;
  }
  1%, 100% {
    opacity: 1;
  }
}
@keyframes dropVis {
  0% {
    opacity: 0;
  }
  1%, 100% {
    opacity: 1;
  }
}
.glare {
  position: absolute;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  width: 120px;
  height: 80px;
  border-radius: 50%;
  border-style: solid;
  border-width: 0 0 15px 0;
}
.glare:nth-child(1) {
  top: 19%;
  left: 29%;
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
  -webkit-animation: glrClr1 60s infinite linear;
          animation: glrClr1 60s infinite linear;
}
.glare:nth-child(2) {
  bottom: 19%;
  left: 29%;
  -webkit-transform: rotate(110deg);
          transform: rotate(110deg);
  -webkit-animation: glrClr1 60s infinite linear;
          animation: glrClr1 60s infinite linear;
}
.glare:nth-child(3) {
  top: 19%;
  right: 29%;
  -webkit-transform: rotate(-70deg);
          transform: rotate(-70deg);
  -webkit-animation: glrClr2 60s infinite linear;
          animation: glrClr2 60s infinite linear;
}
.glare:nth-child(4) {
  bottom: 19%;
  right: 29%;
  -webkit-transform: rotate(-110deg);
          transform: rotate(-110deg);
  -webkit-animation: glrClr2 60s infinite linear;
          animation: glrClr2 60s infinite linear;
}
@-webkit-keyframes glrClr1 {
  0%, 90% {
    border-color: rgba(255, 255, 255, 0.85);
  }
  100% {
    border-color: rgba(0, 0, 0, 0.15);
  }
}
@keyframes glrClr1 {
  0%, 90% {
    border-color: rgba(255, 255, 255, 0.85);
  }
  100% {
    border-color: rgba(0, 0, 0, 0.15);
  }
}
@-webkit-keyframes glrClr2 {
  0%, 90% {
    border-color: rgba(0, 0, 0, 0.15);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.85);
  }
}
@keyframes glrClr2 {
  0%, 90% {
    border-color: rgba(0, 0, 0, 0.15);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.85);
  }
}
W Y L
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HTML——变幻粒子】（效果+代码）| HTML前端时间沙漏特效 | HTML粒子沙漏特效 | 粒子沙漏特效（附代码）
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
10-06 2574
分享一个HTML——变幻粒子的特效，希望大家喜欢！【HTML——变幻粒子】（效果+代码）| HTML前端时间沙漏特效 | HTML粒子沙漏特效 | 粒子沙漏特效（附代码）
H5 Canvas时间沙漏动画特效
06-24
H5 Canvas时间沙漏动画特效是一款可以翻转的三角形沙漏翻转动画特效。
加载中旋转沙漏
星云
06-12 364
一些网站或者APP在加载新东西的时候，往往会给出一个好看有趣的Loading图，大部分的Loading样式都可以使用CSS3制作出来，它不仅比直接使用gif图简单方便，还能节省加载时间和空间。下面介绍常见的一些Loading动画效果图的制作方法。...
【CSS】使用css绘制一个沙漏
Riptide
06-11 2503
现在有一个需求，绘制一个沙漏，像下面这样：其实如果单纯绘制这样一个 “静态”的沙漏，很简单，因为我们都知道怎么画三角形，使用border即可做到，黑边我们在外面增加一个div即可。或者给一个上下边框为黑色2px的div增加一个::after or ::before伪元素即可。但是我们需要这个沙漏是“动态”的，比如说我们可以控制并且显示它的进度，就像下面这样：当然仍然是比较简陋的，
html5 canvas可翻转时间沙漏动画特效
06-11
一款创意个性的html5 canvas可翻转时间沙漏动画特效，可以点击翻转按钮将三角形沙漏翻转过来。
CSS3 SVG网页沙漏加载动画特效
11-05
CSS3 SVG网页沙漏加载动画特效
【5毛特效】在等待过程中，如何用CSS3实现一个沙漏的动画效果
椰卤工程师的个人博客
08-07 432
Animation <img src={img2} alt="" className={classes.insideIcon} /> '@global': { '@keyframes turn': { '0%': { WebkitTransform: 'rotate(0deg)' }, '25%': { WebkitTransform: 'rotate(180deg)'
教你用CSS实现漂亮的时钟动画.
Blog沙漏在下雨
03-28 474
猜猜上面的时钟是怎么制作的？ 想不想只用一个CSS就实现这么炫酷的动画呢？ 还不快来学习吧 ! - 动画帧 - 背景渐变 - var() 和 calc() 的使用 - flex布局的场景 - 多个动画操作 - 延迟动画的使用
一个用js写的沙漏程序 hourglass
mxc530的博客
11-05 3470
一个用js写的动态沙漏程序
分享115个JS特效动画效果，总有一款适合您
zy0412326的专栏
02-05 1298
js
安卓自定义View之加载进度条
06-27
安卓自定义View之加载进度条
app_hourglass:具有可变计时器的开放源Android沙漏计时器应用程序。 https
05-14
滴漏 #################此存储库已存档，并且是只读的。 请访问 ，以获取此存储库的开放和可编辑版本。 我所有的存储库都已复制到GitLab。 请张贴任何问题，评论或在那工作。 谢谢-AlaskaLinuxUser。 ################# 具有可变计时器的开放源Android沙漏计时器应用程序。 此应用程序在Apache2.0许可协议下被许可。 欢迎您将本材料用于您自己的应用和目的。 这个应用程式是在Android Studio 4以上版本的Android Studio中建立的。
CSS3+SVG实现的时间沙漏动画特效特效代码
03-20
CSS3+SVG实现时间沙漏特效是一款逼真的时间漏斗CSS3动画特效代码，可自动翻转，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。
牛逼的canvas粒子沙漏动画
10-23
图片粒子沙漏动画，很适合需要酷的网站 欢迎下载使用。
纯css3绘制沙漏动画特效
06-24
纯css3绘制沙漏动画特效是一款卡通沙漏工作特效，当沙漏滴完，自动旋转沙漏动画特效。
H5 Canvas时间沙漏动画特效特效代码
03-20
H5 Canvas时间沙漏动画特效是一款可以翻转的三角形沙漏翻转动画特效。
cocos2d-x动作、特效和动画（三）旋转和跳跃动作
果汁的专栏
01-15 8645
旋转动作和跳跃动作都很容易理解，就一起记下。 CCrotateTo和CCRotateBy，CCRotateBy是CCRotateTo的子类。CCRotateTo和CCRotateBy都是两个参数，第一个参数是时间间隔，第二个参数是旋转的角度。 //旋转动作 CCActionInterval * actionTo=CCRotateTo::create(2,45);//时间 度数 CCActi
纯css图片自动旋转动画
猿学
08-30 7063
纯css 图片自动旋转动画。
如何使用纯CSS3实现一个沙漏动画
陈小峰（iefreer）的专栏
03-30 7248
要实现一个沙漏动画，我们首先需要实现一个漏斗的几何形状。漏斗图形我们接着把漏斗拆分成3个简单图形：一个三角形，一个倒置三角形和中间的管道（垂直线）。那么问题就简化为实现三角形和直线。要实现三角形很简单，有模式可套用。即使用零宽高的元素，设置1条边带颜色，相交的2条边为透明。这主要利用了颜色渲染区域在边界交接处按对角线平分的规则。
写一个安卓自定义控件沙漏动画
最新发布
05-20
好的，以下是一个简单的沙漏动画自定义控件的实现过程： 1. 创建一个自定义控件类SandClockView，继承自View。 2. 在构造函数中初始化画笔Paint和属性动画AnimatorSet，用于控制沙漏动画的进度。 3. 重写onMeasure方法，确保控件的宽高比为2:3，并且高度不超过屏幕高度的一半。 4. 重写onDraw方法，在画布上绘制两个三角形和一条线段，形成沙漏的形状。 5. 创建方法startAnimation和stopAnimation，分别用于开始和停止沙漏动画。在startAnimation方法中，创建两个ValueAnimator对象，分别控制沙漏上下部分的动画进度，然后将它们添加到AnimatorSet中，设置动画时间和循环次数，并启动动画。 6. 在onDetachedFromWindow方法中停止动画。 以下是完整代码实现： ``` public class SandClockView extends View { private Paint mPaint; private AnimatorSet mAnimatorSet; private float mTopLeftX; private float mTopLeftY; private float mBottomLeftX; private float mBottomLeftY; private float mRightX; private float mTopY; private float mBottomY; private int mWidth; private int mHeight; public SandClockView(Context context) { super(context); init(); } public SandClockView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public SandClockView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.BLACK); mPaint.setStrokeWidth(5); mAnimatorSet = new AnimatorSet(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); // 保证宽高比为2:3 if (width * 3 > height * 2) { width = height * 2 / 3; } else { height = width * 3 / 2; } // 保证高度不超过屏幕高度的一半 int screenHeight = getResources().getDisplayMetrics().heightPixels; if (height > screenHeight / 2) { height = screenHeight / 2; width = height * 2 / 3; } mWidth = width; mHeight = height; setMeasuredDimension(width, height); } @Override protected void onDraw(Canvas canvas) { float triangleWidth = mWidth / 3f; float triangleHeight = mHeight / 2f; mTopLeftX = (mWidth - triangleWidth) / 2f; mTopLeftY = (mHeight - triangleHeight) / 2f; mBottomLeftX = mTopLeftX; mBottomLeftY = mTopLeftY + triangleHeight; mRightX = mTopLeftX + triangleWidth; mTopY = mTopLeftY; mBottomY = mBottomLeftY; Path path = new Path(); path.moveTo(mTopLeftX, mTopLeftY); path.lineTo(mRightX, mTopY); path.lineTo(mBottomLeftX, mBottomLeftY); path.lineTo(mTopLeftX, mTopLeftY); path.lineTo(mRightX, mBottomY); path.lineTo(mBottomLeftX, mBottomLeftY); canvas.drawPath(path, mPaint); } public void startAnimation() { ValueAnimator topAnimator = ValueAnimator.ofFloat(mTopY, mBottomY); topAnimator.setInterpolator(new LinearInterpolator()); topAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mTopY = (float) animation.getAnimatedValue(); invalidate(); } }); ValueAnimator bottomAnimator = ValueAnimator.ofFloat(mBottomY, mTopY); bottomAnimator.setInterpolator(new LinearInterpolator()); bottomAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mBottomY = (float) animation.getAnimatedValue(); invalidate(); } }); mAnimatorSet.play(topAnimator).with(bottomAnimator); mAnimatorSet.setDuration(1000); mAnimatorSet.setStartDelay(500); mAnimatorSet.setRepeatCount(ValueAnimator.INFINITE); mAnimatorSet.start(); } public void stopAnimation() { mAnimatorSet.cancel(); } @Override protected void onDetachedFromWindow() { super.onDetachedFromWindow(); stopAnimation(); } } ``` 使用时，可以在布局文件中添加一个SandClockView控件，并在代码中调用startAnimation方法开始动画，调用stopAnimation方法停止动画。例如： ``` SandClockView sandClockView = findViewById(R.id.sand_clock_view); sandClockView.startAnimation(); ``` 注意：以上代码只是一个简单的实现，实际应用中可能需要根据具体需求进行修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值