精华内容
下载资源
问答
  • css 缩放_CSS动画总结

    2020-11-23 17:07:00
    1.【CSS 动画基础】动画原理许多静止的画面(帧)以一定的速度(30 帧 / s)连续播放时,眼睛因视觉残像产生错觉,而误以为是活动的画面。动画的渲染性能在开发者工具中打开 Rendering 面板,勾选 'Paint falshing' ...

    1.【CSS 动画基础】

    动画原理

      • 许多静止的画面(帧)以一定的速度(30 帧 / s)连续播放时,眼睛因视觉残像产生错觉,而误以为是活动的画面。

    动画的渲染性能

      • 在开发者工具中打开 Rendering 面板,勾选 'Paint falshing' 选项,页面上重新绘制(repaint)的地方会变绿;必须全屏查看效果,在 iframe 里看会有问题
      • 使用 setInterval 实现的动画在执行过程中会不停地重新渲染,性能较差
      • 使用 transform 实现的动画在执行过程中重新渲染的次数很少,性能提升很多

    浏览器渲染原理

      1. 根据 HTML 构建 HTML 树(DOM)
      2. 根据 CSS 构建 CSS 树(CSSOM),和 DOM 不完全一样
      3. 将两棵树合并成一颗渲染树(Render Tree),就是用户最终看到的树
      4. 进行布局(Layout),将元素定位,设置大小(文档流、盒模型)
      5. 进行绘制(Paint),将边框颜色、文字颜色、阴影等画出来
      6. 进行合成(Compose),根据层叠关系展示画面

    753ce01bf47d0dd0aa64cbce2c60dc92.png

    更新样式的方法

      • 一般使用 JS 来更新样式
      • div.style.background = 'red' 设置背景色
      • div.style.display = 'none' 隐藏元素
      • div.classList.add('red') 添加类,最常用,一个类可以包含很多样式
      • div.remove() 删除节点

    三种不同的渲染方式

      • 方式1:布局 > 绘制 > 合成,div.remove(),会触发当前元素消失,其他元素 relayout
      • 方式2:绘制 > 合成,例如改变背景色
      • 方式3:只需合成,性能最好,例如 transform
      • 如何知道每个 CSS 属性使用哪种渲染方式:https://csstriggers.com/
        • Chrome 浏览器内核 = Blink
        • Firefox 浏览器内核 = Gecko
        • Safari 浏览器内核 = Webkit
        • edge 浏览器内核 = EdgeHTML

    28d17116154a6d682fb5b088a549527e.png

    CSS 动画优化

      • 使用 transform 代替 left
      • 使用 will-change 或 translate 属性
      • 优化 JS:使用 requestAnimationFrame 代替 setTimeout 和 setInterval
      • 绘制通常是性能开销最大的部分,应尽可能避免绘制;除 transform 和 opacity 属性之外,更改任何属性始终都会触发绘制。

    2.【transform 变形】

    四种常用变形

      • 位移 translate
        • translateX( <length-percentage> ) 横向位移
        • translateY( <length-percentage> ) 纵向位移
        • translateZ( <length> ) Z轴位移,在 3D 视图中才会生效,需要在父元素添加属性 perspective,设置透视图的视点位置
        • translate( x, y ) 二维位移的简写形式
        • translate3d( x, y, z ) 三维位移的简写形式
        • 参数可以是百分数,使用 translate(-50%, -50%) 配合 left:50%; top:50% 可以设置绝对定位元素的居中
      • 缩放 scale
        • scale( <number>, <number>? ) 设置元素缩放比例,1 为原比例
        • 也可使用 scaleX | scaleY 分别设置横/纵向的缩放比例
        • 使用 scale 缩放会导致 border 也变宽/窄,容易出现模糊,因此很少使用
      • 旋转 rotate
        • rotate( [<angle> | <zero>] ) 从12点钟方向顺时针旋转,角度单位 360deg
        • 默认围绕 Z 轴转动,也可以围绕 X 轴或 Y 轴 转动,rotateX | rotateY
        • 一般用于制作 360° 旋转的 loading 图标
      • 倾斜 skew
        • skewX( [<angle> | <zero>] ) 沿 X 轴倾斜,用的较少

    经验技巧

    • 动画调试技巧:在开发者工具中选中 transform 属性后的数值,按 ↑ ↓ 可以实时增减数值,按住 shift 可以加大增减幅度
    • 可以添加多个效果,用空格隔开
    • transform: none; 清除所有效果
    • 一般与 transition(过渡)配合使用,产生动画效果 transition: all 1s
    • inline 元素不支持 transform 属性,需要先转换为 block 元素

    3.【transition 过渡】

    • 作用是补充中间帧,形成动画效果
    • transition 属性名 时长 过渡方式 延迟
      • 举例:transition: left 200ms linear 3s
      • 过渡方式:linear 线性,匀速变化 | ease 先快后慢,默认 | ease-in 淡入 | ease-out 淡出 | ease-in-out 淡入+淡出 | 等等
      • 可以用逗号分隔两个不同属性:transition: left 200ms, top 400ms
      • 可以用 all 代表所有属性:transition: all 200ms
    • 并不是所有属性都能过渡
      • display: none <==> block 不能过渡
      • 可以使用 visibility: hidden <==> visible 切换元素是否可见
      • opacity: 0 只能让元素看不见,但是位置和大小还在那里,一般需要在动画执行后删除元素 div.addEventListener('transitionend', ()=> { div.remove() })
      • background 也可以过渡,因为是16进制的颜色值
    • 多次过渡动画
      • .a ==> .b .b ==> .c ,使用 div.classList.remove 和 classList.add 改变元素的css类,注意第二次变形要保留第一次变形的状态

    4. 【animation 动画】

    • animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 关键帧名
      • 过渡方式:和 transition 取值一样,默认 ease
      • 次数:3 | 2.4 | infinite(无限)
      • 方向:reverse(反向) | alternate(交替) | alternate-reverse
      • 填充模式:none | forwards(停在最后一帧) | backwards | both
      • 是否暂停:paused | running 可以通过 div.style.animationPlayState = 'paused | running' 控制动画暂停、恢复
      • 每个属性都有单独的属性名
    • @keyframes 关键帧的两种语法
    @
    展开全文
  • 主要介绍了CSS圆形缩放动画简单实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 但是我后来发现,不需要这么麻烦,直接用transform就可以搞定缩放 这是html布局 这是其中一部分css样式,就是这个transform旋转属性 以下是全部代码 <!DOCTYPE html> <html lang="en"> <...

    最终效果 

    原本我是看这个文章写的https://blog.csdn.net/xutongbao/article/details/82683582

    但是我后来发现,不需要这么麻烦,直接用transform就可以搞定缩放

    这是html布局

    这是其中一部分css样式 ,就是这个transform旋转属性

     

    以下是全部代码 

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
        </head>
        <style>
            body,
            html {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            nav {
                width: 100%;
                height: 100px;
            }
            .menu {
                margin: 0;
                padding: 10px;
                height: 100px;
            }
            .menu_item {
                position: relative;
                margin: 0 -5px 0 0;
                display: inline-block;
                width: 200px;
                height: 100px;
                background-color: #dddddd;
                list-style-type: none;
            }
            .menu_item:hover {
                background-color: #999999;
            }
            .menu_text {
                display: inline-block;
                width: 100%;
                line-height: 100px;
                text-align: center;
                cursor: pointer;
            }
            .menu_detail {
                opacity: 0;
                position: absolute;
                width: 200px;
                height: 280px;
                text-align: center;
                background-color: rgba(102, 102, 102, 0.5);
                box-shadow: 0 0 10px #3366cc;
                transition: all .5s;
                transform: scale(0);
                z-index: 999;
            }
            .menu_item:hover .menu_detail{
                transform: scale(1);
                opacity: 1;
            }
            .menu_detail span {
                display: inline-block;
                padding: 10px 5px;
            }
        </style>
        <body>
            <nav>
                <ul class="menu" id="menu">
                    <li class="menu_item">
                        <span class="menu_text">导航1</span>
                        <div class="menu_detail">
                            <span>菜单1的详细信息1</span>
                            <span>菜单1的详细信息2</span>
                            <span>菜单1的详细信息3</span>
                            <span>菜单1的详细信息4</span>
                        </div>
                    </li>
                    <li class="menu_item">
                        <span class="menu_text">导航2</span>
                        <div class="menu_detail">
                            <span>菜单2的详细信息1</span>
                            <span>菜单2的详细信息2</span>
                            <span>菜单2的详细信息3</span>
                            <span>菜单2的详细信息4</span>
                        </div>
                    </li>
                </ul>
            </nav>
        </body>
    </html>
    

     

    展开全文
  • 简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title>css圆形缩放动画</title> <style> ....

    简单的CSS圆形缩放动画

    话不多说鼠标移动上去,看效果吧,效果预览

    代码如下:

    <!DOCTYPE html>
    <html>
      <head>
        <title>css圆形缩放动画</title>
        <style>
          .circular {
            position: relative;
            width: 48px;
            height: 48px;
          }
          .circular i {
            position: absolute;
            top: 0;
            left: 0;
            width: 48px;
            height: 48px;
          }
          .circular i:before {
            content: '';
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #20a839;
          }
          .circular i:after {
            content: '';
            transition: all .3s;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: scale(0);
            background-color: #30cc54;
          }
          .circular:hover i:after {
            transform: scale(1);
          }
        </style>
      </head>
      <body>
        <div class="circular">
          <i></i>
        </div>
      </body>
    </html>

    转载于:https://www.cnblogs.com/tugenhua0707/p/8395112.html

    展开全文
  • 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...

    缩放动画浏览器实现效果:

    在这里插入图片描述

    缩放动画实现代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>figure demo</title>
    	<style type="text/css">
    		body,figure,figcaption,h2,p,img,div{
    			margin: 0;
    			padding: 0;
    		}
    		figure{
    			position: relative;
    			width: 33.33%;
    			height: 350px;
    			overflow: hidden;
    			float: left;
    			
    		}
    		figure img{
    			margin-left:-120px; 
    			opacity: 0.8;
    			transition: all 0.5s;
    		}
    		figcaption{
    			display: block;
    			position: absolute;
    			top: 0px;
    			left: 0px;
    			color: #FFF;
    			font-family: "微软雅黑";
    		}
    		figure figcaption p,h2,span{
    			transition: all 0.5s;
    		}
    		@media screen and(max-width:600px){
    			figure{width: 100%;}
    		}
    		@media screen and(min-width: 601px) and(max-width:1000px){
    			figure{width: 50%;}
    		}
    		@media screen and(min-width:1001px){
    			figure{width: 33.33%;}
    		}
    		.test4 img{
    			margin-top:-160px; 
    		}
    		.test4{
    			background: yellow;
    		}
    		.test4 figcaption{
    			width: 100%;
    			height: 100%;
    		}
    		.test4 figcaption p{
    			margin-top: 5px;
    			margin-left: 15%;
    			opacity: 0;
    		}
    		.test4 figcaption h2{
    			margin-top: 15%;
    			margin-left: 15%;
    			opacity: 0;
    		}
    		.test4 figcaption div{
    			border: 2px solid #FFF;
    			width: 80%;height: 80%;
    			position: absolute;
    			top: 10%;
    			left: 10%;
    			transform: scale(1.2,1.2);
    			opacity: 0;
    			transform: translate(0px,-350px) rotate(0deg);
    			transition: all 0.5s;
    		}
    		.test4:hover figcaption div{
    			transform: scale(0.5,0.5);
    			opacity: 1;
    			transform: translate(0px,0px) rotate(360deg);
    		}
    		.test4:hover img{
    			transform: scale(1.2,1.2);
    			opacity: 0.5;
    		}
    		.test4:hover figcaption h2{
    			transform: scale(1,1);
    			opacity: 1;
    		}
    		.test4:hover figcaption p{
    			transform: scale(1,1);
    			opacity: 1;
    		}
    		</style>
    </head>
    <body>
    	<figure class="test4">
    		<img src="D:\壁纸\新建文件夹\394aced300.jpg" alt="谭松韵">
    		<figcaption>
    			<h2>缩放动画</h2>
    			<p>缩放动画图片注解</p>
    			<div></div>
    		</figcaption>
    	</figure>
    </body>
    </html>
    
    展开全文
  • 这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
  • 这是一款js和CSS3炫酷图片网格缩放动画特效。该特效中,当一个图片网格项被点击的时候,背景和缩略图会被放大到屏幕指定位置。动画效果通过anime.js来实现。
  • 动画CSS3的缩放效果

    2019-01-17 09:26:28
    CSS3该怎么用 (作者:王金蝶,撰写日期:2019.01.17) 下图为一个页面练习,点击gt里面的a标签应该有一个滑动的CSS3,然后把floor...先设置边框与图片大小,指定动画名称(animation-name),设定动画执行时...
  • css 悬停动画Today we will look into CSS3 Zoom Image animation effect with mouse on hover. With images being the soul of a website, you might have definitely tried your hands on adding some cool hover ...
  • CSS3实现各种炫酷图片遮罩和缩放动画特效源码是一款使用CSS3和透明几何图形遮罩图片制作来实现炫酷的不规则图片图片遮罩和缩放动画特效的代码。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时...
  • Css3动画缩放

    2016-07-05 16:12:00
    Css3缩放动画 transform-scale() scale();值 0~1 0-隐藏 1-默认 小于0缩放 大于1放大 例:transform:scale(0.98); 转载于:https://www.cnblogs.com/windly/p/5644047.html...
  • CSS3感应鼠标的背景闪烁和图片缩放动态效果,鼠标滑过时增加了一点动画效果,当鼠标放在眼睛上的时候,眼睛会闪动几下,CSS3环境下运行,ie8不能运行 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD ...
  • 这是一款使用CSS3和透明几何图形遮罩图片制作的炫酷的不规则图片图片遮罩和缩放动画特效。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时,几何图形会有好看的缩放过渡动画效果。
  • } } 变形 变形就是指通过CSS来改变元素的形状或位置 变形不会影响到页面的布局 transform 用来设置元素的变形效果 平移: translateX() 沿着x轴方向平移 translateY() 沿着y轴方向平移 translateZ() 沿着z轴方向平...
  • 最近在做公司的登录页,UE同学希望第三方登录的图标在hover的时候有一个圆形的缩放效果(原话是波纹效果-_-||),效果参考腾讯新闻和网易新闻的分享按钮。 腾讯新闻的分享按钮hover效果(新闻页面): 网易新闻...
  • 1.文字 .immediately { width: 100% - 100rpx; height: 88rpx; background: linear-gradient(0deg, rgba(252, 81, 81, 1) 0%, rgba(254, 165, 106, 1) 100%); box-shadow: 0px 3px 6px 0px ... /*动画所花费的时间*/ }
  • CSS3中,提供了对动画的强大支持,可以实现旋转、缩放、移动和过渡等效果另外,为了解决各类浏览器的兼容性问题,分别添加了-webkit-、-moz-、-o-等不同浏览器前缀兼容代码过渡为元素从一种样式转变为另一种样式时...
  • css动画缩放

    2019-02-21 23:11:56
    css动画缩放) (作者:张米,撰写时间:2019年2月11日) 定义:让元素根据原点对对象进行缩放。 三种使用情况 scale(x,y)让元素在水平和垂直方向同时缩放。 scale(x)让元素仅在水平方向缩放。 scale(y)让...
  • 效果图:Loading加载缩放动画特效HTML代码:CSS代码: .tui-demo-5 { width: 100px; height: 100px; margin: 50px auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .tu...
  • /* 按钮动画效果 */ .按钮的class名{ -webkit-animation: free_download 1s linear alternate infinite; animation: free_download 1s linear alternate infinite; } @-webkit-keyframes free_download{ ...
  • CSS3背景闪烁和图片缩放动画效果

    千次阅读 2014-05-05 14:44:15
    CSS3感应鼠标的背景闪烁和图片缩放动态效果 /*标题背景*/ h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300px;text-align:center;transition:opacity 0.5s linear 0s;} h2:hover{-moz-...
  • css动画旋转缩放移动和关键帧动画 &lt;div&gt;&lt;/div&gt; &lt;style&gt; div{ width: 300px; height: 300px; background-color: red; transition: all 1s; -webkit-transition:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,087
精华内容 434
关键字:

缩放动画css