html5+css3
金翅
这个作者很懒,什么都没留下…
展开
-
购物车抛物线效果
【代码】购物车抛物线效果。原创 2022-10-24 17:13:06 · 175 阅读 · 0 评论 -
css模拟switch效果
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /* 开关的大小*/ .switch-container { height: 24px;原创 2021-12-20 16:02:47 · 316 阅读 · 0 评论 -
不抖的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 · 124 阅读 · 0 评论 -
移动端h5仿微信语音功能
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="multipart/form-data; charset=iso-8859-1"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-...原创 2021-05-14 15:21:04 · 1436 阅读 · 0 评论 -
移动端通用loading
<!-- js_accredit_landing_box显示隐藏 默认隐藏 --><div class="js_accredit_landing_box"> <div class="accredit_landing_box"> <div class="accredit_landing"> <img class="accredit_landing_img" src="img/accredit_landing原创 2020-12-18 10:39:58 · 416 阅读 · 0 评论 -
前端单选复选美化icheck插件使用
<script src="js/jquery.js"></script><script src="js/icheck.js"></script><div class="skin-square"> <ul class="list"> <li> <input type="checkbox" id="ic-2" name="ic" value="2" class="jscheck"> <l原创 2020-12-18 10:32:51 · 180 阅读 · 0 评论 -
jq ajax简单使用方法
json{ "list": [ { "id": 1, "img": "mobile_img/img.png", "title": "香肠派对", "describe": "v8.66版本S4赛季“疯狂实验室”上线 ,彩虹岛突现水晶矿脉,全新点位“实验室”从天外飞来,香肠派…",...原创 2020-04-07 10:02:59 · 360 阅读 · 0 评论 -
安卓键盘弹出底部被顶起
//安卓键盘弹出底部被顶起 var oHeight = $(document).height(); $(window).resize(function(){ //ios软键盘弹出不会触发resize事件 if($(document).height() < oHeight){ $(".signIn_foo...原创 2019-12-30 15:24:55 · 337 阅读 · 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 · 652 阅读 · 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 · 1337 阅读 · 0 评论 -
悬浮导航
//首先获取导航栏距离浏览器顶部的高度 var top = $('.bukacn_center_main').offset().top; //开始监控滚动栏scroll $(document).scroll(function(){ //获取当前滚动栏scroll的高度并赋值 var scrTop = $(window).scrollTop();...原创 2018-11-26 16:03:04 · 516 阅读 · 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 · 560 阅读 · 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 · 4443 阅读 · 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 · 176 阅读 · 0 评论 -
判断滚动到第几个div
onload = function () {//////初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('.scroll'),// scrollToContainer = mainContainer.find('dl:last');//滚动到最后一个div处...原创 2019-05-09 15:52:19 · 838 阅读 · 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 · 890 阅读 · 0 评论 -
select option居中,右对齐方法。
<select class="last_center"> <option>微信/QQ/Twitter/Facebook</option> <option>微信</option> <option>QQ</option> <option>Twitter</option>...原创 2019-07-29 10:57:31 · 2532 阅读 · 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 · 1783 阅读 · 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 · 472 阅读 · 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 · 650 阅读 · 0 评论 -
css3未知父元素宽高垂直居中
css: .box { width:300px; height:200px; position:relative; border:1px solid red; } .box_center { position:absolute...原创 2018-04-11 15:23:11 · 108 阅读 · 0 评论 -
点击空白处隐藏 阻止事件向上冒泡
var myDiv = $(".div_box");//需要隐藏的内容 $(function() { $(".div_main").click(function(event) { //点击显示 $(myDiv).slideToggle(); $(document).one("click", functi...原创 2018-04-23 14:33:22 · 387 阅读 · 0 评论 -
css3毛玻璃效果(背景虚化)
记得替换图片才能看见效果哦 filter:blur(20px); 滤镜:模糊(20px); css: body { min-height:100vh; box-sizing:border-box; margin:0; padding-top:calc(50vh...原创 2018-05-03 13:59:45 · 7294 阅读 · 0 评论 -
css3 checkbox复选框样式的更改
css:<style> .mycheck { width:25px; margin:20px 100px; position:relative; } .mycheck input[type=checkbox] {...原创 2018-05-12 13:26:42 · 1167 阅读 · 0 评论 -
js每秒执行一次
左右div高度应相等,内容不等 根据请求按需加载 导致左右两边高度背景不等 根据请求加载时间 每秒让js实现左右相等<div class="pc_pg_main_left"></div><div class="pc_pg_main_right"></div>//设定倒数秒数 var t = 5; //显示倒数秒数 functi...原创 2018-06-11 11:22:15 · 8332 阅读 · 0 评论 -
Normalize.css 与传统的 CSS Reset 有哪些区别?
Normalize.css和reset.css了两者任选其一。 Normalize 相对「平和」,注重通用的方案,重置掉该重置的样式,保留有用的 user agent 样式,同时进行一些 bug 的修复,这点是 reset 所缺乏的。Reset 相对「暴力」,不管你有没有用,统统重置成一样的效果,且影响的范围很大,讲求跨浏览器的一致性。Normalize 给我的感觉就是不讲求样式一致,而讲求通用...原创 2018-05-31 16:14:05 · 2557 阅读 · 0 评论 -
淘宝reset.css初始化样式
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textar...原创 2018-05-31 16:29:24 · 3475 阅读 · 0 评论 -
css3旋转轴心
CSS: <style>* { padding:0; margin:0;}.pkbox { width:155px; height:219px; position:relative; margin:300px auto;}.pkbox > img { width:100%; height:100%...转载 2018-07-02 15:17:01 · 4305 阅读 · 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 · 24490 阅读 · 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 · 3989 阅读 · 0 评论 -
丧心病狂的动画效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> html, body { wi转载 2018-08-15 11:24:00 · 347 阅读 · 2 评论 -
网站运行时间统计
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 · 811 阅读 · 0 评论 -
用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 · 6809 阅读 · 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 · 8934 阅读 · 7 评论 -
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 · 14759 阅读 · 0 评论