前端页面的各种特效

最新推荐文章于 2024-07-28 20:04:07 发布

dae bal

最新推荐文章于 2024-07-28 20:04:07 发布

阅读量1.6k

点赞数 3

分类专栏：前端有趣

本文链接：https://blog.csdn.net/baidu_39043816/article/details/88796773

版权

前端同时被 2 个专栏收录

164 篇文章 2 订阅

订阅专栏

有趣

11 篇文章 0 订阅

订阅专栏

前端特效博客

鼠标点击加小红心

		.heart {
			width: 10px;
			height: 10px;
			position: fixed;
			background: #f00;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
		}

		.heart:after,
		.heart:before {
			content: '';
			width: inherit;
			height: inherit;
			background: inherit;
			border-radius: 50%;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			position: fixed;
		}

		.heart:after {
			top: -5px;
		}

		.heart:before {
			left: -5px;
		}
<script>
	/**显示鼠标点击出现小红心*/
		! function(e, t, a) {
			function r() {
				for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[
						e].scale += 0.004, s[e].alpha -= 0.013, s[e].el.style.cssText = 'left:' + s[e].x + 'px;top:' + s[e].y +
					'px;opacity:' + s[e].alpha + ';transform:scale(' + s[e].scale + ',' + s[e].scale + ') rotate(45deg);background:' +
					s[e].color + ';z-index:99999');
				requestAnimationFrame(r)
			}

			function n() {
				var t = 'function' == typeof e.onclick && e.onclick;
				e.onclick = function(e) {
					t && t(),
						o(e)
				}
			}

			function o(e) {
				var a = t.createElement('div');
				a.className = 'heart',
					s.push({
						el: a,
						x: e.clientX - 5,
						y: e.clientY - 5,
						scale: 1,
						alpha: 1,
						color: c()
					}),
					t.body.appendChild(a)
			}

			function i(e) {
				var a = t.createElement('style');
				a.type = 'text/css';
				try {
					a.appendChild(t.createTextNode(e))
				} catch (t) {
					a.styleSheet.cssText = e
				}
				t.getElementsByTagName('head')[0].appendChild(a)
			}

			function c() {
				return 'rgb(' + ~~(255 * Math.random()) + ',' + ~~(255 * Math.random()) + ',' + ~~(255 * Math.random()) + ')'
			}
			var s = [];
			e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame ||
				e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
					setTimeout(e, 1000 / 60)
				},
				i(
					'.heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: \'\';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}'
				),
				n(),
				r()
		}(window, document);
		
	</script>

下雪的页面特效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>想和你一起去看雪</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            height: 100vh;
            background: radial-gradient(ellipse at bottom,
                    #1b2735 0, #090a0f 100%);
            filter: drop-shadow(0 0 10px white);
            position: relative;
        }

        .snow {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
        }
        .mywords
        {
            position: fixed;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
            color: #fff;
            font-size: 1.5em;
            line-height: 2em;
            font-weight: 500;
            display: flex;
            flex-wrap: wrap;
           
        }
        .mywords  span{
            animation: jumpin 0.5s ease-out both;
            
        }
        @keyframes jumpin {
            from{
                transform: translateY(-20%);
                opacity: 0;
            }
            to{
                transform: translateY(0);
                opacity: 1;
            }
        }
       
    </style>
</head>

<body>
    <p class="mywords">
       背景特效
    </p>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function () {
            var words=$(".mywords").text().split("");
            $(".mywords").empty();
            words.forEach((w,i)=>{
                $(`<span>${w}</span>`).css({
                    "animation-delay": 0.1*i+'s'
                }).appendTo($(".mywords"));
            });
            for(var i=0;i<200;i++)
            {
                var x=Math.random()*100;
                var y=Math.random()*100;
                var scale=Math.random();
                var opacity=Math.random();
                var t1=Math.random()*20+10;
                var t2=Math.random()*30;

                var o=Math.random()*20-10;
                var x1=x+o;
                var x2=x+o/2;

                $(`<style> @keyframes fall${i} {
            ${y}%{
                transform: translate(${x1}vw, ${y}vh) scale(${scale});
            }
            to{
                transform: translate(${x2}vw,100vh) scale(${scale});
            }
        }
    </style>`).appendTo($("head"));
                $('<div class="snow"></div>')
                    .css({
                        "transform": `translate(${x}vw, -10px) scale(${scale})`,
                        "opacity": opacity,
                        "animation": `fall${i} ${t1}s -${t2}s linear infinite`
                    })
                    .appendTo($("body")).end()
                    
            }
        })
    </script>
</body>

</html>

参考：https://blog.csdn.net/Miracle1203/article/details/105973389?utm_medium=distribute.pc_category.none-task-blog-hot-9.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-9.nonecase&request_id=

爱心特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin: 0px;padding: 0px;}
        .heart {width: 400px;margin: 100px auto;position: relative;}
        .lovefall:before,.lovefall:after {content: "";position: absolute;width: 20px;height: 30px;display: block;background: red;border-radius: 10px 10px 0 0;}
		/* 第三步 */
		.lovefall:before {transform: rotate(-45deg);}
		.lovefall:after {transform: rotate(45deg);left:7px;}
	</style>
</head>
<body>
    <div class="heart">
        <div class="lovefall"></div>
    </div>
</body>

</html>

如果想让爱心飘落，可以加上以下代码：

 <script src="js/jquery.js"></script>
 <script src="js/snowfall.jquery.js"></script>
<script>
    $(function () {
        setTimeout(function () {
            $(document).snowfall({
                falkeCount: 520, //设置爱心数目
                flakeColor: 'none'
            })
        }, 2000);
    })
</script>

移动导航菜单的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .menu-box { margin-top: 200px; }
      .menu {
          position: relative;
          width: 100px;
          height: 100px;
      }
      .menu:before ,
      .menu:after {
          content: " ";
          position: absolute;
          left: 0;
          display: block;
          width: 100px;
          height: 10px;
          background: #000;
          border-radius: 8px;
          transition: all .25s ease-in-out;
      }
      .menu:before {
          top: 5px;
          /* 利用阴影制作中间的那根线，当鼠标hover时隐藏 */
          box-shadow: 0 37px #000;
      }
      .menu:after {
          bottom: 5px;
      }
      .menu:hover:before {
          top: 40px;
          box-shadow: none;
          transform: rotate(225deg);
      }
      .menu:hover:after {
          /* hover时偏移的位置、旋转的角度 */
          bottom: 50px;
          transform: rotate(135deg);
      }
	</style>
</head>
<body>
    <div clas="menu-box">
    	<div class="menu"></div>
    </div>
</body>
</html>