Maison

Effets spéciaux JS

Effets spéciaux CSS3

CSS3 comme plus un effet spécial d'animation

Télécharger maintenant Aperçu

code js

<script type="text/javascript">
(function ($) {
	$.extend({
		tipsBox: function (options) {
			options = $.extend({
				obj: null,  //jq对象，要在那个html标签上显示
				str: "+1",  //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
				startSize: "12px",  //动画开始的文字大小
				endSize: "30px",    //动画结束的文字大小
				interval: 600,  //动画时间间隔
				color: "red",    //文字颜色
				callback: function () { }    //回调函数
			}, options);
			$("body").append("<span class='num'>" + options.str + "</span>");
			var box = $(".num");
			var left = options.obj.offset().left + options.obj.width() / 2;
			var top = options.obj.offset().top - options.obj.height();
			box.css({
				"position": "absolute",
				"left": left + "px",
				"top": top + "px",
				"z-index": 9999,
				"font-size": options.startSize,
				"line-height": options.endSize,
				"color": options.color
			});
			box.animate({
				"font-size": options.endSize,
				"opacity": "0",
				"top": top - parseInt(options.endSize) + "px"
			}, options.interval, function () {
				box.remove();
				options.callback();
			});
		}
	});
})(jQuery);
  
function niceIn(prop){
	prop.find('i').addClass('niceIn');
	setTimeout(function(){
		prop.find('i').removeClass('niceIn');	
	},1000);		
}
$(function () {
	$("#btn").click(function () {
		$.tipsBox({
			obj: $(this),
			str: "+1",
			callback: function () {
			}
		});
		niceIn($(this));
	});
});
</script>

	
		这是一款基于jQuery+CSS3实现的比较实用点赞加一动画特效，jQuery点赞按钮动画效果。

Clause de non-responsabilité

Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn

Article connexe

Cliquez sur le bouton CSS3 pour obtenir un effet d'animation de dégradé d'arrière-plan

16 Feb 2017

Cet article vous présente comment utiliser CSS3 pour réaliser l'effet d'animation dégradée sur l'arrière-plan du bouton lorsque vous cliquez sur le bouton. L'effet après la mise en œuvre est très bon lors du développement, les boutons utilisant cet effet donneront aux utilisateurs une sensation très cool. . Le sentiment d'éblouissement, amis intéressés, venez jeter un oeil ci-dessous.

Organisation d'effets spéciaux courants sur des pages Web : Avancé

23 Dec 2016

L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Chapitre avancé 1. différentes périodes

Organiser des effets spéciaux courants sur des pages Web : niveau élémentaire

23 Dec 2016

Organiser des effets spéciaux courants sur des pages Web : niveau intermédiaire

23 Dec 2016

Sujet spécial HTML5 CSS3 Explication détaillée d'un exemple de code pour créer un effet d'album photo en utilisant du CSS pur

09 Mar 2017

Aujourd'hui, j'ai découvert par hasard qu'il existe un tel exemple sur mon ordinateur. Je pense que l'effet est plutôt bon. Je ne me souviens pas du moment où je l'ai téléchargé. Je n'ai pas utilisé w3cfuns depuis longtemps. la réception, j'aimerais donc le partager avec vous. Rendu : L'effet est toujours très bon. Le plus important est qu'il n'utilise pas une seule ligne de js. C'est le point fort. Regardons d'abord le fichier html : effet d'album photo CSS3 pur

Une appréciation graphique et textuelle de 8 superbes effets spéciaux d'animation de texte HTML5

06 Mar 2017

Le texte est l’âme des pages Web. Il y a longtemps, quelqu’un a inventé de nombreuses belles polices informatiques, qui donnaient aux pages Web des styles différents. Avec l'émergence du HTML5 et du CSS3, nous pouvons personnaliser le texte. Dans certaines situations, lorsque cela est nécessaire, nous pouvons même utiliser HTML5 pour animer le texte. Cet article partage 8 très beaux effets spéciaux d'animation de texte HTML5, j'espère qu'il pourra être utilisé comme référence pour vous. 1. Animation de texte pliable et retourné 3D CSS3 Aujourd'hui, nous allons partager une application d'effets spéciaux de texte CSS3. Elle est similaire aux effets de texte HTML5/CSS3 partagés auparavant. Il s'agit également d'une animation de texte pliée et retournée 3D CSS3. .

Comment puis-je créer un effet de fondu à l'aide de transitions CSS3 ?

28 Oct 2024

Transitions CSS3 : obtention d'effets de fondu En CSS3, les transitions offrent un outil puissant pour créer des effets visuels dynamiques. Parmi ces effets, il y a...

Animation CSS3 (1) : 5 effets d'animation préchargés

17 Feb 2017

Animation CSS3 (1) : 5 effets d'animation préchargés

Un ensemble d'effets spéciaux d'animation de déformation d'icône de hamburger cool

19 Jan 2017

Hamburgers est une bibliothèque d'animation CSS3 d'effets spéciaux d'animation de déformation d'icône de hamburger super cool. Cet ensemble d'animations d'icônes de hamburger comprend 18 effets d'animation de déformation de hamburger différents. Vous pouvez également personnaliser votre propre animation de déformation d'icône de hamburger via des fichiers Sass.

See all articles