精华内容
下载资源
问答
  • 主要介绍了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>
    
    展开全文
  • 最近在做公司的登录页,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真好用,推荐一下。

    展开全文
  • CSS3实现各种炫酷图片遮罩和缩放动画特效源码是一款使用CSS3和透明几何图形遮罩图片制作来实现炫酷的不规则图片图片遮罩和缩放动画特效的代码。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时...
  • 主要是用CSS的animation来实现了一个无限缩放的效果。 一、HTML <view class="anima"></view> 二、CSS .anima{ width: 151rpx; height: 153rpx; background: url(https://4bd2d4613.png) no-repeat ...

    主要是用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);
       }
    }
    
    展开全文
  • CSS3实现各种炫酷图片遮罩和缩放动画特效源码是一款使用CSS3和透明几何图形遮罩图片制作来实现炫酷的不规则图片图片遮罩和缩放动画特效的代码。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时...
  • Animate.css官网:https://animate.style​animate.styleAnimate.css GitHub地址:https://github.com/daneden/animate.css​github.com第一步:安装animate.css NPM包:在命令行中执行:npm install animate.css --...

    28eaf82f0debbab331926ff87571280a.png
    Animate.css官网:
    https://animate.styleanimate.style
    Animate.css GitHub地址:
    https://github.com/daneden/animate.cssgithub.com

    第一步:安装animate.css NPM包:

    在命令行中执行:

    npm install animate.css --save

    注意:Vue 官网引用的是 animate.css 3.5,不能引用 animate.css 最新版本 (例如:4.1.0),推荐使用animate.css 3.7.2

    npm install animate.css@3.7.2 --save

    第二步:引入及使用:

    在main.js中引入:

    import 

    在vue页面中使用:

    <!-- template -->
    
    

    animate中的动画效果:

    fade
    展开全文
  • css 缩放_CSS动画总结

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

    千次阅读 2018-08-28 10:24:34
    实现动画效果,要用到css的 animation 属性,具体写法为: animation:a1, a2 , a3 ; a1为通过@keyframes 规则创建的动画名称,可自己定义 a2 为动画时常 ,例如:1s 2s 可自行规定 a3 为css自带的动画效果,...
  • 过渡:过渡效果一般是由浏览器直接改变元素的css属性实现的,例如:使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性。当用户鼠标悬停在指定元素之上的时候,浏览器就会响应,...
  • 这是一款js和CSS3炫酷图片网格缩放动画特效。该特效中,当一个图片网格项被点击的时候,背景和缩略图会被放大到屏幕指定位置。动画效果通过anime.js来实现
  • 在我们的css的属性中有transtion和transform两个属性 那我们的transform属性是对元素进行移动,旋转,缩放,2D/3D的切换等等操作 那我们的transtion就是对元素的过度动画的一个操作 官方网站上的demo例子: <!...
  • 0.5px 的像素在移动端的要求还是需要的。 css3 动画技巧:在开始的时候如果想在...在网上找了一个具体的实现办法,核心就是css3的缩放功能。 如果不写animation-timing-function,会出现卡顿的情况。 加bo...
  • 本文实现css3的一些动画效果,包括平移、旋转、缩放、倾斜等。还包括用户界面的一些简单效果。
  • 点击右上方红色按钮关注“web秀”,让你真正秀起来前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落。转眼2019年第一季度已经过去... 第二:主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。图形...
  • Css3动画—位、缩放

    2019-04-01 20:04:40
    Css3动画—位、缩放 ...利用css3动画实现模型和文本缩放 1缩小前 2缩小后 代码:: 代表缩小幅度: -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); 反则同理当大于1放大当...
  • html+css3实现动画demo

    2019-12-19 15:31:05
    css3转换可以对元素进行移动,缩放,转动,拉长或者拉伸 转换的效果是让某个元素改变形状,大小和位置 3D转换则是X,Y,Z 2D转换 translate(x,y) 移动像素 rotate() 旋转角度 scale(x,y) 缩放拉伸 skew() ...
  • 缩放属性:scale 旋转属性:roate 倾斜属性:skew html:定义五个属性进行比较,链入css文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
  • 最近看到一些好看的hover的图形缩放效果。然后自己就写了下,发现这2种效果都不错。如果伙伴们更好的实现方式可以在下面留言哦~ 还有美团的效果,我就不展示了,喜欢的可以去app应用上看看。 这两种效果...
  • 点击右上方红色按钮关注“web秀”,让你真正秀起来前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落。转眼2019年第一季度已经过去... 第二:主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。图形...
  • css3提供了强大的transform属性来实现动画效果。下面我简介一下如何用css3来实现浏览器里的缩放功能。HTML页面我们先写一个简单的页面,以测试页面缩放的代码。页面上有两个按钮,一个放大,点击后放大页面,一个...
  • CSS3中提供了transform和transform-origin两个用于实现2D变换的属性,其中transform属性用于实现平移、缩放、旋转和倾斜等2D变换,transform-origin用于设置中心点的变换; 1.2 应用transform属性实现旋转 应用...
  • css3动画实现

    2019-09-04 11:43:31
    使用css伪类、transition、transform实现 li:after给每个li加上一个红色border; 使用transform: scaleX(0);缩放,1是正常大小,2是两倍长度,0是长度为0px,不显示; hover时,设置scale为正常大小,就能显示出来;...
  • 随风潜入夜,润物细无声。春节已经过去,新的一年刚刚...下面进入主题,看下图:CSS3线性渐变、阴影、缩放实现动画下雨效果这个动画效果,如果让你来做,你会选择什么方式?相信很多小伙伴都会用gif图片。其实用cs...
  • css3实现15个动画特效

    2019-04-11 18:39:20
    css3+html实现的15个动画特效,包括淡入淡出、放大、旋转,缩放及各种组合特效等,可分开使用
  • 通过大部分css3的动画效果以及一部分js来实现一个炫酷的图片展示特效,具体的思路与步骤可以阅读我的同名博客
  • 前言 日子总是像从指尖流过的细沙,在不经意间悄然的滑落。转眼2019年第一季度已经过去了,提前祝大家愚人...第二:主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。 图形解析 1、背景(径向渐变) ...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 379
精华内容 151
关键字:

css实现缩放动画