CSS3实现上下滑动和左右摆动

最新推荐文章于 2024-06-19 14:56:38 发布
最新推荐文章于 2024-06-19 14:56:38 发布
阅读量1.5w 收藏 7
点赞数 2
分类专栏： CSS 文章标签： css3 css 动画 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38102188/article/details/78884807
版权

初接触CSS，在学习基础CSS知识的同时试着接触CSS3的有关知识。

今天首先学习到CSS3的 animation属性，将图片实现上下滑动：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Starbuzz Coffee</title>
    <style>

            #award {

               position: absolute;
      top: 30px;
       left: 365px;

              -webkit-animation: move 10s infinite alternate;
               animation: move 10s infinite alternate;

    }

          @-webkit-keyframes move {
               0% {top: 30px;}
               100% {top:60px;}
            }
          @keyframes move {
               0% {top: 30px;}
              100% {top:60px;}
            }

   </style>
  </head> 


  <body>

<div id="award">
<img src="images/award.gif" alt="Roaster of the Year award">
</div>

</body>

</html>

然后实现左右摆动，样式为：

            #award {

               position: absolute;
      top: 30px;
               left: 365px;

              -webkit-animation: shake 10s infinite;
              animation: shake 10s infinite;

              -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;

    }

         @-webkit-keyframes shake{
             50% { -webkit-transform: rotate(-10deg); }
             100% { -webkit-transform: rotate(10deg); }
          }
        @keyframes shake{
             50% { -webkit-transform: rotate(-10deg); }
  100% { -webkit-transform: rotate(10deg); }
         } 






卡卡的笔录
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（39）css3实现轮播图效果
Java田根旺
12-17 538
css3的轮播图和js的轮播图的区别？ css3：没有一些js的逻辑，优点，过渡动画比较漂亮，缺点：兼容问题。无法实现自动轮播和点击轮播一起同时出现的效果。 js轮播图：js逻辑很多，可以做的很复杂，可以实现点击轮播和自动轮播同时生效的轮播图，缺点：过渡效果不好看。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C
CSS3实现移动效果
qq_45823118的博客
03-18 1693
CSS3实现移动效果任务描述相关知识transform属性transition属性代码文件 任务描述 本关任务：用CSS3实现物体移动效果。 相关知识 为了完成本关任务，你需要掌握： transform属性 transition属性。 transform属性 下面是基本的html结构，： <div class="move"> <p>向上移动</p> </div> 效果如下： 现在需要平滑的往上移动200px。 该如何实现呢？ 咱们先实现往上移动
CSS实现文字上下滚动、间歇滚动和无限滚动
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
06-19 727
主要记录了用CSS实现文字上下滚动、间歇滚动和无限滚动效果
css3文字上下滚动切换特效
04-06
css3文字上下滚动切换特效是一款简单的文本上下滚动切换动画特效。
响应式滑动菜单
qq_49425703的博客
05-09 662
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>响应式滑动菜单</title> <link rel="stylesheet" type="text/css" href="css/default.css" /> </head> <style> .main { ...
CSS3实现左右摆动和上下滑动
E的小小地方
08-07 1692
1、上下滑动 #award { position: absolute; top: 30px; left: 365px; -webkit-animation: move 10s infinite alternate; animation: mo...
关于CSS动画@-webkit-keyframes的两种实现方式
debugtoday的博客
02-28 6671
关于CSS动画@-webkit-keyframes的两种实现方式
css3图片无缝滚动
qq_65167898的博客
05-17 1601
文章目录 前言 一、什么是无缝滚动？ 二、如何创建一个无缝滚动 前言 今天来大家了解一下无缝滚动的简单制作 一、无缝滚动是什么？ 在我看来，无缝滚动是将多张图片进行无间隙的连播 二、使用步骤 1.创建一个左右无缝滚动 代码如下（示例）： <style type="text/css"> * { margin:0; padding:0; } .wrap {width:500px; height:100px; border:4px solid #000; ...
CSS3 SVG实现的蜘蛛动画特效源码.zip
10-31
下面我们将深入探讨CSS3和SVG的相关知识点，以及它们如何协同工作来实现动态的视觉效果。 首先，CSS3（Cascading Style Sheets Level 3）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表...
CSS3盘子拉面鸡蛋图形特效
07-24
5. **动画（Animations）**：CSS3动画通过`@keyframes`规则定义，可以实现动态效果，比如拉面滑动到盘子里的过程，或者鸡蛋轻轻晃动的样子。 6. **阴影（Shadows）**：box-shadow属性可以添加阴影效果，使元素看...
逼真 云彩 云雾 烟雾CSS3 动画效果.rar
07-10
这个效果是和鼠标交互的，按住鼠标左键滑动鼠标，即可看到各种色彩、浓度不同的云彩效果，或者说是烟雾、云雾等效果，动画十分逼真流畅，未使用任何的图片，这些云雾全部用CSS3代码来渲染实现，在Google和火狐浏览器...
基于jquery+css3实现左右摇摆可滑动展开折叠圆形导航菜单
04-21
本项目聚焦于创建一个独特且交互性强的导航菜单，采用jQuery和CSS3技术，实现了一个左右摇摆、可滑动展开与折叠的圆形导航菜单。这个设计既提升了用户体验，也增加了网站的视觉吸引力。 首先，jQuery是一个轻量级的...
html css 自动滚动代码,使用CSS自动滚动
weixin_39834745的博客
06-09 1485
1.)您无法使用CSS或纯HTML启动DOM操作.你总是需要一种操纵语言(比如JavaScript)2.)您可以通过覆盖当前CSS来删除按钮,并调整可见性或显示标记以使其脱离或(占位)不可见.最后,你真的需要JavaScript才能触发动态隐藏,并使用setIntervals进行自动滑动.编辑：这可能适合您使用滑块动画：#container {height: 200px;width: 800px;...
div+css 上下左右移动
热门推荐
wtt561111的专栏
01-16 6万+
利用div+css，使得选中的对象，上下左右进行位置移动。
CSS3中transform移动属性的使用
Mr_li13的博客
02-26 1万+
问题？CSS3中transform移动属性的使用 原理：该属性是将原来存在的元素发生位置的变化，包括旋转角度，水平，垂直位置的变化。 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 例子： #div1{ width: 200px; height: 200px; background-color: blue
CSS实现上下循环滚动效果
杨春建的博客
07-26 1万+
原文地址：https://codepen.io/lilyH/pen/CjrHl HTML：               第一行数据         第二行数据       CSS：      .wrap{height:30px;overflow: hidden;position: absolute;top:30;left: 100;width: 100%}    
css 上下滚动效果
12-08 505
<html> <head> <style> .scroll{ overflow:hidden; width:100%; } .scrollout{ height:250px; width:100%; overflow:hidden; cursor:pointer; } </style> ...
html向下移动动画效果,CSS3创建上下移动的动画效果
weixin_39673293的博客
06-03 969
上下移动.a{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;width:200px;height:200px;background-color:#000000...
使用jq和css3自制横向左右滑动图片列表
weetch的博客
07-25 8061
目标效果 默认选中第一张，鼠标悬浮缓慢放大图片，底部文字介绍由下往上缓慢滑出，选中后边框效果； 左右滑动，距离为四张图片。 思路 定义一个定宽的容器，然后图片不换行并排显示，超出部分隐藏，隐藏x轴滚动条； 左右按钮点击，获取容器的滚动条位置，在此基础上加上固定移动距离，然后重置容器滚动条位置。 做法 左右箭头可以使用图片，我这里使用的是:before和:after伪类做的，通过倾斜
使用css3动画实现左右滑动展示
06-07
可以使用 CSS3 动画来实现左右滑动展示。具体步骤如下： 1. 创建 HTML 结构 首先，创建 HTML 结构，包括一个容器和两个子元素，例如： ```html <div class="sidebar"></div> <div class="main-content"></div>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值