style,网站css样式集合

css实现导航鼠标悬停走动酷炫效果

2021-09-25

我们有时做项目需要使用到类似上面的效果，可以参考下面的代码实现方法html页面代码：;;;<div class="header"> ;;;;;;;;<ul> ;;;;;;;;;;<li><a href="#">首页</a></li> ;;;;;;;;;;<li><a href="#">最新活动</a></li> ;;;;;;;;;;<li><a href="#">项目介绍</a></li> ;;;;;;;;;;<li><a href="#">关于我们</a></li> ;;;;;;;;;;<span class="move"> </span> ;;;;;;;;</ul> ;;;;</div> css代码实现：;&l

animate.css动画执行时间修改方法

2021-04-23

643 0

Animate.css;作为一款强大的预设css3动画库，很值得我们在项目中引用。但是统一的动画时间不是很好看。可以通过下面css对其进行修改。.ssxin1为class，可以独立为每个动画设置.ssxin1.animated;{ ;;;;-webkit-animation-duration:;1s;; ;;;;animation-duration:;2.5s;; ;;;;-webkit-animation-fill-mode:;both; ;;;;animation-fill-mode:;both; }

解决foundation5下CSS伪元素::after在iOS14以上系统不显示问题

2021-03-19

571 0

最近在写页面，发现ios下不显示，安卓和pc折叠导航下的CSS伪元素::after都能正常显示。解决方法：因为官方默认高度为0没有加上高度height对此，我们只需增加一段样式<style> ;;.top-bar;.toggle-topbar.menu-icon;a;span::after{ ;;;;height:;1px; ;;;;background:;#fff ;;} </style>即可解决该问题。

解决苹果ios手机下select标签和input标签显示问题

2020-09-01

1107 0

手机端页面在苹果ios下select标签和input标签显示颜色很奇怪？而安卓上显示没问题。出现这个问题的原因：因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式input[type=datetime-local]{ ;;;;;;-webkit-appearance:none; ;;;;;;outline:none; ;;;;;;border:none; } select{ ;;;;-webkit-appearance:;none;;;/*这样select默认的样式就没有了，后面的箭头也没有了，自己找个图标添加进去就可以了*/ ;;;;padding-right:30px;;;;;/*给右边图标留位置*/ ;;;;background:;url("arrow.png");no-repeat;

html,css 如何设置input的placeholder样式

2020-08-31

968 0

html,css 如何设置input的placeholder样式，在做前端开发时，如果想写对input设置字体，文字大小，颜色等，我们该如何设置呢？通过如下设置兼容主流浏览器：-webkit-input-placeholder; ;;/* WebKit browsers */input::-moz-placeholder;;/* Mozilla Firefox 19+ */input::-ms-input-placeholder /* Internet Explorer 10+ */以下是个简单的例子，对input设置字体颜色和字体大小，如果需要其他的样式，加入即可。.rj_zyyform;input::-webkit-input-placeholder;{;/*;WebKit;browsers;*/ ;;color:;#7f7f7f; ;;font-size:;0.96rem; }

如何使用css给网站图片加灰色

2020-04-07

1073 0

2020年4日4，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院发布公告，决定2020年4月4日举行全国性哀悼活动。从4月3日下午起，娱乐诸多网站自发更换灰色，以悼念逝者，致敬英雄，你发现，生活常见的网站以及app都变成灰色，现在来说下说是如何实现的。网站设置灰色html{ -webkit-filter:;grayscale(100%);;/*;webkit;*/ -moz-filter:;grayscale(100%);;/*firefox*/ -ms-filter:;grayscale(100%);;/*ie9*/ -o-filter:;grayscale(100%);;/*opera*/ filter:;grayscale(100%); filter:progid:DXImageTr

使用css截取字符串，保留省略号

2019-10-21

1337 0

文字过多，可以使用css来截取字符串，保留省略号，兼容性也是最好的。<p;class="p1">哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或</p> <p;class="p2">啦啦啦啦啦啦啦拉拉阿拉啦啦啦阿拉啦啦啦啦啦啦啦啦</p> <style> 显示一行，超出隐藏，保留省略号 .p1{ width:20rem; ;;;;font-size:;1.6rem; ;;;;text-overflow:;ellipsis; ;;;;overflow:;hidden; ;;;;white-space:;nowrap; ;;;;display:;block; } 截取两行，超出隐藏，保留省略号 .p2{ c

html 单选框placeholder及字体颜色设置

2019-10-17

1702 0

html 单选框placeholder及字体颜色设置.deal_sell4;input{;;text-align:;right;;color:;#555;;font-size:;0.92rem;;} .deal_sell4;input::-webkit-input-placeholder{;font-size:;0.88rem;;color:;#cccccc;};;; .deal_sell4;input:-moz-placeholder{;font-size:;0.88rem;;color:;#cccccc;};;;;;;;;;; .deal_sell4;input::-moz-placeholder{;font-size:;0.88rem;;color:;#cccccc;};;;;;;;;;; .deal_sell4;input:-ms-input-placeholder{;font-size:;0.88rem;;color:;#cccccc;}

css3flexbox布局实现元素垂直水平居中

2019-10-16

1213 0

Flex垂直水平居中<div;class="flex"> Flex垂直水平居中 </div><style> .flex{ font-size:;25px; height:;200px; border:;1px;solid;black; display:;flex; align-items:;center; justify-content:;center; </style>

css六种隐藏元素的方法

2019-03-21

1886 0

1、display，使用none值会让元素从文档中直接删除，”直接消失不见了”用法：display:none优点：简单暴力，不需要多余代码。不占空间，对布局没影响。缺点：元素从文档删除，不利于seo2、text-indent，一般是首行缩2个中文字的用法是text-indent:2em。但当给他一个足够大的负值，大到一般我们浏览器无法显示。用法：text-indent:-999em优点：利于搜索引擎缺点：它的作用其实就是把文字提到段落前面，不让我们看见，不影响宽度？会影响布局。3、position，假如说一个元素的距离我们的视窗（电脑显示屏幕）足够大，大到我们浏览器也无法显示出

CSS3：线性渐变+各种分布

2017-10-22

1288 0

CSS3：线性渐变+各种分布<!DOCTYPE;html>;; <html>;; <head>;; <meta;charset="utf-8">;;; <title>网页title</title>;;; <style>;; #grad1;{;; ;;;;height:;40px;;; ;;;;background:;-webkit-linear-gradient(0deg,;red,;blue);;/*;Safari;5.1;-;6.0;*/;; ;;;;background:;-o-linear-gradient(0deg,;red,;blue);;/*;Opera;11.1;-;12.0;*/;; ;;;;background:;-moz-linear-gradient(0deg,;red,;blue);;/*;Firefox;3.6;-;15;*/;; ;;;;background:;linear-gradient(0deg,;red

css实现360度无限旋转

2017-10-26

2233 0

css实现360度无限旋转目标{animation:;2s;;rotate;linear;infinite} @keyframes;rotate;{ ;;;;0%{} ;;;;100%{transform:rotate(360deg);} }

css3实现鼠标悬停图片翻转

2017-11-01

1429 0

css3实现鼠标悬停图片翻转.last_btn;img{-moz-transition:all;0.5s;linear;0s; ;;;;webkit-transition:all;0.5s;linear;0s; ;;;;transition:all;0.5s;linear;0s;;} .last_btn;a:hover;img{ ;-moz-transform:rotateY(360deg);perspective(200px); ;-ms-transform:rotateY(360deg);perspective(200px); ;-o-transform:rotateY(360deg);perspective(200px); ;-webkit-transform:rotateY(360deg);perspective(200px); ;transform:rotateY(360deg);perspective(200px); }

css3实现正六边形图片+悬停效果

2017-11-26

1508 0

html代码<div;class="boxF;pic1"> ;;;;;;;;<div;class="boxS"> ;;;;;;;;;;;;;;;;<div;class="boxT";style="background-image:;url(1.jpg);"> ;;;;;;;;;;;;;;;;;;;;;<div;class="overlay"> ;;;;;;;;;;;;;;;;;;;;;;;;;;<a>正六边形</a> ;;;;;;;;;;;;;;;;;;;;;;</div> ;;;;;;;;;;;;;;;;;</div> ;;;;;;;;;</div> ;</div>css代码;;.lineF,;.lineS ;;;;;;;;{ ;;;;;;;;;;;;position:;absolute; ;;;;;;;;;;;;visibili

html常见样式代码、小结

2017-12-04

1744 0

outline: none; ; ; ; ; ----文本框去掉鼠标点击边框颜色box-sizing:border-box; ;----给li列表加hover悬停效果会出现抖动问题可以加这句代码letter-spacing:5px ; ; ;----给文字加左右边距resize:none; ; ; ;----禁止textarea鼠标点击拉动大小

css3实现舞台灯管效果

2018-03-24

1496 0

<!DOCTYPE;html> <html> <head> ;<meta;charset="UTF-8"> ;<title>Document</title> </head> <body> <div;class="head;pr">;;;; ;;;;<a;href="";target="_blank">;;;; ;;;;;;<img;src="images/banner_01.jpg";alt="">;;;;; ;;;;;;<i;class="hoverlight"></i> ;;;;;;<i;class="hoverlight1"></i>;;;;; ;;;;</a>;;;;;;; </div>;;;;

HTML动画，花飘动效果

2018-06-14

1594 0

html代码<div;id="banner"> ;;;;;;;;<img;src="images/2018/fiveActive/banner_01.jpg";alt=""> ;;;;;;;;<a;href="javascript:void(0)";onclick="openS();return;false;";class="btn"> ;;;;;;;;;;;;<img;src="images/2018/fiveActive/btn1_03.png";alt=""> ;;;;;;;;</a> ;;;;;;;;<div;class="hua;hua1"><img;src="images/2018/fiveActive/hua1.png";alt=""></div>

css3实现鼠标悬停图片缓慢放大

2017-11-03

1610 0

css3实现鼠标悬停图片缓慢放大.p2_content;li;img{;width:;365px;;height:379px;;;;cursor:;pointer;;transition:;all;0.6s;overflow:;hidden;} .p2_content;li;img:hover{;transform:;scale(1.05);}

html前端按钮效果

2018-05-08

3240 0

常见按钮特效整理：1 .zkbtn--上下抖动.zkbtn{animation:td;1.5s;infinite;;-webkit-animation:td;;1.5s;infinite;;} @-webkit-keyframes;td{ ;;;;0%,20%,50%,80%,100%{-webkit-transform:translateY(0);} ;;;;40%{-webkit-transform:translateY(-4px);} ;;;;60%{-webkit-transform:translateY(-8px);} } @keyframes;td{ ;;;;0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0);} ;;;;40%{-webkit-transform:translateY(-4px);transform:translateY(-4px);} ;;;;60%{-webkit-transform:translateY(