CSS
关注
分享
扫一扫
常用CSS小样式
Fish北冥
见山海，见天地，见自己
展开
-
css文字镂空加描边
文字镂空加描边原创 2024-06-21 17:18:32 · 624 阅读 · 0 评论 -
js/jquery打字机效果/文字渐变效果（文字逐个出现）
js/jquery打字机效果（文字逐个出现），css文字渐变原创 2023-12-11 10:44:45 · 824 阅读 · 0 评论 -
jQuery侧边栏滚动固定跟随
jQuery侧边栏滚动固定跟随效果演示：注意：需要引用jQuery和对应的js,有的代码之前发过就没在重复写，后面有附链接地址。1.banner轮播代码：swiper轮播地址2.onload页面加载完成后执行，如果不加高度获取可能会不准确HTML代码：<!-- scroll01wrap --><div class="scroll01wrap"> <div class="scroll01"> <div class="scrolltext"&g原创 2021-09-22 17:52:06 · 895 阅读 · 0 评论 -
swiper轮播图多个分页
swiper轮播图多个分页演示效果：注意：要引入jQuery和swiper插件，这边用的版本是（Swiper 4.4.2）效果图：HTML代码：<div class="bannerwrap"> <div class="swiper-container bannerswiper"> <div class="swiper-wrapper"> <div class="swiper-slide centerBig"> <div原创 2021-09-22 17:17:38 · 1595 阅读 · 0 评论 -
jQuery增删改查
jQuery增删改查（图书管理）演示效果：HTML代码：<div class="books"> <h3 class="titl">图书管理</h3> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th><input type="checkbox" id="all" /></th> <th>作者原创 2021-09-07 17:42:37 · 2274 阅读 · 7 评论 -
jQuery全选，全不选判断
jQuery全选，全不选演示效果：HTML代码<div class="books"> <h3 class="titl">图书管理</h3> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th><input type="checkbox" id="all" /></th> <th>作者</原创 2021-08-16 14:46:12 · 470 阅读 · 0 评论 -
canvas动态画圆和数字滚动进度条
canvas动态画圆效果演示：使用插件：circleChart.min.js!function(a){"use strict";a.fn.circleChart=function(b){const c={color:"#3459eb",backgroundColor:"#e6e6e6",background:!0,speed:2e3,widthRatio:.2,value:66,unit:"percent",counterclockwise:!1,size:110,startAngle:0,anima原创 2021-08-13 15:38:18 · 595 阅读 · 0 评论 -
vue图片无缝轮播/切换
vue图片无缝轮播/切换演示效果：HTML代码：<!-- vueswiper --><div class="vueswiperwrap"> <div class="vueswiper"> <div class="item" v-for="i in imgArr" :transition="need" v-show="index==$index?true:false"> <img :src="i" @click="bling()" /&原创 2021-06-29 14:48:03 · 2482 阅读 · 2 评论 -
css文字循环滚动效果
css文字循环滚动效果演示效果：HTML代码：<!-- css文字循环滚动 --><div class="rollfontbg" aos="fade-up"> <span>I’ll think of you every step of the way I’ll think of you every step of the way</span></div>css样式：/* css文字循环滚动 */.rollfontbg{posit原创 2021-06-22 16:31:54 · 977 阅读 · 0 评论 -
css斜切角、切边
纯css斜切角、切边样式图：HTML代码：<div class="cutwrap"> <div class="cut" aos="fade-right"> <h3>宫崎骏</h3> <h4>千与千寻</h4> <p>再漫长的故事，也有完结的时候；<br> 行驶的再慢的列车，也有一个又一个的站台；<br> 再亲密无间的旅伴，也有分开的时候。</p> </原创 2021-06-22 16:13:04 · 1933 阅读 · 0 评论 -
jQuery点击查看更多，列表陆续显示
jQuery点击查看更多图片演示效果：HTML代码：<div class="gallerywrap"> <div class="gallerytl gallery-icont"> <h3>《千与千寻》</h3> <h4>再漫长的故事，也有完结的时候；行驶的再慢的列车，也有一个又一个的站台；再亲密无间的旅伴，也有分开的时候。<br>旅途上经历的事情，可能会被我们遗忘；旅途上学到的东西，我们却会将它记在心间。</h4&原创 2021-06-22 15:11:41 · 1899 阅读 · 1 评论 -
jQuery图文自动循环+点击切换
jQuery实现图文自动切换和点击切换效果演示HTML：<div class="imgswitchwrap"> <div class="imgswitch"> <div class="imgswitchlink"> <a href="javascript:;" class="active"><font>01</font>千与千寻</a> <a href="javascript:;"><原创 2021-06-10 14:52:18 · 1080 阅读 · 2 评论 -
jQuery实现简单的弹幕效果
jQuery实现简单的弹幕效果效果演示HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>弹幕dome</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> <script type="text/javascript" src=原创 2021-05-11 17:54:59 · 2034 阅读 · 0 评论 -
HTML，JS信息表单注册，点击获取验证码
HTML，JS信息表单注册，点击获取验证码效果图效果演示HTML代码<div class="modal_content"> <h5>绑定手机号</h5> <div> <label for="phone1">注册手机号：</label><br /> <input id="phone1" type="text" autocomplete="off" placeholder="请输入手机号"/>原创 2021-05-07 15:11:28 · 2947 阅读 · 5 评论 -
HTML，js自制MP3音频播放器
HTML，js自制音频播放器示意图演示效果文件结构HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>音频播放器</title> <style type="text/css"> a{text-decoration: none;display: block;width: 50px;height: 30px;ba原创 2021-05-07 14:04:09 · 665 阅读 · 0 评论 -
HTML，jQuery点击下拉式导航，手机导航四级栏目
HTML，jQuery点击下拉导航，手机导航四级栏目原创 2021-05-07 13:21:02 · 475 阅读 · 0 评论 -
css 文字倒影效果
文字倒影效果css样式h2{ margin: 0; padding: 0; font-size: 100px; text-align: center; color: #f00; text-shadow: 5px 5px 5px #999999; -webkit-box-reflect: below 0px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.05) 70%,rgba(250,250,250,0原创 2021-04-22 16:14:32 · 1272 阅读 · 0 评论 -
HTML网站外部字体包的引用和兼容写法@font-face
外部字体包的引用和兼容首先常用的字体格式有 woff，ttf，eot，otf，svg@font-face{ font-family:"calibri"; src: url("../font/SourceHanSansK-RegularSub.woff") format("woff"), url("../font/SourceHanSansK-RegularSub.ttf") format("truetype"), url("../font/SourceHanSans原创 2021-04-14 16:31:28 · 706 阅读 · 1 评论 -
解决transform放大图片，文字防抖动闪烁
给抖动的元素添加样式：transform: perspective(1px);原创 2021-01-14 17:49:12 · 938 阅读 · 0 评论 -
CSS3鼠标悬停/经过图片炫酷动画特效
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>纯CSS3鼠标..原创 2020-07-28 11:15:57 · 989 阅读 · 0 评论 -
jQuery鼠标滚动/点击定位
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 公共样式 */ body,input,h1,h2,h3,h4,h5,h6,b,c,e,i,g,p,div,dl,dt,dd,select,textarea,font,right,left{ margin:0;.原创 2020-07-15 11:07:52 · 533 阅读 · 3 评论