精华内容
下载资源
问答
  • 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圆形缩放动画简单实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 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>
    
    展开全文
  • 但是我后来发现,不需要这么麻烦,直接用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鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
  • CSS3实现各种炫酷图片遮罩和缩放动画特效源码是一款使用CSS3和透明几何图形遮罩图片制作来实现炫酷的不规则图片图片遮罩和缩放动画特效的代码。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时...
  • 这是一款js和CSS3炫酷图片网格缩放动画特效。该特效中,当一个图片网格项被点击的时候,背景和缩略图会被放大到屏幕指定位置。动画效果通过anime.js来实现。
  • 这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。使用方法HTML结构以一个为例,在它上面设置一张背景图片,HTML结构如下:...
  • CSS3感应鼠标的背景闪烁和图片缩放动态效果,鼠标滑过时增加了一点动画效果,当鼠标放在眼睛上的时候,眼睛会闪动几下,CSS3环境下运行,ie8不能运行 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD ...
  • CSS3实现各种炫酷图片遮罩和缩放动画特效源码是一款使用CSS3和透明几何图形遮罩图片制作来实现炫酷的不规则图片图片遮罩和缩放动画特效的代码。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时...
  • /* 按钮动画效果 */ .按钮的class名{ -webkit-animation: free_download 1s linear alternate infinite; animation: free_download 1s linear alternate infinite; } @-webkit-keyframes free_download{ ...
  • .bUtonadaLij { width: 218rpx; height: 80rpx; background: #FFF; border-radius: 40rpx; line-height: 80rpx; text-align: center; font-size: 28rpx; color: #006a4c; border: 2rpx solid #006a4c;...}
  • 最近在做公司的登录页,UE同学希望第三方登录的图标在hover的时候有一个圆形的缩放效果(原话是波纹效果-_-||),效果参考腾讯新闻和网易新闻的分享按钮。 腾讯新闻的分享按钮hover效果(新闻页面): 网易新闻...
  • 动画CSS3的缩放效果

    2019-01-17 09:26:28
    CSS3该怎么用 (作者:王金蝶,撰写日期:2019.01.17) 下图为一个页面练习,点击gt里面的a标签应该有一个滑动的CSS3,然后把floor...先设置边框与图片大小,指定动画名称(animation-name),设定动画执行时...
  • 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 悬停动画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动画缩放

    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...
  • css动画缩放

    2019-02-21 23:11:56
    css动画缩放) (作者:张米,撰写时间:2019年2月11日) 定义:让元素根据原点对对象进行缩放。 三种使用情况 scale(x,y)让元素在水平和垂直方向同时缩放。 scale(x)让元素仅在水平方向缩放。 scale(y)让...
  • 以下为一个纯css写的图片鼠标悬浮缩放效果,其实基本原理十分简单,我们访问一些网站可以发现他们都会对图片做一些交互效果的处理,当然实现图片过渡效果有很多方式,例如使用JQuery或者一些第三方js动画库,本例仅...
  • 导航栏同时缩放旋转(css3动画

    千次阅读 2018-09-21 11:27:51
    有时候看惯了墨守成规的导航栏,就突发奇想想要使自己的导航栏看上去酷炫与众不同。那么就看过来吧。 ...挥挥手指不带走一片云彩~ 这种旋转出现的比较适合圆形...css: @keyframes tab { 0%{ transformtransfo...
  • CSS动画

    2019-07-17 17:54:31
    CSS动画学习 css动画作为一枚前端汪必备技能萌芽决定今天来好好的总结一下!如果平常不经常用到的话时间久...在css3中有着2D转换和3D转换,转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。配合上我们的动态...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,962
精华内容 10,384
关键字:

缩放动画css