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

Pure CSS3 crée un effet spécial animé où l'ombre de la bordure s'étend vers l'extérieur

25 Aug 2021

Dans l'article précédent « Vous apprendre étape par étape comment utiliser CSS3 pour implémenter des effets dynamiques de survol et de clignotement des boutons », nous avons présenté la méthode d'utilisation de CSS3 pour ajouter des effets dynamiques aux boutons et obtenir un effet d'animation d'ombre de survol et de clignotement des boutons. Aujourd'hui, cet article partagera avec vous un effet d'animation de bordure. Voyons comment utiliser CSS3 pour obtenir l'effet d'animation de l'ombre de bordure s'étendant vers l'extérieur.

À propos de l'animation CSS3 pour obtenir un effet d'animation image par image

20 Jun 2018

Cet article présente principalement l'animation CSS3 pour obtenir des effets d'animation image par image. Les amis intéressés peuvent s'y référer.

Pure CSS3 réalise un effet d'animation de chargement de page (avec code)

15 Oct 2018

Lors de l'ouverture d'une page, vous rencontrez souvent une situation de chargement de la page. En tant que développeur front-end, savez-vous comment utiliser CSS3 pour obtenir des effets d'animation de chargement de page ? Cet article partagera avec vous un code d'effet d'animation de chargement CSS3 sympa et pratique. Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.

Comment utiliser habilement les effets spéciaux CSS3 pour améliorer l'expérience utilisateur des pages Web

09 Sep 2023

Comment utiliser habilement les effets spéciaux CSS3 pour améliorer l'expérience utilisateur des pages Web Avec le développement d'Internet, la conception Web et l'expérience utilisateur sont devenues des liens importants dans le développement de sites Web. L'application d'effets spéciaux CSS3 peut ajouter de la dynamique et des effets visuels aux pages Web et améliorer l'expérience utilisateur. Cet article présentera plusieurs effets spéciaux CSS3 courants et leurs exemples de code pour aider les développeurs à mieux utiliser les effets spéciaux CSS3 et à améliorer l'expérience utilisateur des pages Web. Effet de transition (Transition) L'effet de transition est l'un des effets spéciaux les plus basiques de CSS3 en modifiant un certain attribut.

Implémentation d'effets visuels CSS3

22 Mar 2018

Cette fois, je vais vous présenter l'implémentation des effets spéciaux visuels CSS3. Quelles sont les précautions pour réaliser les effets spéciaux visuels CSS3. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Quoi utiliser pour obtenir un effet d'animation CSS3

07 Jun 2022

Pour obtenir l'effet d'animation CSS3 : 1. Utilisez la règle "@keyframes" et l'attribut d'animation pour obtenir l'effet d'animation ; 2. Utilisez l'attribut de transition pour obtenir l'effet d'animation. La syntaxe est "élément {transition : nom de l'attribut courbe de vitesse de temps". retard}".

Comment utiliser CSS3 pour obtenir des effets stéréoscopiques 3D

14 Mar 2018

Cette fois, je vais vous montrer comment utiliser CSS3 pour obtenir des effets spéciaux tridimensionnels 3D. Quelles sont les précautions à prendre pour utiliser CSS3 pour obtenir des effets spéciaux tridimensionnels 3D, jetons un coup d'œil.

CSS3 pur pour obtenir un effet d'animation de serviteurs

12 Jun 2020

Cet article vous présentera comment obtenir l'effet d'animation Minion en utilisant du CSS3 pur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Comment obtenir un effet d'animation de zoom en CSS3

08 Dec 2021

En CSS, vous pouvez utiliser la règle "@keyframes", les attributs d'animation et de transformation pour obtenir des effets d'animation de mise à l'échelle. La syntaxe est "element {animation: name time}@keyframes name {100%{transform:scale(x,y); }}".

See all articles