html中如何实现放大动画,CSS3实现点击放大的动画实例

这次给大家带来CSS3实现点击放大的动画实例，CSS3实现点击放大动画实例的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

最近在工作中遇到一个需求，实现的效果是当点击商品图片右上的收藏按钮触发放大动画，后来通过查找相关的资料，发现利用css3:@keyframes animation即可实现这个效果，下面来看看详细的介绍吧。

技术重点css3: @keyframes animation

示例代码

@keyframes myfirst {

0% {

width: 50px;

height: 50px;

top: 10px;

right: 10px;

}

75% {

width: 60px;

height: 60px;

top: 5px;

right: 5px;

}

100% {

width: 50px;

height: 50px;

top: 10px;

right: 10px;

}

.warp {

width: 400px;

height: 300px;

position: relative;

background: #ccc;

}

.btn {

position: absolute;

width: 50px;

height: 50px;

border:solid 3px #cc3c24;

top: 10px;

right: 10px;

border-radius: 8px;

cursor: pointer;

}

.btn.cur{

animation: myfirst 0.2s;

}

.btn.yes{

background: #cc3c24;

}

var btn = $('.btn');

btn.click(function () {

if( $(this).is('.yes')){

$(this).removeClass('yes');

$(this).removeClass('cur');

}else{

$(this).addClass('yes');

$(this).addClass('cur');

}

});

btn.on('webkitAnimationEnd', function () {

$(this).removeClass('cur');

});

html中如何实现放大动画,CSS3实现点击放大的动画实例相关推荐

HTML中button怎么填充GIF,css3给按钮添加背景渐变动画
css3给按钮添加背景渐变动画 button { color:#FFF; font-size:16px; outline:none; width:300px; height:48px; backgro ...
html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
原标题:HTML5+CSS3实现图片的放大/缩小最近做项目时,经常遇到需要图片缓慢放大的效果.我做的时候想到了几种方法,所以来总结一下. 1. 利用css改变图片的宽高,做出视觉上的放大. 首先,将 ...
jq双击放大图片_Jquery图片点击放大
jquery点击放大整理身份证图片 $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pi ...
html 人物行走动画,CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复.大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势. 当我们需要用计算机来模拟人类这个最简单的动作时,通 ...
android圆形变方形动画,CSS3 简单的圆形/方形变形动画
CSS 语言: CSSSCSS 确定 html, body { width: 100%; height: 100%; background-color: #221e40; } *, *:after, ...
android气球上升的属性动画,CSS3 不断有气球上升的动画背景效果
CSS 语言: CSSSCSS 确定 html { font-size: 1.2vh; } body { margin: 0; height: 100vh; width: 100vw; backgro ...
css 文字 3d旋转动画,CSS3 简单的三维文字旋转动画
CSS 语言: CSSSCSS 确定 *, *:after, *:before { box-sizing: border-box; } html { height: 100vh; background ...
CSS3打造的10种创意动画菜单效果
CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解.本文将为大家带来一些充满创意的菜单悬停效果.它由图标,主标题,副标题等简单的元素构成,通过CSS3最新的过渡(trans ...
在WordPress网站上添加图片点击放大效果
WordPress 博客中图片显示太小?想点击放大?除去安装 WordPress 现有插件,我们还可以直接添加代码实现点击博客中的图片之前是这样的点击博客中的图片之后,图片放大并呈现在灯箱中,且右 ...

html中如何实现放大动画,CSS3实现点击放大的动画实例

html中如何实现放大动画,CSS3实现点击放大的动画实例相关推荐

最新文章

热门文章