![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
动画效果
金翅
这个作者很懒,什么都没留下…
展开
-
不抖的css3图片无缝滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无缝滚动</title> <script src="js/jquery-3.2.1.min.js">&原创 2021-06-28 11:35:35 · 109 阅读 · 0 评论 -
安卓键盘弹出底部被顶起
//安卓键盘弹出底部被顶起 var oHeight = $(document).height(); $(window).resize(function(){ //ios软键盘弹出不会触发resize事件 if($(document).height() < oHeight){ $(".signIn_foo...原创 2019-12-30 15:24:55 · 324 阅读 · 0 评论 -
鼠标单击爆炸特效
html: <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>js: <script> eval(function(p, a, c, k, e, d) { e = ...转载 2018-10-10 17:04:40 · 1750 阅读 · 0 评论 -
超简单jq锚点动画效果+返回顶部
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/reset.css" /> &原创 2018-11-29 09:53:52 · 580 阅读 · 0 评论 -
判断mac电脑系统和"Safari"and"Chrome"
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel"); if(navigator.userAgent.indexOf("Safari"...原创 2018-11-26 15:54:33 · 1328 阅读 · 0 评论 -
js文字无缝滚动
css:.sds_zjmd{width: 420px;height: 168px;border:1px solid #AB1E2E;margin: 0 auto;margin-top: 30px;}.sds_right_p4{font-size:30px;line-height:40px;color: #AE3137;padding-top: 10px;text-align: center}...原创 2018-11-30 13:45:00 · 532 阅读 · 0 评论 -
当滚动条滚动到指定位置时元素显示隐藏
$(document).scroll(function(){ var scrTop = $(window).scrollTop(); var n_t = $('body').height() * 500; if(scrTop > n_t){ $('.klt_bg_down2').fadeIn() }else{ $('.k...原创 2019-01-25 15:39:21 · 4427 阅读 · 0 评论 -
文字滚动水平方向
css:*{margin: 0;padding: 0;}.yhq_318_text{width: 900px;height: 50px;background:rgba(255,233,188,1);border-radius:25px;margin-top: 23px;font-size: 16px;}.scroll li span{color: #725535;list-style: no...原创 2019-03-12 10:58:22 · 170 阅读 · 0 评论 -
判断滚动到第几个div
onload = function () {//////初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('.scroll'),// scrollToContainer = mainContainer.find('dl:last');//滚动到最后一个div处...原创 2019-05-09 15:52:19 · 808 阅读 · 0 评论 -
手风琴+tab选项卡切换相结合效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery实现导航栏</title> <script src="jquery-3.2.1.js"></script> <st...原创 2019-06-19 14:12:31 · 882 阅读 · 0 评论 -
svg线性波浪效果
<svg style="background: #E6B112;width: 100%;" width="1600" height="156" viewBox="0 0 1600 156" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="white" d="M 1600 164.648 V 66.442...原创 2019-06-20 13:40:25 · 2086 阅读 · 0 评论 -
console.log写样式
js:window.onload = function () { console.log("%c秋名山上行人稀,常有车手较高低。\n如今车道依旧在,不见当年老司机!"," color:#000;font-weight:bold;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0...原创 2018-10-09 14:16:18 · 461 阅读 · 0 评论 -
JS实现鼠标点击爱心特效
js:!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 += .004, s[e].alpha...转载 2018-10-09 14:13:12 · 8888 阅读 · 7 评论 -
用css实现文字抖动特效
html:<span class="shaky">你在说什么( ,,´・ω・)ノ"(´っω・`。)</span>css:.shaky { display: inline-block; padding: 1px; font-size: 12px; -webkit-transform-origin: center center; -ms-transform-origin: c...转载 2018-10-09 14:11:22 · 6785 阅读 · 0 评论 -
获取事件时控制滚动条滚动到相应的位置
html:<div style="height: 800px;"></div><input type="text" value="" class="search_input" /><div style="height: 800px;"></div>js:记原创 2018-04-08 15:37:40 · 793 阅读 · 0 评论 -
css3 loading加载动画
css:.spinner { margin-top: 100px; margin-right: auto; margin-bottom: 100px; margin-left: auto; width: 50px; height: 50px; position: relative;}.container1 > div, .container2...原创 2018-04-16 11:09:13 · 638 阅读 · 0 评论 -
超炫的图片爆炸效果
css样式:<style type="text/css"> *{margin: 0;padding: 0;list-style: none;} body{overflow: hidden;} #div{ width: 640px;height: 400px;position: absolute;left: 50%;top: 50%;mar...原创 2018-04-04 13:44:11 · 1378 阅读 · 0 评论 -
点击空白处隐藏 阻止事件向上冒泡
var myDiv = $(".div_box");//需要隐藏的内容 $(function() { $(".div_main").click(function(event) { //点击显示 $(myDiv).slideToggle(); $(document).one("click", functi...原创 2018-04-23 14:33:22 · 360 阅读 · 0 评论 -
css3 checkbox复选框样式的更改
css:<style> .mycheck { width:25px; margin:20px 100px; position:relative; } .mycheck input[type=checkbox] {...原创 2018-05-12 13:26:42 · 1161 阅读 · 0 评论 -
jquery怎么实现点击一个按钮控制一个div的显示和隐藏
示例html:<div class="abc" style="display:none"></div><input type="button" class="but" />最简单的方法:<script>$(document).ready(function(e) { $(".but&qu原创 2018-07-03 14:04:58 · 24415 阅读 · 1 评论 -
css3+js水波纹效果
html:<div id="wrap"> <h1>Android L Ripple Effect</h1> <div id="main"> <button>BUTTON</button> <button>BU转载 2018-08-15 11:21:36 · 3954 阅读 · 0 评论 -
丧心病狂的动画效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> html, body { wi转载 2018-08-15 11:24:00 · 333 阅读 · 2 评论 -
js原生轮播 淡入淡出效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><met原创 2018-08-31 15:06:32 · 1125 阅读 · 0 评论 -
网站运行时间统计
html:<span id="span_dt_dt"></span>js: <script> function show_date_time() { window.setTimeout("show_date_time()", 1000); BirthDay = new Date("10/09/2018 00:00:00...转载 2018-10-09 14:07:40 · 799 阅读 · 0 评论 -
HTML5实现图片淡入淡出效果
HTML5实现图片淡入淡出效果<!doctype html><html lang="en"><head><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><meta name='apple-mobile-原创 2017-06-23 17:05:59 · 14710 阅读 · 0 评论