2. 程式人生 > >點贊+1效果

點贊+1效果

阿新 • • 發佈：2019-01-04

html程式碼：

<body>
    <h1>❤<span>+1</span></h1>
</body>

css程式碼：

    h1{
            font-size: 50px;
            color: pink;
            text-align: center;
            position: relative;
        }
        span{
            font-size: 25px;
            font-weight
 
: normal;
            color: #333;
            position: absolute;
            top: 0;
            left: 50%;
            opacity: 0;
        }
        .active span{
            -webkit-animation:flutter 1.2s ease-in-out;
            animation:flutter 1.2s 1 ease-in-out;
        }
        @keyframes flutter
 
{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 1;
                top: -10px;
                left: 53%;
            }
        }

js程式碼：

$("h1").on("click",function(){
        if(!$(this).is(".active")){
            $(this).addClass("active");    
        }

    })

點選過後效果圖如下：

這裡寫圖片描述

相關推薦

點贊+1效果

html程式碼： <body> <h1>❤<span>+1</span></h1> </body> css程式碼：

點贊+1飄浮效果的實現

position top ML doctype title solid fonts reat charset 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

jQuery點贊動畫效果+1的程式碼實現

{#點贊效果#} <script type="text/javascript"> (function ($) { $.extend({

實現點贊動態效果

ret return hit ews doctype interval head obj width 點贊的動態效果,源碼如下: ============== URL.py ================ url(r‘^zan.html$‘, views.zan),

Android中實現雙擊點贊動畫效果

iv_easy_like.getBackground().setAlpha(0); rlLike.setOnTouchListener(new OnDoubleClickListener(new OnDoubleClickListener.DoubleClickCallb

帶動畫特效的點贊+1

這是html的程式碼      特效的js見附錄   需要jQuery的支援 <div class="mui-media-body "><span onclick="to_reply_list('${obj.id}')" style="float: lef

css簡單實現五角星評分、點贊收藏、展示評分（半顆星、1/3顆星）

效果 詳細講解 pad nic bsp img () 之前 技術分享 1.前言 之前做的好幾個項目中，都會遇到打分，評分，點贊這樣的需求，寫了很多次，每次需要再寫的時候，就會翻出之前寫過的代碼，然後copy過來。總覺得這樣的話沒有進步，沒有把知識放進腦袋裏，所以，自己花了2

用Flutter實現一個仿Twitter的點贊效果

  這次依然是補作業，之前在寫仿“探探”左滑/右滑的效果的時候，設計稿底部的喜歡Icon其實是有類似於Twitter點贊那種的動效的，但是因為時間原因我偷懶沒寫。   慣例先上效果圖：   GitHub地址：github.com/yumi0629/Fl…   整體演算法是參照了GitHu

Android點贊效果的實現

先看下點讚的效果圖 首先新增依賴 api 'com.sackcentury:shinebutton:0.2.0' xml佈局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=

仿花束直播點贊效果

這是一個利用貝塞爾曲線實現的仿花束直播的點贊效果，實現該效果涉及到： 1、Random隨機數的使用； 2、ObjectAnimator屬性動畫及插值器的使用； 3、貝塞爾曲線的使用； /** * Created by Administrator on 2018/1/30. * 點

Android自定義View教你一步一步實現即刻點贊效果

前言 今天朋友看了HenCoder的自定義View後說，HenCoder對自定義View講的不錯。實踐中仿寫即刻的點贊你有思路嗎，你不實現一下？二話不說，看了朋友手機效果，對他說：實現不難，用到了位移，縮放，漸變動畫和自定義View的基礎用法，好，那我實現一下，剛好加深對自定義View的理解。 素材準備

Android -- 自定義ViewGroup+貝塞爾+屬性動畫實現仿QQ點贊效果

private void init(final Context context) { mStarDrawable = new ArrayList<>(); mInterpolators = new ArrayList<>(); mSt

JavaScript實現點贊效果

1：通過自定義封裝函式來獲取標籤元素；2：建立閉包來實現資料緩衝的效果3：迴圈遍歷按鈕，設定點選事件本文重點：瞭解閉包的作用，通過閉包可以實現資料的緩衝，即外層函式與裡層函式之間的語句在呼叫外層函式時只會執行一次示例程式碼<!DOCTYPE html> <h

android 雙擊動畫點贊效果

1.模仿抖音雙擊點贊效果 public class AnimatorLove extends RelativeLayout { private Context mContext; float[] num = {-30, -20, 0, 20, 30};//隨機

animate.css做點贊效果

nan img ted zip image 源碼下載 。。 下載 mat 花了一晚上研究出來的，感覺還行吧。。。 代碼： 源碼下載： http://image.niunan.net/animatedemo.zipanimate.css做點贊效果

python學習之網站的編寫（HTML，CSS，JS）（二十四）----------示例，點贊，點讚的同時旁邊出現一個逐漸變大的+1殘影並很快消失

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <st

Android自定義控制元件——點贊效果(仿Twitter)

前言 通過自定義控制元件，意欲模仿Twitter的點贊效果。 主要涉及： 1.三次貝塞爾曲線應用; 2.屬性動畫的綜合應用； 3.自定義View流程. 拆解原效果 我們先看一下Twitter上的原版效果是怎樣的. 放大後： 好吧！原速的

仿某直播平臺的點贊效果

現在的直播平臺已經是多的不得了了，而給主播點讚的效果，也是各不相同，今天，我們來自定義一個點讚的效果! 先上效果: 當點選點贊按鈕的時候，就會有不同顏色的心型從底部冒出，並按照不規則的路線運動,在運動過程中，伴隨著各種動畫! 好了，話不多說，直接上程式

開源專案GoodView點贊效果

點贊+1效果： GoodView方法： 使用GoodView的Demo:    public class MainActivity extends Activity { @Override protected void onCreate(B

Android/安卓仿淘寶直播點贊效果/qq空間點贊效果動畫

之前玩淘寶誤入它的直播頻道，發現它的直播介面的點贊效果挺好看，然後發現QQ控制元件點贊有類似動畫，於是趁有空花了點時間玩玩。 先上個效果圖： 添加了一個按鈕模擬點贊，點選多少次就出現多個水果，他們的運動軌跡和速度是不一樣的，而且帶有淡入淡出效果。這是淘寶直播的效果，qq