• 技术文章 >Web开发 >JavaScript

    生日快乐代码js特效

    小妮浅浅小妮浅浅2021-01-22 17:41:59原创9525

    在学习了不少js知识点后，如果有身边人快过生日，可以通过js代码编写出生日快乐的特效送给他。既是给别人一个惊喜，也是自身js学习的一个检验。在开始js运行时，我们要先检验下代码运行的环境是否符合，然后就生日快乐的代码展开讲解。

    1.js代码运行环境

    浏览器(引擎)

    node(基于v8渲染js)

    webview(v8引擎)

    2.js生日快乐代码

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    <div class="button-style1">

    <a href="Memories.html" class="lk1">

        <div class="link1">

            <div class="bt1">

                我很喜欢

            </div>

        </div>

    </a>   

    </div>

    <div class="button-style2">

    <a class="lk2">

        <div class="link2">

            <div class="bt1">

                我不喜欢

            </div>

        </div>

    </a>

    </div>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    89

    90

    91

    92

    93

    94

    95

    96

    97

    98

    99

    100

    101

    102

    103

    104

    105

    106

    107

    108

    109

    110

    111

    112

    113

    114

    115

    116

    117

    118

    .button-style1 ,.button-style2{

    position:absolute;

    top:41%;

    opacity:1;

    z-index:100;

    }

    .button-style1 {

    position:absolute;

    left:20%;

    animation:btn1 15s; /*这是CSS3的动画属性，着这里定义动画的名称和持续时间，也可以用animation-delay定义动画延时多少s播放*/

    }

    .button-style2 {

    position:absolute;

    left:68%;

    animation:btn2 15s;

    }

    @keyframes btn1 { /*这里是对动画的定义，我们只需要定义几个关键帧，它会自动完成补间。*/

    0% {

        opacity:0;

        left:43.5%;

    }

    70% {

        opacity:0;

        left:43.5%;

    }

    100% {

        opacity:1;

        left:20%;

    }

    }

    @-webkit-keyframes btn1 { /*这里是声明获取不同浏览器的支持，还有几个干脆我就懒得写了，反正我也不是给所有人写的，自己能看就行*/

    0% {

        opacity:0;

        left:43.5%;

    }

    70% {

        opacity:0;

        left:43.5%;

    }

    100% {

        opacity:1;

        left:20%;

    }

    }

    @keyframes btn2 {

    0% {

        opacity:0;

        left:43.5%;

    }

    70% {

        opacity:0;

        left:43.5%;

    }

    100% {

        opacity:1;

        left:68%;

    }

    }

    @-webkit-keyframes btn2 {

    0% {

        opacity:0;

        left:43.5%;

    }

    70% {

        opacity:0;

        left:43.5%;

    }

    100% {

        opacity:1;

        left:68%;

    }

    }

    .lk1,.lk2 {

    text-decoration:none;

    font-family: Microsoft YaHei;

    color:#fff;

    transition:all 0.5s;

    }

    .link1,.link2 {

    width:170px;

    height:60px;

    border:2px solid #fff;

    -webkit-border:1px solid #fff;

    border-radius:30px;

    font-size: 23px;

    text-align:center;

    background: #ee9ca7;

    transition:all 0.8s;

    }

    .link2 {

    cursor:not-allowed;

    }

    .bt1,.bt2 {

    position:relative;

    top:22%;

    vertical-align:middle;

    }

      

    a.lk1:hover { /*这里使用CSS选择器，定义鼠标滑过效果*/

    color:#ee9ca7;

    transition:all 0.5s;

    }

    .link1:hover {

    background-color:#fff;

    background-color:rgba(255,255,255,0,2);

    border:2px solid #BBB;

    transition:all 0.8s;

    }

    a.lk2:hover {

    color:#ee9ca7;

    transition:all 0.5s;

    }

    .link2:hover {

    background-color:#fff;

    background-color:rgba(255,255,255,0,2);

    border:2px solid #BBB;

    transition:all 0.8s;

    }

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    <div class="section">

              <div class="ly-box01">

                <div class="ly-txt01">

                  <p class="ly-stxt01">XXXXXXXXXXXXXXXXXXXXXXX</p>

                  <p class="ly-stxt02">XXXXXXXXXXXXXXXXXXXXXXX</p>

                  <p class="ly-stxt03">XXXXXXXXXXXXXXXXXXXXXXX</p>

                  <p class="ly-stxt04">XXXXXXXXXXXXXXXXXXXXXXX</p>

                  <p class="ly-stxt05">XXXXXXXXXXXXXXXXXXXXXXX</p>

                </div>

                <div class="ly-txt02">

                  <p class="ly-stxt06">XXXXXXXXXXXXXXXXXXXXXXX</p>

                  <p class="ly-stxt07">XXXXXXXXXXXXXXXXXXXXXXX</p>

                  <p class="ly-stxt08">XXXXXXXXXXXXXXXXXXXXXXX</p>

                  <p class="ly-stxt09">XXXXXXXXXXXXXXXXXXXXXXX</p>

                  <p class="ly-stxt10">XXXXXXXXXXXXXXXXXXXXXXX</p>

                </div>

            </div>

          </div>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    89

    90

    91

    92

    93

    94

    95

    96

    97

    98

    99

    100

    101

    102

    103

    104

    105

    106

    107

    108

    109

    110

    111

    112

    113

    114

    115

    116

    117

    118

    119

    120

    121

    122

    123

    124

    125

    126

    127

    128

    129

    130

    131

    132

    133

    134

    135

    136

    137

    138

    139

    140

    141

    142

    143

    144

    145

    146

    147

    148

    149

    150

    151

    152

    153

    154

    155

    156

    157

    158

    159

    160

    161

    162

    163

    164

    165

    166

    167

    168

    169

    170

    171

    172

    173

    174

    175

    176

    177

    178

    179

    180

    181

    182

    183

    184

    185

    186

    187

    188

    189

    190

    191

    192

    193

    194

    195

    196

    197

    198

    199

    200

    201

    202

    203

    204

    205

    206

    207

    208

    209

    210

    211

    212

    213

    214

    215

    216

    217

    218

    219

    220

    221

    222

    223

    224

    225

    226

    227

    228

    229

    230

    231

    232

    233

    234

    235

    236

    237

    238

    239

    240

    241

    242

    243

    244

    245

    246

    247

    248

    249

    250

    251

    252

    253

    254

    255

    256

    257

    258

    259

    260

    261

    262

    263

    264

    265

    266

    267

    268

    269

    270

    271

    272

    273

    274

    275

    276

    277

    278

    279

    280

    281

    282

    283

    284

    285

    286

    287

    288

    289

    290

    291

    292

    293

    294

    295

    296

    297

    298

    299

    300

    301

    302

    303

    304

    305

    306

    307

    308

    309

    310

    311

    312

    313

    314

    315

    316

    317

    318

    319

    320

    321

    322

    323

    324

    325

    326

    327

    328

    329

    330

    331

    332

    333

    334

    335

    336

    337

    338

    339

    340

    341

    342

    343

    344

    345

    346

    347

    348

    349

    350

    351

    352

    353

    354

    355

    356

    357

    358

    359

    360

    361

    362

    363

    364

    365

    366

    367

    368

    369

    370

    371

    372

    373

    374

    375

    376

    377

    378

    379

    380

    381

    382

    383

    384

    385

    386

    387

    388

    389

    390

    391

    392

    393

    394

    395

    396

    397

    398

    399

    400

    401

    402

    403

    404

    405

    406

    407

    408

    409

    410

    411

    412

    413

    414

    415

    416

    417

    418

    419

    420

    421

    422

    423

    424

    425

    426

    427

    428

    429

    430

    431

    432

    433

    434

    435

    436

    437

    438

    439

    440

    441

    442

    443

    444

    445

    446

    447

    448

    449

    450

    451

    452

    453

    454

    455

    456

    457

    458

    459

    460

    461

    462

    463

    464

    465

    466

    467

    468

    469

    470

    471

    472

    .ly-box01 {

        width:50px;

        height:50px;

        background-color:#FFF;

        border-radius: 25px;

        position: absolute;

        left: 48%;

        bottom: 50%;

        margin-bottom:50%;

        overflow: hidden;

        transform-origin:center bottom;

        animation:box_to_point 18.5s 0s,bounce 2.5s 18.5s;

    }

      

    @keyframes box_to_point{

        0% {

            margin-bottom:50%;

            width:50px;

            height:50px;

            border-radius: 25px;

            position: absolute;

            left: 48%;

            bottom: 50%;

            }

        10% {

            margin-bottom:0;

            width:50px;

            height:50px;

            border-radius: 25px;

            background-color:rgba(255,255,255,1);

            position: absolute;

            left: 48%;

            bottom: 50%;

        }

        14% {

            margin-bottom:0;

            width: 80%;

            height: 550px;

            border-radius: 6px;

            background-color:rgba(255,255,255,0.5);

            position: absolute;

            left: 10%;

            bottom: 12%;

        }

        96% {

            margin-bottom:0;

            width: 80%;

            height: 550px;

            border-radius: 6px;

            background-color:rgba(255,255,255,0.6);

            position: absolute;

            left: 10%;

            bottom: 12%;

        }

        100% {

            margin-bottom:0;

            width:50px;

            height:50px;

            border-radius: 25px;

            background-color:rgba(255,255,255,1);

            position: absolute;

            left: 48%;

            bottom: 50%;

        }

    }

    @-webkit-keyframes box_to_point{

        0% {

            margin-bottom:50%;

            width:50px;

            height:50px;

            border-radius: 25px;

            position: absolute;

            left: 48%;

            bottom: 50%;

            }

        10% {

            margin-bottom:0;

            width:50px;

            height:50px;

            border-radius: 25px;

            background-color:rgba(255,255,255,1);

            position: absolute;

            left: 48%;

            bottom: 50%;

        }

        14% {

            margin-bottom:0;

            width: 80%;

            height: 550px;

            border-radius: 6px;

            background-color:rgba(255,255,255,0.5);

            position: absolute;

            left: 10%;

            bottom: 12%;

        }

        96% {

            margin-bottom:0;

            width: 80%;

            height: 550px;

            border-radius: 6px;

            background-color:rgba(255,255,255,0.6);

            position: absolute;

            left: 10%;

            bottom: 12%;

        }

        100% {

            margin-bottom:0;

            width:50px;

            height:50px;

            border-radius: 25px;

            background-color:rgba(255,255,255,1);

            position: absolute;

            left: 48%;

            bottom: 50%;

        }

    }

    @keyframes bounce{

        0% {

            margin-bottom:0;

            width: 50px;

            height: 50px;

            border-radius: 25px;

            bottom:50%;

            left: 48%;

        }

        50% {

            margin-bottom:0;

            left: 48%;

            width: 50px;

            height: 50px;

            border-radius: 25px;

            bottom:0;

            left: 48%;

        }

        100% {

            margin-bottom:0;

            width: 20px;

            height: 20px;

            border-radius: 10px;

            left: 48%;

            bottom: 0;

            left: 20%;

        }

    }

    @-webkit-keyframes bounce{

            0% {

            margin-bottom:0;

            width: 50px;

            height: 50px;

            border-radius: 25px;

            bottom:50%;

            left: 48%;

        }

        50% {

            margin-bottom:0;

            left: 48%;

            width: 50px;

            height: 50px;

            border-radius: 25px;

            bottom:0;

            left: 48%;

        }

        100% {

            margin-bottom:0;

            width: 20px;

            height: 20px;

            border-radius: 10px;

            left: 48%;

            bottom: 0;

            left: 20%;

        }

    }

    /*文本*/

    .ly-txt01 {

        position:absolute;

        width: 40%;

        left:10%;

        top:10%;

    }

    .ly-txt02 {

        position:absolute;

        width: 40%;

        left:60%;

        top:10%;

    }

    .ly-stxt01 {

        font-family: Microsoft YaHei;

        font-size: 30px;

        font-color: #000;

        position: relative;

        left: 5%;

        top: 5%;

        opacity: 0;

        animation:ly-stxt01_move 15s;

        animation-delay:3s;

        -webkit-animation:ly-stxt01_move 15s;

        -webkit-animation-delay:3s;

    }

    @keyframes ly-stxt01_move{

        0% {opacity:0;}

        8% {opacity:1;}

        90% {opacity:1;}

        98% {opacity:0;}

        100% {opacity:0;}

    }

    @-webkit-keyframes ly-stxt01_move{

        0% {opacity:0;}

        8% {opacity:0;}

        90% {opacity:1;}

        98% {opacity:0;}

        100% {opacity:0;}

    }

      

    .ly-stxt02 {

        font-family: Microsoft YaHei;

        font-size: 30px;

        font-color: #000;

        position: relative;

        left: 5%;

        top: 5%;

        margin-top:-71px;

        opacity: 0;

        animation:ly-stxt02_move 15s;

        animation-delay:3s;

        -webkit-animation:ly-stxt02_move 15s;

        -webkit-animation-delay:3s;

    }

    @keyframes ly-stxt02_move{

        0% {opacity:0;margin-top:-71px;}

        8% {opacity:0;margin-top:-71px;}

        16% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

    @-webkit-keyframes ly-stxt02_move{

        0% {opacity:0;margin-top:-71px;}

        8% {opacity:0;margin-top:-71px;}

        16% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

      

    .ly-stxt03 {

        font-family: Microsoft YaHei;

        font-size: 30px;

        font-color: #000;

        position: relative;

        left: 5%;

        top: 5%;

        opacity: 0;

        margin-top:-71px;

        animation:ly-stxt03_move 15s;

        animation-delay:3s;

        -webkit-animation:ly-stxt03_move 15s;

        -webkit-animation-delay:3s;

    }

    @keyframes ly-stxt03_move{

        0% {opacity:0;margin-top:-71px;}

        16% {opacity:0;margin-top:-71px;}

        24% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

    @-webkit-keyframes ly-stxt03_move{

        0% {opacity:0;margin-top:-71px;}

        16% {opacity:0;margin-top:-71px;}

        24% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

      

    .ly-stxt04 {

        font-family: Microsoft YaHei;

        font-size: 30px;

        font-color: #000;

        position: relative;

        left: 5%;

        top: 5%;

        opacity: 0;

        margin-top:-71px;

        animation:ly-stxt04_move 15s;

        animation-delay:3s;

        -webkit-animation:ly-stxt04_move 15s;

        -webkit-animation-delay:3s;

    }

    @keyframes ly-stxt04_move{

        0% {opacity:0;margin-top:-71px;}

        24% {opacity:0;margin-top:-71px;}

        32% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

    @-webkit-keyframes ly-stxt04_move{

        0% {opacity:0;margin-top:-71px;}

        24% {opacity:0;margin-top:-71px;}

        32% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

      

    .ly-stxt05 {

        font-family: Microsoft YaHei;

        font-size: 30px;

        font-color: #000;

        position: relative;

        left: 5%;

        top: 5%;

        opacity: 0;

        margin-top:-71px;

        animation:ly-stxt05_move 15s;

        animation-delay:3s;

        -webkit-animation:ly-stxt05_move 15s;

        -webkit-animation-delay:3s;

    }

    @keyframes ly-stxt05_move{

        0% {opacity:0;margin-top:-71px;}

        32% {opacity:0;margin-top:-71px;}

        40% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

    @-webkit-keyframes ly-stxt05_move{

        0% {opacity:0;margin-top:-71px;}

        32% {opacity:0;margin-top:-71px;}

        40% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

      

    .ly-stxt06 {

        font-family: Microsoft YaHei;

        font-size: 30px;

        font-color: #000;

        position: relative;

        right: 5%;

        top: 5%;

        opacity: 0;

        animation:ly-stxt06_move 15s;

        animation-delay:3s;

        -webkit-animation:ly-stxt06_move 15s;

        -webkit-animation-delay:3s;

    }

    @keyframes ly-stxt06_move{

        0% {opacity:0;}

        40% {opacity:0;}

        48% {opacity:1;}

        90% {opacity:1;}

        100% {opacity:0;}

    }

    @-webkit-keyframes ly-stxt06_move{

        0% {opacity:0;}

        40% {opacity:0;}

        48% {opacity:1;}

        90% {opacity:1;}

        100% {opacity:0;}

    }

      

    .ly-stxt07 {

        font-family: Microsoft YaHei;

        font-size: 30px;

        font-color: #000;

        position: relative;

        right: 5%;

        top: 5%;

        opacity: 0;

        margin-top:-71px;

        animation:ly-stxt07_move 15s;

        animation-delay:3s;

        -webkit-animation:ly-stxt07_move 15s;

        -webkit-animation-delay:3s;

    }

    @keyframes ly-stxt07_move{

        0% {opacity:0;margin-top:-71px;}

        48% {opacity:0;margin-top:-71px;}

        56% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

    @-webkit-keyframes ly-stxt07_move{

        0% {opacity:0;margin-top:-71px;}

        48% {opacity:0;margin-top:-71px;}

        56% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

      

    .ly-stxt08 {

        font-family: Microsoft YaHei;

        font-size: 30px;

        font-color: #000;

        position: relative;

        right: 5%;

        top: 5%;

        opacity: 0;

        margin-top:-71px;

        animation:ly-stxt08_move 15s;

        animation-delay:3s;

        -webkit-animation:ly-stxt08_move 15s;

        -webkit-animation-delay:3s;

    }

    @keyframes ly-stxt08_move{

        0% {opacity:0;margin-top:-71px;}

        56% {opacity:0;margin-top:-71px;}

        64% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

    @-webkit-keyframes ly-stxt08_move{

        0% {opacity:0;margin-top:-71px;}

        56% {opacity:0;margin-top:-71px;}

        64% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

      

    .ly-stxt09 {

        font-family: Microsoft YaHei;

        font-size: 30px;

        font-color: #000;

        position: relative;

        right: 5%;

        top: 5%;

        opacity: 0;

        margin-top:-71px;

        animation:ly-stxt09_move 15s;

        animation-delay:3s;

        -webkit-animation:ly-stxt09_move 15s;

        -webkit-animation-delay:3s;

    }

    @keyframes ly-stxt09_move{

        0% {opacity:0;margin-top:-71px;}

        64% {opacity:0;margin-top:-71px;}

        72% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

    @-webkit-keyframes ly-stxt09_move{

        0% {opacity:0;margin-top:-71px;}

        64% {opacity:0;margin-top:-71px;}

        72% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

      

    .ly-stxt10 {

        font-family: Microsoft YaHei;

        font-size: 30px;

        font-color: #000;

        position: relative;

        right: 5%;

        top: 5%;

        opacity: 0;

        margin-top:-71px;

        animation:ly-stxt10_move 15s;

        animation-delay:3s;

        -webkit-animation:ly-stxt10_move 15s;

        -webkit-animation-delay:3s;

    }

    @keyframes ly-stxt10_move{

        0% {opacity:0;margin-top:-71px;}

        72% {opacity:0;margin-top:-71px;}

        80% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

    @-webkit-keyframes ly-stxt10_move{

        0% {opacity:0;margin-top:-71px;}

        72% {opacity:0;margin-top:-71px;}

        80% {opacity:1;margin-top:0;}

        90% {opacity:1;margin-top:0;}

        100% {opacity:0;margin-top:0;}

    }

    以上就是使用js代码做的生日快乐特效，其中还包括了HTML5和CSS3的知识点，在进行代码编写时要灵活运用其他的知识模块。

    专题推荐：生日快乐代码js特效
    上一篇：js数组操作方法 下一篇：js定时器为什么会出现第一次延迟

    相关文章推荐

    • js四舍五入保留两位小数 5入• js正则限制字符串长度• js代码在线运行• js数组操作方法

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
    • 

    Python学习网

    首页 首页视频视频手册手册图文图文文章文章社区社区