精华内容
下载资源
问答
  • css旋转动画
    2021-08-30 10:06:24

    css 旋转 animation动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>css 转圈</title>
      <style>
        .turn{
          width:100px;
          height: 100px;
          background: aqua;
          animation:turn 1s linear infinite;      
          margin: 100px auto;
        }
        /* 
          turn : 定义的动画名称
          1s : 动画时间
          linear : 动画以何种运行轨迹完成一个周期
          infinite :规定动画应该无限次播放
         */
        @keyframes turn{
          0%{-webkit-transform:rotate(0deg);}
          25%{-webkit-transform:rotate(90deg);}
          50%{-webkit-transform:rotate(180deg);}
          75%{-webkit-transform:rotate(270deg);}
          100%{-webkit-transform:rotate(360deg);}
        }
      </style>
    </head>
    <body>
      <div class="turn"></div>
    </body>
    </html>
    更多相关内容
  • 我们可以通过css来做出动画效果,下面我为大家演示的是div的旋转,颜色过渡的动画 XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  <html lang="zh-cmn-Hans">  <head>  <meta charset...
  • 代码简介:CSS3旋转动画地球周转特效是一款3D效果的旋转变形特效下载。
  • 主要给大家介绍了关于微信小程序如何实现可实时改变转速的css3旋转动画的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 计算 HTML 元素的 CSS 样式;页面的布局;将元素绘制到一个或多个位图中;将这些位图交给合成线程。 相应地,合成线程负责:通过 GPU 将位图绘制到屏幕上;通知主线程更新页面中可见或即将变成可见的部分的位图;计
  • CSS3风水罗盘旋转动画特效是一款乾坤八卦罗盘旋转CSS3动画特效下载。
  • css实现加载旋转动画

    千次阅读 2021-12-07 03:54:31
    先看效果: 完整代码如下: css加载旋转动画 其他小案例: css实现颜色渐变小动画 css代码实现3D动画翻转 - 鱿鱼游戏卡片制作 css实现旋转的小流星动画 只用js代码实现电子时钟,精确到毫秒 简单的js代码实现主题色...

    先看效果:

     

    完整代码如下: 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css加载旋转动画</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .loading-screen{
                width: 100%;     
                height: 100vh;
                background: white;
                position: fixed;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .loading{
                width: 80px;
                display: flex;
                flex-wrap: wrap;
                animation: rotate 3s linear infinite;
            }
            @keyframes rotate{
                to{
                    transform: rotate(360deg);
                }
            }
            .loading span{
                width: 32px;
                height: 32px;
                background: red;
                margin: 4px;
                animation: scale 1.5s linear infinite;
            }
            @keyframes scale{
                50%{
                    transform: scale(1.2);
                }
            }
            .loading span:nth-child(1){
                border-radius: 50% 50% 0 50%;
                background: #e77f67;
                transform-origin: bottom right;
            }
            .loading span:nth-child(2){
                border-radius: 50% 50% 50% 0;
                background: #778beb;
                transform-origin: bottom left;
                animation-delay: 0.5s;
            }
            .loading span:nth-child(3){
                border-radius: 50% 0 50% 50%;
                background: #f8a5c2;
                transform-origin: top right;
                animation-delay: 1.5s;
            }
            .loading span:nth-child(4){
                border-radius:  0 50% 50% 50%;
                background: #f5cd79;
                transform-origin: top left;
                animation: 1s;
            }
        </style>
    </head>
    <body>
        <div class="loading-screen">
            <div class="loading">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </body>
    </html>

    其他小案例:

    css实现颜色渐变小动画

    css代码实现3D动画翻转 - 鱿鱼游戏卡片制作

    css实现旋转的小流星动画

    只用js代码实现电子时钟,精确到毫秒

    简单的js代码实现主题色切换

    点击主页看更多css小动画,js小案例…

    我的主页

    展开全文
  • CSS3制作3D骰子旋转动画特效是一款鼠标移动控制正方体旋转动画特效。
  • css3旋转动画制作鼠标经过圆形旋转特效
  • #CSS位移&旋转&缩放&动画 iconfont图标的使用 进入https://www.iconfont.cn 添加完成icon font图标之后点击添加至项目,在项目中就可以看到添加的图标 常用的有三种方法,第一种下载至本地 第二种...

    iconfont图标的使用

    进入https://www.iconfont.cn

    1. 添加完成icon font图标之后点击添加至项目,在项目中就可以看到添加的图标

    2. 常用的有三种方法,第一种下载至本地 第二种生成在线代码复制到相应的文件内 第三种使用为元素添加

    3. 使用时要用标签包裹,且有两个类名 第一个为iconfont 第二个为需要引用的字体图标

    4. 下载至本地需要引入两个字体图标到根目录的fonts文件夹内 分别为下图四个文件 且引入iconfont的css文件

    本地下载如果需要添加新的图标,则需要重新替换iconfont.css文件

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ljaz33uq-1653304327257)(C:\Users\Admin\AppData\Local\Temp\1653004980696.png)]

    <!-- 本地引入 -->
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <style>
        .icon-location {
          font-size: 20px;
          color: pink;
        }
      </style>
    </head>
    
    <body>
      <span class="iconfont icon-location"></span>
    </body>
    
    1. 生成在线代码 直接复制到代码中,引入css路径填写复制的路径 并在前缀添加https: 或者http:
    <!-- 在线引入 -->
     <link rel="stylesheet" href="https://at.alicdn.com/t/font_3401741_m3gtoblu85.css">
     <style>
       .icon-location {
         font-size: 20px;
         color: pink;
       }
     </style>
    </head>
    
    <body>
     <span class="iconfont icon-location"></span>
    </body>
    
    
    1. 使用伪元素添加 同样引用在线代码 引入步骤同上一步一样 在iconfont网站点击一下在现代码即可进入css源码文件 并找到相关类名中的代码写到content中
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3401741_8cdevwobz7.css">
     <style>
       .box {
         width: 100px;
         height: 40px;
         border: 1px solid pink;
       }
    
       .box::after {
         content: '\e6b7';
         line-height: 40px;
         float: right;
       }
     </style>
    </head>
    
    <body>
     <div class="box iconfont"></div>
    </body>
    

    位移

      <style>
        .box {
          height: 100px;
          width: 100px;
          background-color: pink;
          transition: .5s;
    
        }
    
        .box:hover {
          transform: translateY(-10px);
        }
      </style>
    </head>
    
    <body>
      <div class="box"></div>
    </body>
    
    • 水平方向为 transform: translateX(需要位移的距离);
    • 垂直方向为 transform: translateY(需要位移的距离);
    • 向前或向后移动为 transform: translateZ(需要位移的距离);
    • 连写时为 transform: translate(水平方向位移的距离(X轴),垂直方向位移的距离(Y轴)前后方向位移的距离(Z轴));
    • 透视: perspective: 200px;由远到近的效果,该属性应给父元素设置(应注意如果配合3D旋转使用时子盒子要和父盒子一样大或者在父盒子中间,否则会出现偏移)

    旋转

    <style>
        .box {
          width: 600px;
          height: 500px;
          background-color: pink;
          margin: 100px auto;
          border-radius: 150px 150px 0px 0px;
          transition: all .3s;
    
        }
    
        .box:hover {
          transform: rotate(180deg);
        }
      </style>
    </head>
    
    <body>
      <div class="box">
      </div>
    </body>
    
    • 顺时针(正值)/逆时针旋转(负值)transform: rotate(需要旋转的度数单位为deg);
    • 沿着X轴旋转(类似于围绕单杠旋转往下为负值,往上为正值)transform: rotateX(需要旋转的度数单位为deg);
    • 沿着Y轴旋转(类似于围绕钢管旋转往右为正值,往左为负值)transform: rotateY(需要旋转的度数单位为deg);
    • 沿着Z轴旋转(类似于一个平躺的圆柱体将它扶起来,从左往右为正值(90度时立起来时左边在上),从右往左为负值(90度时立起来时右边在上))transform: rotateZ(需要旋转的度数单位为deg);
    • 3D立体显示 transform-style: preserve-3d;需要立体显示或者围绕着XYZ轴旋转时需要给父元素设置该属性,否者它们将在同一平面
    • 如果旋转需要和平移一同实现时应将平移写到旋转前边
    • 旋转单位也可以为turn 1turn为一圈

    转换原点

    语法:transform-origin: 原点水平位置 原点垂直位置

    取值

    • 方位名词(left、top、right、bottom、center)
    • 像素单位数值
    • 百分比(参照盒子自身尺寸计算)

    缩放

      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
    
    
        .box {
          margin: 0 auto;
          width: 200px;
          height: 200px;
          position: relative;
        }
    
        .box img:first-child {
          width: 50px;
          height: 50px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(5);
          opacity: 0;
          transition: .5s;
        }
    
        .box:hover img:first-child {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
    
        }
    
        .box img:nth-child(2) {
          width: 100%;
          height: 100%;
        }
      </style>
    <body>
     <div class="box">
        <img src="../images/play.png" alt="">
        <img src="../images/11.jpg" alt="">
      </div>
    </body>
    

    缩放scale(需要缩放的大小)(不能为负值)

    位移&旋转&缩放注意点

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        span {
          /* 平面转换属性 设置给行内元素没有效果 必须转换为行内块或块元素 */
          display: inline-block;
          height: 200px;
          width: 200px;
          background-color: pink;
          transition: all 1s;
        }
    
        span:hover {
          transform: translate(100px);
        }
      </style>
    </head>
    
    <body>
      <span>我是行内标签</span>
    </body>
    
    </html>
    

    **平面转换属性 设置给行内元素没有效果 必须转换为行内块或块元素 **

    渐变色

     .three {
          height: 200px;
          width: 200px;
          background-image: linear-gradient(pink, hotpink);
        }
    
    • 渐变色为 background-image: linear-gradient(第一种颜色, 第二种颜色);
    • 如果在颜色前加上to方位(例如:to top)就是从下到上来渐变(方位为top、bottom、left、right)

    动画

    关键帧

     <style>
        .box {
          height: 200px;
          width: 200px;
          border-radius: 50%;
          text-align: center;
          line-height: 200px;
          background-color: pink;
          /* animation: active 1s linear forwards alternate; */
          animation: active 1s;
        }
    	/*单帧动画*/
        @keyframes active {
          from {
            transform: translateX(0) rotate(0deg);
          }
    
          to {
            transform: translateX(1000px) rotate(360deg);
          }
        }
        .box {
          width: 200px;
          height: 200px;
          background-color: pink;
          border-radius: 50%;
          text-align: center;
          line-height: 200px;
          /* 
          linear 匀速行驶
          infinite 无限循环
          alternate 左右来回执行动画
          forwords 动画结束 停留在最后一帧状态 需要在不循环状态使用
           */
          animation: active 4s linear forwards alternate;
        }
        /* 多帧动画 */
        @keyframes active {
          0% {
            transform: translate(0, 0) rotate(0deg);
          }
    
          25% {
            transform: translate(500px, 0) rotate(90deg);
    
          }
    
          50% {
            transform: translate(500px, 300px) rotate(180deg);
    
          }
    
          75% {
            transform: translate(0, 300px) rotate(270deg);
    
          }
    
          100% {
            transform: translate(0, 0) rotate(360deg);
          }
        }
      </style>
    

    调用动画属性 animation: active 4s linear forwards alternate;

    linear 匀速行驶
    infinite 无限循环
    alternate 左右来回执行动画
    forwords 动画结束 停留在最后一帧状态 需要在不循环状态使用

    鼠标经过暂停

     .box:hover {
          animation-play-state: paused;
        }
    

    逐帧动画

    steps(数字)

     <style>
        .box {
          width: 140px;
          height: 140px;
          background: url(../images/bg.png) no-repeat;
          animation: move 3s steps(12) infinite;
        }
    
        @keyframes move {
          to {
            background-position: -1680px 0;
          }
        }
      </style>
    </head>
    
    <body>
      <div class="box"></div> 
    </body>
    
    • 作用:使某些动画变得清晰可见的动画(例如一个小人奔跑)

    多组动画

      /* 多组动画 中间应用,逗号隔开 */
          animation: move 3s steps(12) infinite, run 5s forwards linear;
    

    ion: move 3s steps(12) infinite;
    }

    @keyframes move {
      to {
        background-position: -1680px 0;
      }
    }
    
    ~~~
    • 作用:使某些动画变得清晰可见的动画(例如一个小人奔跑)

    多组动画

      /* 多组动画 中间应用,逗号隔开 */
          animation: move 3s steps(12) infinite, run 5s forwards linear;
    
    展开全文
  • Css动画效果旋转图片

    千次阅读 2022-04-17 10:34:28
    这次给大家讲解一个有趣的css动画效果哈,那就是旋转图片成一朵花型。 第一步依旧是把img标签敲出来然后把图片放上去。 2.然后开始敲打css样式和效果,先给个class设置一下样式加个定位,因为动画效果需要个定 ...

    这次给大家讲解一个有趣的css动画效果哈,那就是旋转图片成一朵花型。

    1. 第一步依旧是把img标签敲出来然后把图片放上去。

             

          2.然后开始敲打css样式和效果,先给个class设置一下样式加个定位,因为动画效果需要个定          位才能有效果显示出来。

          3.然后也把图片的样式设置一下。

     

          4.最后开始设置图片的动画效果哈,分别把六张图片的位移位置敲打出来,因为我这里是设置        六张,所有刚刚好360°一圈。

     

          5.好的,现在我们看一下效果,一开始是固定显示一张,要把鼠标放进去了才能触发旋转效果。

    好的,上面就是我所学到的css的小知识,新手上路,多多指教,如果有更好的方法或不 懂得地方欢迎在评论区教导和提问喔!

    展开全文
  • CSS动画效果-旋转

    2021-07-15 08:03:08
    当我们将鼠标移入到该区域式这个小风车就会旋转起来 这是这个小风车的代码 Html: Css: 本人只是个新手,只是将风车放置Ul标签内,设置ul标签的伪类才使其转动,如有大佬有更好的代码,不知能否分享...
  • 一、css动画
  • CSS3风扇旋转动画特效是一款卡通台式电风扇旋转动画特效。
  • css3实现六边形图形
  • CSS Code复制内容到剪贴板 #loader8 {  margin: 30px 50px;  float: left;  font-size: 10px;  position: relative;  text-indent: -9999em;  border-top: 1.1em solid rgba(255, 128, 0,...
  • 实现一个 360° 无限循环旋转动画,如下图所示: 示例代码 注意:通过 animation 复合属性,可控制动画旋转速度及其他参数。 以下代码可直接复制,运行即可查看效果。 <image class="come" src=...
  • 0我修改了动画,并增加了transform-origin的微调:d.spinner-animation{width: 500px;height: 500px;position: relative;background: gray;}.spinner-animation > .spinner{width: 400px;height: 400px;position:...
  • //定义动画 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg... // 定义一个css用于调用动画,dom元素添加该class将会旋转 .spin-begin { animation: spin 1s linear...
  • css3聚光灯射线旋转动画特效是一款基于js跟css3制作的夜间聚会模式切换,聚光灯射线旋转,和周围发光灯泡场景动画特效。
  • css动画效果(旋转+动画

    千次阅读 2020-05-03 10:25:22
    css旋转(动起来吧 ~ ~ ~ ~ ) 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新...
  • jQuery旋转 添加旋转CSS属性和动画的简单插件 用法 $('。selector')。css('rotate',45); $('。selector')。animate({rotate:'360'},2000); 演示版 执照 根据 版权所有(c)2011-2013
  • CSS3 旋转动画

    2022-03-11 11:06:49
    效果图 实现: <body> <div class="wrap"> <image class="figure" src="./staitc/images/figure.png" /> <image class="circle circle-... src="./staitc/images/circle-inner.png" ...image
  • CSS3 3D金字塔旋转动画特效.zip,CSS3 3D金字塔旋转动画特效,index.html,scss,style.scss,php中文网下载站.url,js,index.js,index.pug,php中文网免费下载站.txt,css,style.css
  • 一款很漂亮的3D效果旋转变形特效代码,CSS3图片围绕地球周转旋转动画特效素材下载。
  • css3旋转的环形菜单动画特效 css3旋转的环形菜单动画特效
  • css 图片自动旋转动画
  • CSS3旋转动画地球周转特效是一款3D效果的旋转变形特效下载。
  • 首先来写这个css3动画 css3旋转动画 .animationSlow { width: 100rpx; height: 100rpx; background-color: orange; animation-name: myfirst; /*动画的名称 */ animation-duration: 2000ms; /*动画从开始到结束的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,769
精华内容 13,507
关键字:

css旋转动画