精华内容
下载资源
问答
  • 主要介绍了CSS圆形缩放动画简单实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家个参考。一起跟随小编过来看看吧
  • 简单的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>
    
    展开全文
  • 最近在公司的登录页,UE同学希望第三方登录的图标在hover的时候有一个圆形的缩放效果(原话是波纹效果-_-||),效果参考腾讯新闻和网易新闻的分享按钮。 腾讯新闻的分享按钮hover效果(新闻页面): 网易新闻...

    最近在做公司的登录页,UE同学希望第三方登录的图标在hover的时候有一个圆形的缩放效果(原话是波纹效果-_-||),效果参考腾讯新闻和网易新闻的分享按钮。

    • 腾讯新闻的分享按钮hover效果(新闻页面):

    • 网易新闻的分享按钮hover效果(新闻页面):

    看了一下这两个页面的源码,主要是用了transform:scale()transition,自己的最终的实现效果如下:

    实现思路大体是模仿网易新闻的,布局如下:

    <a href="" class="third-party third-party-weixin">
         <i></i>
         <span></span>
     </a>
    复制代码

    外层的a标签用于整体容器和跳转,内层的i标签使用伪元素::before和::after分别作为背景色和前景色,这两个伪元素均绝对定位,垂直水平居中,::after设置缩放属性transform:scale(0),过渡动画属性transition: all .3s,正常情况下::before可见,当hover的时候::after设置缩放属性transform:scale(1),两个相邻绝对定位元素在不设置z-index的情况下,文档流在后的元素在上,并且在有过渡动画属性transition的情况下实现了缩放动画效果。

    span标签用于展示logo,可以是图片或者web字体,只要透明就可以,这里用了图片。 CSS(此处使用的是sass)如下:

    .third-party {
        position: relative;
        // 为了兼容firefox必须要变成block或inline-block
        display: inline-block;
        width: 48px;
        height: 48px;
        margin: {
            left: 6%;
            right: 6%;
        }
        &:hover {
            i {
                &::after {
                    transform: scale(1);
                }
            }
        }
        span {
            // position: relative是为了兼容firefox和IE
            position: relative;
            display: block;
            width: 48px;
            height: 48px;
            background-size: 30px;
            background-position: center;
            background-repeat: no-repeat;
        }
        i {
            position: absolute;
            top: 0;
            left: 0;
            width: 48px;
            height: 48px;
            &::before {
                content: '';
                border-radius: 50%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            &::after {
                content: '';
                transition: all .3s;
                border-radius: 50%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                transform: scale(0);
            }
        }
        &.third-party-weixin {
            span {
                background-image: url(../images/login/weixin-64.png);
            }
            i {
                &::before {
                    background-color: #20a839;
                }
                &::after {
                    background-color: #30cc54;
                }
            }
        }
    }
    复制代码

    这样这个简单的圆形缩放动画就完成啦。

    PS: ScreenToGif录GIF真好用,推荐一下。

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

    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 effects to them.

    今天,我们将鼠标悬停在CSS3 Zoom Image动画效果上。 由于图像是网站的灵魂,因此您肯定会尝试向其添加一些很酷的悬停效果。

    CSS3缩放图像 (CSS3 Zoom Image)

    css zoom image, css zoom animation, css zoom image on hover animation effect

    In this tutorial, I have penned down some useful examples of creating a flawless CSS3 zoom image effect using the CSS transform and transition properties.


    在本教程中,我写下了一些有用的示例,这些示例使用CSS转换过渡属性创建完美CSS3缩放图像效果。

    是什么使CSS3成为实现图像缩放效果的最佳选择? (What makes CSS3 the best choice for achieving zoom effects for images?)

    Although you may find a large number of jQuery plugins for creating an image zoom effect, CSS3 is perhaps the most recommended one. The reason being its seamless cross-browser compatibility which saves you from the headache associated with addition of lengthy jQuery codes.

    尽管您可能会发现大量用于创建图像缩放效果的jQuery插件,但CSS3可能是最推荐的插件。 原因是其无缝的跨浏览器兼容性,这使您免于添加冗长的jQuery代码带来的麻烦。

    The three examples that I’ll be looking at in this CSS zoom image tutorial include:

    我将在此CSS缩放图像教程中看到的三个示例包括:

    1. As per first example, I’ll be achieving the zoom effect using transform: scale(2) and transition: all .3s ease-out

      作为第一个示例,我将使用transform: scale(2)transition: all .3s ease-out实现缩放效果
    2. As per second example, I’ll be achieving the zoom effect using two images where the second image would be shown on hover on just the right side of the parent image.

      作为第二个示例,我将使用两个图像实现缩放效果,其中第二个图像将悬停显示在父图像的右侧。
    3. As per the third example, I’ll be achieving the zoom effect using two images where the second image would be shown on mouse hover at a pre-defined location which is related to the current position of the parent image using CSS transform: translate(0, 300px);

      按照第三个示例,我将使用两个图像来实现缩放效果,其中第二个图像将在鼠标悬停时显示在与CSS父图像的当前位置相关的预定义位置transform: translate(0, 300px);

    Let’s start with the first example of css image zoom on hover animation

    让我们从悬停动画上CSS图像缩放的第一个示例开始

    In this example, I’ve used 2 images to showcase the zoom effect. Here is a detailed explanation of the transition and transform properties of CSS which will be used here:

    在此示例中,我使用了2张图像来展示缩放效果。 这是将在此处使用CSS过渡和转换属性的详细说明:

    • transition: all .3s ease-out – This transition property will include the following values:

      transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

      过渡:所有.3s过渡期–此过渡属性将包括以下值:

      过渡:[过渡属性] [过渡持续时间] [过渡计时功能] [过渡延迟];

    As per above, transition-property will have all(comma-separated) or none of the CSS properties, transition-duration will include values which will determine the amount of time that will be consumed in completion of the transition. This will be displayed in seconds and milliseconds.

    如上所述,过渡属性将具有全部(逗号分隔)或不具有CSS属性,过渡持续时间将包含将确定完成过渡所花费的时间量的值。 这将以秒和毫秒为单位显示。

    In addition to this, the transition-timing-function will be used for specifying the change in speed at which the transition gets modified over the duration(here, I’m referring to the value set for transition-duration). The transition-timing-function property can include the below values:

    除此之外,过渡计时功能将用于指定在整个持续时间内修改过渡的速度变化(此处,我指的是为过渡持续时间设置的值)。 transition-timing-function属性可以包含以下值:

    1. Linear: It represents that a uniform speed will be maintained for the image transition

      线性 :表示为图像过渡将保持一致的速度
    2. Ease-in: It represents that the animation will be started slowly and finished at a high speed

      缓入 :代表动画将缓慢开始并以高速完成
    3. Ease-out: It represents that the animation will be started at full speed and finished at a slow speed

      缓动 :代表动画将以全速开始并以慢速结束
    4. Ease-in-out: It represents that the animation will be started slowly, run at the fastest speed at the middle point and finished off slowly

      缓入缓出 :表示动画将缓慢开始,在中间点以最快的速度运行,然后缓慢结束
    5. Ease is like ease-in-out– It represents that the animation will operate in the same manner as in the case of ease-in-out with only one exception that during the start, it will be slightly faster as compared to its speed in the end.

      缓动就像快进一样–它表示动画的操作方式与快进一样,只是一个例外,即在开始过程中,与快进相比,动画会稍微快一些。结束。

    Finally, there will be transition-delay which will represent the time delay from when the transition has been triggered.

    最后,将存在过渡延迟,该延迟表示从触发过渡开始的时间延迟。

    • Transform: scale(2): This is a CSS Transform property that will be used for increasing or decreasing the size of a specific image element, Here, scale(2) means that you’ll be able to scale an image element just double than its original size. Here, I’ll be using two values viz: x and y which will be used for stretching the image element horizontally and vertically respectively.

      Transform:scale(2) :这是一个CSS Transform属性,将用于增加或减小特定图像元素的大小,在这里,scale(2)表示您可以将图像元素缩放到两倍它的原始大小。 在这里,我将使用两个值viz:x和y,分别用于水平和垂直拉伸图像元素。

    The code associated with this example is shown below:

    与该示例关联的代码如下所示:

    css3-hover-zoom1.html

    css3-hover-zoom1.html

    <!DOCTYPE HTML>
    <html> 
    <head>
    <style type="text/css">
    div{ 
    	padding:25%;
    	float: left; 
    } 
    .parentimage { 
    	width: 300px;
    	height: 300px; 
    	-webkit-transition: all .3s ease-out;
    	-moz-transition: all .3s ease-out;
    	-o-transition: all .3s ease-out;
    	transition: all .3s ease-out;
    } 
    .parentimage:hover {
    	-moz-transform: scale(2);
    	-webkit-transform: scale(2);
    	-o-transform: scale(2);
    	-ms-transform: scale(2);
    	transform: scale(2);
    } 
    </style>
    </head>
    <body>
    <div>
    	<img class="parentimage" src="Images/image1.jpg" />
    	<img class="parentimage" src="Images/image2.jpg" />
    	<img class="parentimage" src="Images/image3.jpg" />
    	<img class="parentimage" src="Images/image4.jpg" />
    </div> 
    </body> 
    </html>

    Now, let’s get to know what happens in the second example

    现在,让我们了解第二个示例中发生的情况

    Here, I’ll be using each of the four images twice. The transition properties used here will include the ones mentioned below:

    在这里,我将两次使用四个图像。 此处使用的过渡属性将包括以下提到的属性:

    • position:absolute – This property will be applied to the second version of a parent image so that when the same(here, I’m referring to the image’s second version) is displayed in the web browser, it won’t affect other page elements.

      position:absolute –此属性将应用于父图像的第二版本,以便在Web浏览器中显示相同版本(此处是指图像的第二版本)时,它不会影响其他页面元素。
    • Width: 0px – this property will be used for hiding the second version of the main/parent image

      宽度:0像素-此属性将用于隐藏主/父图像的第二个版本
    • transition: width 0.3s linear 0s – this property will be used for maintaining consistent speed throughout the transition. For a better understanding of this property, I recommend reviewing the first example.

      过渡:宽度0.3s线性0s –此属性将用于在整个过渡期间保持一致的速度。 为了更好地了解此属性,建议阅读第一个示例。

    The code associated with this example is shown below:

    与该示例关联的代码如下所示:

    css3-hover-zoom2.html

    css3-hover-zoom2.html

    <!DOCTYPE HTML>  
    <html>  
    <head>  
    <style type="text/css">  
        div{  
            padding:20%;  
            float: left;  
        }  
    
        .parentimage{  
            width: 300px;  
            height: 300px;  
        }  
        .parentimageLarge{  
            position:absolute;  
            width: 0px;  
            transition: width 0.3s linear 0s;  
            z-index: 12;  
        }  
        .parentimage:hover + .parentimageLarge{  
            width:600px;  
            height:600px;                 
        }         
    
    </style>        
    </head>  
    
    <body>  
    <div>  
    
      <img class="parentimage" src="Images/image1.jpg" />            
      <img class="parentimageLarge" src="Images/image1.jpg" />  
    
      <img class="parentimage" src="Images/image2.jpg" />  
      <img class="parentimageLarge" src="Images/image2.jpg" />  
    
      <img class="parentimage" src="Images/image3.jpg" />  
      <img class="parentimageLarge" src="Images/image3.jpg" />  
    
      <img class="parentimage" src="Images/image4.jpg" />  
      <img class="parentimageLarge" src="Images/image4.jpg" />  
        
    </div>          
    </body>     
    </html>

    Finally, let’s get to know about the third example of css zoom image animation

    最后,让我们了解CSS缩放图像动画的第三个示例

    This example is absolutely similar to example no.2 with only a single difference that the resultant image is located at a different position. The transform property used here is:

    该示例与示例2绝对相似,仅一个不同之处在于所得图像位于不同位置。 这里使用的transform属性是:

    transform: translate(0,300px) : this property is used for shifting the image element from its current location to a new one.

    transform:translate(0,300px) :此属性用于将图像元素从其当前位置移动到新位置。

    CSS3 Code associated with this example is shown below:

    与该示例关联CSS3代码如下所示:

    .parentimage:hover + .parentimageLarge{ 
    width:600px; 
    height:600px; 
    transform: translate(0,300px); 
    }

    CSS3缩放图像动画效果演示 (CSS3 Zoom Image Animation Effect Demo)

    You can visit below URLs for the demo of all three examples.

    您可以访问以下URL,获取所有三个示例的演示。

    1. CSS Zoom Image Animation Effect Demo Example 1

      CSS缩放图像动画效果演示示例1
    2. CSS Zoom Image Animation Effect Demo Example 2

      CSS缩放图像动画效果演示示例2
    3. CSS Zoom Image Animation Effect Demo Example 3

      CSS缩放图像动画效果演示示例3

    CSS缩放图像摘要 (CSS Zoom Image Summary)

    Hope you’d have followed the steps covered in this tutorial and would find them useful enough in achieving the desired zoom effect for your website images.

    希望您已按照本教程中介绍的步骤进行操作,并发现它们对实现网站图像所需的缩放效果足够有用。

    About the Author: Jason Roiz is qualified outsource web development professional who brings to the table a quantum of learning around custom Magento development services. He meets expectations for OSSMedia, a CMS development company giving proficient WordPress, Magento, Drupal and Joomla improvement administrations.

    作者简介 :Jason Roiz是合格的外包Web开发专业人员,他将有关定制Magento开发服务的知识带到了桌面。 他满足了CMS开发公司OSSMedia的期望,该公司提供精通WordPress,Magento,Drupal和Joomla改进管理。

    翻译自: https://www.journaldev.com/6689/css3-zoom-image-animation-effect-on-hover

    css 悬停动画

    展开全文
  • css3如何实现缩放动画css3实现缩放动画,首先我们来学习下css3中的transform:scale属性,它可以控制元素的缩放。一、transform:scale1、scale(x,y) 对元素进行缩放(相关课程推荐:css视频教程)X表示水平方向缩放的...
  • /* 按钮动画效果 */ .按钮的class名{ -webkit-animation: free_download 1s linear alternate infinite; animation: free_download 1s linear alternate infinite; } @-webkit-keyframes free_download{ ...
  • 这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
  • 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...
  • 这是一款js和CSS3炫酷图片网格缩放动画特效。该特效中,当一个图片网格项被点击的时候,背景和缩略图会被放大到屏幕指定位置。动画效果通过anime.js来实现。
  • CSS3实现各种炫酷图片遮罩和缩放动画特效源码是一款使用CSS3和透明几何图形遮罩图片制作来实现炫酷的不规则图片图片遮罩和缩放动画特效的代码。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时...
  • 但是我后来发现,不需要这么麻烦,直接用transform就可以搞定缩放 这是html布局 这是其中一部分css样式,就是这个transform旋转属性 以下是全部代码 <!DOCTYPE html> <html lang="en"> <...
  • CSS3感应鼠标的背景闪烁和图片缩放动态效果,鼠标滑过时增加了一点动画效果,当鼠标放在眼睛上的时候,眼睛会闪动几下,CSS3环境下运行,ie8不能运行 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD ...
  • @keyframes scaleDraw { /*定义关键帧、scaleDrew是需要... /*动画的速度曲线*/ -webkit-animation-iteration-count:infinite; /*动画播放的次数*/ -webkit-animation-duration:5s; /*动画所花费的时间*/ }
  • CSS3实现各种炫酷图片遮罩和缩放动画特效源码是一款使用CSS3和透明几何图形遮罩图片制作来实现炫酷的不规则图片图片遮罩和缩放动画特效的代码。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时...
  • css动画缩放

    2019-02-21 23:11:56
    css动画缩放) (作者:张米,撰写时间:2019年2月11日) 定义:让元素根据原点对对象进行缩放。 三种使用情况 scale(x,y)让元素在水平和垂直方向同时缩放。 scale(x)让元素仅在水平方向缩放。 scale(y)让...
  • 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-...
  • css3缩放和位移

    千次阅读 2019-02-06 16:36:04
    开发工具与关键技术:css3缩放和位移 ...我们就用前一个的模板来继续,首先用简单的css3一个图形的缩放和位移 首先我们先设一个div,并给他命名,然后再给他设基本边框样式并给他一个动画时长,如下图所示
  • 这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。使用方法HTML结构以一个为例,在它上面设置一张背景图片,HTML结构如下:...
  • 解压密码:RJ4587 这是一组基于CSS3的图片动画,这组图片动画包含图片上悬浮文字、图片上下左右翻转以及图片缩放这3中动画特效。第一组动画中当我们将鼠标滑过图片时,图片上方就会显示文字层,文字层的出现也会伴随...
  • 这是一款使用CSS3和透明几何图形遮罩图片制作的炫酷的不规则图片图片遮罩和缩放动画特效。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时,几何图形会有好看的缩放过渡动画效果。
  • 动画CSS3的缩放效果

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

    2019-04-01 20:04:40
    Css3动画—位、缩放 开发工具与关键技术:DW / Html Css3 作者:冯海金 撰写时间:2019年2月15日星期五 利用css3动画实现模型和文本缩放 1缩小前 2缩小后 代码:: 代表缩小幅度: -webkit-transform: scale(0.8);...

空空如也

空空如也

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

css做缩放动画