Rumah

Kesan khas JS

Kesan khas CSS3

CSS3 seperti tambah satu kesan khas animasi

Muat turun sekarang Pratonton

kod 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点赞按钮动画效果。

Penafian

Semua sumber di laman web ini disumbangkan oleh netizen atau dicetak semula oleh tapak muat turun utama. Sila semak integriti perisian itu sendiri! Semua sumber di laman web ini adalah untuk rujukan pembelajaran sahaja. Tolong jangan gunakannya untuk tujuan komersial. Jika tidak, anda akan bertanggungjawab untuk semua akibat! Jika terdapat sebarang pelanggaran, sila hubungi kami untuk memadamkannya. Maklumat hubungan: admin@php.cn

Artikel Berkaitan

HTML5 css3 bar kemajuan animasi kod kesan khas [disyorkan]_html5 kemahiran tutorial

16 May 2016

Editor di bawah akan berkongsi dengan anda kod kesan khas animasi hitung detik css3 HTML5 css3 [disyorkan]. Semoga ia membantu semua orang. Mari ikuti editor dan lihat.

Ubah bentuk CSS3 dan kesan animasi effect_form kesan khas

16 May 2016

Artikel ini terutamanya memperkenalkan kesan ubah bentuk dan animasi CSS3 animasi CSS3 terutamanya menggunakan tiga atribut: transformasi, peralihan dan animasi Rakan yang memerlukan boleh merujuk kepada perkara berikut

CSS3 tulen mencipta kesan khas animasi di mana bayang sempadan merebak ke luar

25 Aug 2021

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan CSS3 untuk melaksanakan kesan dinamik butang berlegar dan berkelip", kami memperkenalkan kaedah menggunakan CSS3 untuk menambah kesan dinamik pada butang dan mencapai kesan animasi bayang-bayang berlegar dan berkelip. Hari ini, artikel ini akan berkongsi dengan anda kesan animasi sempadan Mari lihat cara menggunakan CSS3 untuk mencapai kesan animasi bayang sempadan yang merebak ke luar.

Cara mahir menggunakan kesan khas CSS3 untuk meningkatkan pengalaman pengguna halaman web

09 Sep 2023

Cara menggunakan kesan khas CSS3 dengan mahir untuk meningkatkan pengalaman pengguna laman web Dengan perkembangan Internet, reka bentuk web dan pengalaman pengguna telah menjadi pautan penting dalam pembangunan laman web. Aplikasi kesan khas CSS3 boleh menambah dinamik dan kesan visual pada halaman web dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan beberapa kesan khas CSS3 biasa dan contoh kodnya untuk membantu pembangun menjadi lebih mahir dalam menggunakan kesan khas CSS3 dan meningkatkan pengalaman pengguna halaman web. Kesan peralihan (Peralihan) Kesan peralihan ialah salah satu kesan khas yang paling asas dalam CSS3 Dengan menukar atribut

putaran kesan css3

27 May 2023

Putaran kesan khas CSS3 Dalam reka bentuk web, kesan khas dinamik boleh meningkatkan interaktiviti dan kesenian halaman web, menjadikan pengguna melayari halaman web dengan lebih gembira. Antaranya, kesan putaran adalah kesan khas yang agak biasa. Dalam CSS3, kesan putaran boleh dicapai melalui atribut transformasi. 1. Gunakan transformasi untuk mencapai putaran Atribut transformasi dalam CSS3 digunakan untuk mencapai kesan ubah bentuk elemen, seperti putaran, pergerakan, penskalaan, dsb. Apabila menyedari kesan putaran elemen, anda boleh menggunakan fungsi putaran putar Sintaks khusus adalah seperti berikut: tra

jQuery melaksanakan kesan khas akordion dengan penstrim kaca texture_jquery

16 May 2016

Artikel ini terutamanya memperkenalkan jQuery untuk melaksanakan kesan khas akordion dengan tekstur strim kaca Ia adalah kesan khas akordion berdasarkan jQuery CSS3. Saya harap anda menyukainya.

Contoh terperinci kesan flop 3D kesan khas css3

16 May 2016

Artikel ini terutamanya memperkenalkan kesan flop 3D kesan khas CSS3 Ia mempunyai nilai rujukan tertentu Rakan-rakan yang berminat boleh merujuknya.

Kod CSS3 untuk melaksanakan kesan box_form log masuk latar belakang dinamik

16 May 2016

Artikel ini memperkenalkan kesan khas kotak log masuk latar belakang dinamik dengan kesan animasi berdasarkan jQuery CSS3 Rakan yang memerlukannya boleh merujuknya.

Bagaimana untuk mencapai kesan membalikkan imej dalam CSS3

23 Apr 2023

Dalam reka bentuk web, gambar adalah salah satu elemen yang sangat diperlukan. Selalunya terdapat keperluan untuk melakukan kesan khas pada gambar, seperti kesan menyelak gambar. Jadi bagaimana untuk menggunakan CSS3 untuk mencapai kesan flip imej? Artikel ini akan memperkenalkan secara terperinci kaedah untuk mencapai kesan flipping imej dalam CSS3. 1. Melaksanakan kesan flipping imej dalam CSS3 CSS3 menyediakan kita dengan dua cara untuk mencapai flipping imej: 1. Gunakan atribut transform untuk flip imej 2. Gunakan atribut backface-visibility untuk flip imej 2. Gunakan tran

See all articles