精华内容
下载资源
问答
  • 缩放动画css
    千次阅读
    2021-01-20 20:13:54

    主要是用CSS的animation来实现了一个无限缩放的效果。
    一、HTML

    <view class="anima"></view>
    

    二、CSS

    .anima{
       width: 151rpx;
       height: 153rpx;
       background: url(https://4bd2d4613.png) no-repeat 0 0;
       background-size: 100% 100%;
       animation: firstdiv 2s linear 2s infinite alternate;
    }
    @keyframes firstdiv{
       0%{
          transform: scale(1);
       }
       25%{
          transform: scale(0.9);
       }
       50%{
          transform: scale(0.8);
       }
       75%{
          transform: scale(0.9);
       }
       100%{
          transform: scale(1);
       }
    }
    
    更多相关内容
  • 最近在做公司的登录页,UE同学希望第三方登录的图标在hover的时候有一个圆形的缩放效果(原话是波纹效果-_-||),效果参考腾讯新闻和网易新闻的分享按钮。 腾讯新闻的分享按钮hover效果(新闻页面): 网易新闻的...
  • 这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
  • css3如何实现缩放动画

    千次阅读 2021-06-13 03:24:48
    css3如何实现缩放动画css3实现缩放动画,首先我们来学习下css3中的transform:scale属性,它可以控制元素的缩放。一、transform:scale1、scale(x,y) 对元素进行缩放(相关课程推荐:css视频教程)X表示水平方向缩放的...

    7c121081ce14d6601f8a662a9d814703.png

    css3如何实现缩放动画

    css3实现缩放动画,首先我们来学习下css3中的transform:scale属性,它可以控制元素的缩放。

    一、transform:scale

    1、scale(x,y) 对元素进行缩放

    (相关课程推荐:css视频教程)

    X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。transform:scale(2,2.5);

    2、scaleX() 元素只在X轴(水平方向)缩放元素。

    默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点transform:scaleX(2);

    3、scaleY() 元素只在Y轴(垂直方向)缩放元素。

    基点一样在元素的中心位置。可以通过transform-origin来改变基点。transform:scaleY(2);

    最后我们看看兼容性写法:.test{

    -moz-transform:scale(2,2);

    -webkit-transform:scale(2,2);

    -o-transform:scale(2,2);

    background:url(img/i.png) no-repeat;

    width:198px;

    height:133px;

    }

    二、缩放案例

    0%{

    transform: scale(1); /*开始为原始大小*/

    }

    25%{

    transform: scale(1.1); /*放大1.1倍*/

    }

    50%{

    transform: scale(1);

    }

    75%{

    transform: scale(1.1);

    }

    }

    .ballon{

    width: 150px;

    height: 200px;

    background: url("images/balloon.png");

    background-size: 150px 200px;

    -webkit-animation-name: scaleDraw; /*关键帧名称*/

    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/

    -webkit-animation-iteration-count: infinite; /*动画播放的次数*/

    -webkit-animation-duration: 5s; /*动画所花费的时间*/

    }

    效果:

    b74b2d03eebb3f1be32d67f0541bc997.gif

    本文来自css答疑栏目,欢迎学习!

    展开全文
  • CSS实现鼠标悬停缩放

    2022-04-14 11:15:50
    css3通过:hover选择器以及2D 转换来实现鼠标悬停放大效果

    介绍

    :hover 选择器

    选择器示例示例说明CSS
    :hovera:hover选择鼠标在链接上面时1

    转换属性

    Property描述CSS
    transform适用于2D或3D转换的元素3

    2D 转换方法

    函数描述
    matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。
    translate(x,y)定义 2D 转换,沿着 X 和 Y 轴移动元素。
    translateX(n)定义 2D 转换,沿着 X 轴移动元素。
    translateY(n)定义 2D 转换,沿着 Y 轴移动元素。
    scale(x,y)定义 2D 缩放转换,改变元素的宽度和高度。
    scaleX(n)定义 2D 缩放转换,改变元素的宽度。
    scaleY(n)定义 2D 缩放转换,改变元素的高度。
    rotate(angle)定义 2D 旋转,在参数中规定角度。
    skew(x-angle,y-angle)定义 2D 倾斜转换,沿着 X 和 Y 轴。
    skewX(angle)定义 2D 倾斜转换,沿着 X 轴。
    skewY(angle)定义 2D 倾斜转换,沿着 Y 轴。

    运行结果

    代码

    HTML

          <div id="box">
            <ul class="box-card">
              <li v-for="(item, index) in list" :key="index">
                <el-card>
                  <div>
                    <p>鼠标悬停</p>
                  </div>
                </el-card>
              </li>
            </ul>
          </div>

    CSS

    .box-card :hover {
      transform: scale(1.1);
      transition: all 1s ease 0s;
      -webkit-transform: scale(1.1);//-webkit-解决浏览器兼容问题
      -webkit-transform: all 1s ease 0s;
    }

    展开全文
  • CSS3感应鼠标的背景闪烁和图片缩放动态效果,鼠标滑过时增加了一点动画效果,当鼠标放在眼睛上的时候,眼睛会闪动几下,CSS3环境下运行,ie8不能运行 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD ...
  • 这是一款js和CSS3炫酷图片网格缩放动画特效。该特效中,当一个图片网格项被点击的时候,背景和缩略图会被放大到屏幕指定位置。动画效果通过anime.js来实现。
  • CSS3实现各种炫酷图片遮罩和缩放动画特效源码是一款使用CSS3和透明几何图形遮罩图片制作来实现炫酷的不规则图片图片遮罩和缩放动画特效的代码。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时...
  • CSS3 圆形缩放动画

    2021-09-09 17:07:12
    <!... <... <head> ...meta charset="UTF-8">...圆形缩放</title> <style> * { padding: 0px; margin: 0px; } .bg { width: 100vw; height: 100vh; display: flex;
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>圆形缩放</title>
    		<style>
    			* {
    				padding: 0px;
    				margin: 0px;
    			}
    
    			.bg {
    				width: 100vw;
    				height: 100vh;
    				display: flex;
    				justify-content: center;
    				align-items: center;
    			}
    
    			.bg div {
    				background: #009FD9;
    				width: 100px;
    				height: 100px;
    				border-radius: 50%;
    				position: relative;
    			}
    
    			.bg p {
    				z-index: -1;
    				position: absolute;
    				width: 100%;
    				height: 100%;
    				border-radius: 50%;
    				/* 扩散的颜色 */
    				background: #EDD3CE;
    				/* 绑定myfirst动画 */
    				/* 过渡时间3s */
    				/* infinite循环 */
    				animation: myfirst 3s infinite;
    			}
    
    			/* 定义一个 名为myfirst动画 */
    			@keyframes myfirst {
    				/* 设置百分之百 扩散效果 */
    				100% {
    					/* transform对元素进行旋转、缩放、移动或倾斜 */
    					/* scale缩放 */
    					/* scale(2) 分别把x y 放大两倍 */
    					transform: scale(2);
    				}
    			}
    		</style>
    	</head>
    	<body>
    		<div class="bg">
    			<div class="one">
    				<p></p>
    			</div>
    		</div>
    	</body>
    </html>
    
    @keyframes myfirst {
    	/* 设置为百分50可以缩放 */
    	50% {
    		transform: scale(2);
    	}
    }
    
    展开全文
  • css动画缩放

    千次阅读 2019-02-21 23:05:11
    css动画缩放) (作者:张米,撰写时间:2019年2月11日) 定义:让元素根据原点对对象进行缩放。 三种使用情况 scale(x,y)让元素在水平和垂直方向同时缩放。 scale(x)让元素仅在水平方向缩放。 scale(y)让...
  • CSS3实现各种炫酷图片遮罩和缩放动画特效源码是一款使用CSS3和透明几何图形遮罩图片制作来实现炫酷的不规则图片图片遮罩和缩放动画特效的代码。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时...
  • Document 缩放动画效果
  • 这是一款使用CSS3和透明几何图形遮罩图片制作的炫酷的不规则图片图片遮罩和缩放动画特效。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时,几何图形会有好看的缩放过渡动画效果。
  • css3实现动画 4.缩放动画

    千次阅读 2019-08-29 00:31:19
    缩放动画浏览器实现效果: 缩放动画实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>figure demo</title> <style type="text...
  • css文字和图片大小缩放动画效果

    千次阅读 2020-04-18 15:20:40
    1.文字 .bUtonadaLij { width: 218rpx; height: 80rpx; background: #FFF; border-radius: 40rpx; line-height: 80rpx; text-align: center; font-size: 28rpx; color: #006a4c;... /*动画所花费的时间*/ }
  • 基本使用 (1)定义动画 (2)调用动画 2.2. 动画序列 2.3. 动画属性 (1)常用属性 (2)速度曲线细节 (3)属性简写 *小熊奔跑案例 1、2D转换 1.1. 移动 移动盒子:position定位、margin外边距、translate2D转换...
  • CSS中旋转、空间缩放动画的属性
  • sacle:缩放 translate:位移 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; ...
  • css3实现15个动画特效

    2019-04-11 18:39:20
    css3+html实现的15个动画特效,包括淡入淡出、放大、旋转,缩放及各种组合特效等,可分开使用
  • css等比缩放效果

    2022-01-06 14:44:11
    div { color: #fff; font-size: 16px; padding: 0 25px; transition: all 0.2s linear; } .div :hover { transform: scale(1.15); background: #444444 !important; color: #00bfff; }
  • 首先要知道什么是CSS3动画?然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍,希望对你有用。 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您...
  • CSS3动画—变形(扭曲、缩放) skew()扭曲:扭曲skew()函数能够让元素倾斜显示。 它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变...
  • CSS3 代码↓可直接运行!!!最下有概念解析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
  • 这次我们要为大家分享一款炫酷实用的CSS3菜单,这款菜单的特点是可以展开和收缩菜单项,并且在展开和收缩的过程中伴随弹性的动画特效,而且展开和收缩的按钮也会出现一些炫酷的动画特效。这款CSS3弹性动画菜单比较...
  • 但是我后来发现,不需要这么麻烦,直接用transform就可以搞定缩放 这是html布局 这是其中一部分css样式,就是这个transform旋转属性 以下是全部代码 <!DOCTYPE html> <html lang="en"> <...
  • 代码片段:   dur="10000" fill= "forwards" to="0 360 0" easing="linear" repeat="indefinite"> </a-sphere>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,204
精华内容 11,681
关键字:

缩放动画css