左右摇摆动画

最新推荐文章于 2024-01-09 10:15:42 发布
最新推荐文章于 2024-01-09 10:15:42 发布
阅读量324 收藏 1
点赞数
分类专栏： css 文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/this_is_Azou/article/details/110883633
版权

左右摇摆动画

盒子模型

box-sizing：定义盒子模型，一共有两种盒子模型，IE盒子模型，W3C盒子模型

  • 默认值：content-box,总宽度：margin+border+padding+width;【W3C盒子模型】
  • border-box，总宽度：margin+width，width中包含了border+padding;[IE盒子模型]
  • inhert：从父元素继承box-sizing属性

设置倒影

-webkit-box-reflect用来设置对象倒影

参数：默认值为none（无倒影）

  • direction
    * above：指定倒影在对象上方
    * below：指定倒影在对象下方
    * left：指定倒影在对象左边
    * right：指定倒影在对象右边
  • offset
    • length：使用长度值来定义，可以为负值；
    • percentage：使用百分比来定义倒影与对象之间的间隔，可以为负值；
  • mask-box-image
    • none：无遮罩图像
    • url：使用绝对路径和相对路径来指定遮罩图像
    • linear-gradient：使用线性渐变创建遮罩图像
    • radial-gradient：使用径向渐变创建遮罩图像
    • repeating-linear-gradient：使用重复线性渐变创建遮罩图像
    • repeating-radiual-gradient：使用重复径向渐变创建遮罩图像
      若定义了mask-box-image则必须指定offset

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右摇摆动画</title>
    <link rel="stylesheet" href="./day_9.css">
</head>
<body>
<div class="container">
    <div class="loader">
        <div class="ball"></div>
    </div>
</div>
</body>
</html>

CSS

*{
    /*初始化页面，取消内外边距*/
    margin: 0;
    padding: 0;
    /*盒子模型*/
    box-sizing: border-box;
}
body{
    /*使页面垂直水平居中*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*使页面始终占据浏览器总高*/
    height:100vh;
    background-color: #1c1f2f;
}
.container{
-webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 10% ,rgba(0,0,0,0.5));
}
.loader{
    position:relative;
    width: 200px;
    height: 200px;
    border-radius:50%;
    border:20px solid transparent;
    /*定义下边框与右边框颜色*/
    border-right-color:#06c8f0;
    border-bottom-color:#06c8f0;
    /*顺时针旋转45度，变成向上的一个半圆*/
    transform:rotate(45deg);
    /*动画名称 时间 ease-in-out：两头慢中间快 无线 反向运行动画*/
    animation:move 4s ease-in-out infinite alternate;
}
.ball{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    animation:move-reverse 4s ease-in-out infinite alternate;
}
/*定义白色小球,使用伪元素定义小球，可以保证旋转中心在.ball中心*/
.ball::before{
    content:"";
    position:absolute;
    bottom:20px;
    left:20px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius:50%;
}
@keyframes move {
    0%{
        transform:rotate(0)
    }
    100%{
        /*顺时针旋转90度*/
        transform:rotate(90deg)
    }
}
@keyframes move-reverse {
    0%{
        transform:rotate(0)
    }
    100%{
        /*逆时针旋转180度*/
        transform:rotate(-180deg)
    }
}

效果

左右摇摆效果

this_is_Azou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css来回摆动,css3 animation(左右摆动) (放大缩小)
weixin_35829704的博客
08-03 2046
左右摆动：@-webkit-keyframes roundRule{0%, 100%{-webkit-transform: rotate(-15deg);}50%{-webkit-transform: rotate(15deg);}}-webkit-animation: roundRule 2.5s ease-in-out infinite;-webkit-transform-origin: t...
css左右摆动动画
yu2015java的博客
11-26 1万+
/*活动摇摆动画*/ @-webkit-keyframes swing { 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg)
css3 左右晃动效果
hi_JXL的博客
01-11 4928
css3 左右晃动效果 <div class="box"></div> <style> *{ padding:0; margin:0; } .box{ width:100px; height:100px; background:#098; margin:20px auto; -webkit-animation: rock 1s ...
CSS 实现风吹动树叶的动画
最新发布
太空编程
01-09 796
如题，要实现树叶在风中摇摆的动画，首先准备主体：树叶。这里准备了两张矢量的高清版 SVG 格式的不同种类的树叶。首先我们使用img标签来在网页中显示树叶，然后给它一个名为leaf的类，好给它附加样式。<imgclass="leaf"src="/blog/virtual_safari_leaf.svg"alt="Leaf"/>接下来就是编写 CSS 动画代码，这里利用了...
CSS动画——实现波浪摇摆效果...
weixin_43599321的博客
07-30 1116
波浪的摇摆实际上是通过波浪图的左右移动实现的，因此我们只需写一个实现波浪图从右(左)到左(右)移动的动画即可，但是在实现循环移动的动画中会存在一个问题，波浪图向左移动后，将移出屏幕边界，并且右侧会空出来，因此我们**在盒子内放两张相同的波浪图，一张初始位置在屏幕内，一张在屏幕右侧，当第一张向左移动时，第二张紧跟着一起移动实现弥补原本的空出来的位置，这样就可以实现波浪上下摇摆的动画效果了。
css3动画之左右摇摆
super_ce的博客
01-09 3万+
@-webkit-keyframes zy{   10% {     transform: rotate(15deg);   }   20% {     transform: rotate(-10deg);   }   30% {     transform: rotate(5deg);   }   40% {     transform: rotate(-5deg);  
CSS - 左右摇曳摆动动画（无限循环）
王佳斌
12-28 8216
效果图 代码 @-webkit-keyframes demo{ 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } } /* 使用
css3猫挂在线球上左右摇摆动画特效
06-11
本教程将深入探讨如何实现“css3猫挂在线球上左右摇摆动画特效”，这是一个利用CSS3的强大功能来创建的互动性动画效果。 首先，我们要明白CSS3中的关键帧动画（Keyframe Animations）是实现这一效果的基础。通过@...
用于演示钟摆、秋千晃荡等左右摇摆的动画效果
06-07
`rotation`变量在动画过程中会从0度变化到180度，从而模拟了钟摆或秋千的左右摇摆。你还可以根据需要调整动画的时长、旋转的最大角度以及是否添加缓动效果（如使用不同的Interpolator）。 为了使动画看起来更加自然...
CSS3牛顿摇摆球动画特效
06-24
"CSS3牛顿摇摆球动画特效"是一个典型的使用CSS3动画的例子，它模拟了物理中的牛顿摆现象，即小球在重力作用下左右摆动。在这个特效中，我们有五颗小球被细线悬挂在空中，形成一个动态的摇摆效果。 要实现这样的效果...
安卓动画效果相关-Android的秋千摇摆动画代码例子用于演示钟摆秋千晃荡等左右摇摆的动画效果.rar
07-29
标题提到的"安卓动画效果相关-Android的秋千摇摆动画代码例子"是一个专门用于展示钟摆或秋千左右摇摆的动画实现。这类动画通常涉及到视图在二维空间中的平移和旋转，能够模拟真实世界中的物理运动，为用户带来更生动...
动画(Animation) 之 (闪烁、左右摇摆、上下晃动等效果)
热门推荐
幻影浪子
11-22 4万+
左右晃动的效果： （这边显示没那么流畅）一、续播  (不知道取什么名字好，就是先播放动画A， 接着播放动画B) 有两种方式。 第一种，分别动画两个动画，A和B， 然后先播放动画A，设置A 的 AnimationListener。当onAnimationEnd触发（即A播放完毕）时，开始播放B。 animation1.setAnimationListener(new Animatio
自定义动画实现左右摇摆
qq_34900897的博客
12-06 1140
可以看看源码分析：https://www.cnblogs.com/kross/p/4087780.htmlpublic class CustomRotateAnim extends Animation { /** 控件宽 */ private int mWidth; /** 控件高 */ private int mHeight; /** 实例 */
css来回摆动,css左右摇摆动画
weixin_29404509的博客
08-03 2327
@-webkit-keyframes swing {20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }20% { -webkit-transform: rotate(15deg);}40%{-webkit-transform: rotate(-10deg);}60%{-webkit-transform: rotate...
左右摇摆
majiakun1的专栏
03-29 650
左右摇摆   //self 就是摇摆的view     CGFloat rotation = 0.03;     CABasicAnimation *shake = [CABasicAnimation animationWithKeyPath:@"transform"];     shake.duration = 0.13;     shake.autoreverses = YES;
CSS3实现钟摆动态效果
qq_27680431的博客
07-07 9851
css3 animation制作钟摆动画效果
左右晃动的动画
xiejunna的博客
06-08 416
android:duration="60"         android:fromXDelta="5"         android:toXDelta="-20"         android:repeatMode="reverse"         android:repeatCount="6"/> /**      * 左右晃动的动画     
【提示动画】左右滑动或者说左右晃动
allanGold
12-15 551
// 利用关键帧实现一种类似（渐入）渐出的效果 CAKeyframeAnimation *kfa = [CAKeyframeAnimation animation]; kfa.keyPath = @"transform.translation.x"; CGFloat s = 16; // kfa.values = @[@(-s),@(0),@(s),@(0),@(-s),@(0),@(s),@(0)]; kfa.values = @[@(-16),@(0),@(12).
css左右摇摆动画
05-30
要实现CSS左右摇摆动画，可以使用CSS3中的@keyframes和animation属性。具体实现步骤如下： 1. 定义@keyframes，设置动画的开始和结束状态。例如，设置一个名为“swing”的@keyframes，将元素从左边倾斜到右边倾斜。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

this_is_Azou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值