style,网站css样式集合

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

2021-03-19

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

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

2020-09-01

532 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-repeatscrollrightcentertransparent;/*放自己的图标*/ }

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

2020-08-31

496 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_zyyforminput::-webkit-input-placeholder{/*WebKitbrowsers*/ color:#7f7f7f; font-size:0.96rem; } .rj_zyyforminput::-moz-placeholder{/*MozillaFirefox19+*/ color:#7f7f7f; font-size:0.96rem; } .rj_zyyforminput::-ms-input-placeholder{/*InternetExplorer10+*/ color:#7f7f7f; font-size:0.96rem; }

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

2020-04-07

628 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:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray;/*ie9-*/ }

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

2019-10-21

871 0

文字过多，可以使用css来截取字符串，保留省略号，兼容性也是最好的。哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或啦啦啦啦啦啦啦拉拉阿拉啦啦啦阿拉啦啦啦啦啦啦啦啦显示一行，超出隐藏，保留省略号 .p1{ width:20rem; font-size:1.6rem; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block; } 截取两行，超出隐藏，保留省略号 .p2{ color:#999; overflow:hidden; line-height:1.4; margin:.3rem0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; text-overflow:ellipsis; -webkit-line-clamp:2; }

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

2019-10-17

1110 0

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

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

2019-10-16

791 0

Flex垂直水平居中 Flex垂直水平居中 .flex{ font-size:25px; height:200px; border:1pxsolidblack; display:flex; align-items:center; justify-content:center;

css六种隐藏元素的方法

2019-03-21

1306 0

1、display，使用none值会让元素从文档中直接删除，”直接消失不见了”用法：display:none优点：简单暴力，不需要多余代码。不占空间，对布局没影响。缺点：元素从文档删除，不利于seo2、text-indent，一般是首行缩2个中文字的用法是text-indent:2em。但当给他一个足够大的负值，大到一般我们浏览器无法显示。用法：text-indent:-999em优点：利于搜索引擎缺点：它的作用其实就是把文字提到段落前面，不让我们看见，不影响宽度？会影响布局。3、position，假如说一个元素的距离我们的视窗（电脑显示屏幕）足够大，大到我们浏览器也无法显示出来，那么它也是“消失”的。但是这种做法一般适用于比较写死的东西。用法：position:absolute; top:-999em或者left:-999em 或 position:absolute; visibility:hidden;优点：信手拈来，随意摆放缺点：用法太死，不能随意修改，比较死板4、visibility，只是“看不见”而已，所以元素依然会影响到布局用法：visibility:hidden优点：利于SEO优化缺点：该属性会继承，假如祖先用了visibility:hidden，那么子元素也是直接显示不见，想要子元素显示让用户看见，还要必须再多写visibility：visible5、opacity:0设置元素透明度opacity属性为0，也可以隐藏页面元素，在呈现上与visibility:hidden;方式一样，同样会占据页面空间。6、clip-path:polygon(0px 0px , 0px 0px,0px 0px,0px 0px)通过掩蔽和剪裁来隐藏部分元素

CSS3：线性渐变+各种分布

2017-10-22

838 0

CSS3：线性渐变+各种分布网页title #grad1{ height:40px; background:-webkit-linear-gradient(0deg,red,blue);/*Safari5.1-6.0*/ background:-o-linear-gradient(0deg,red,blue);/*Opera11.1-12.0*/ background:-moz-linear-gradient(0deg,red,blue);/*Firefox3.6-15*/ background:linear-gradient(0deg,red,blue);/*标准的语法（必须放在最后）*/ } #grad2{ height:40px; background:-webkit-linear-gradient(90deg,red,blue);/*Safari5.1-6.0*/ background:-o-linear-gradient(90deg,red,blue);/*Opera11.1-12.0*/ background:-moz-linear-gradient(90deg,red,blue);/*Firefox3.6-15*/ background:linear-gradient(90deg,red,blue);/*标准的语法（必须放在最后）*/ } #grad3{ height:40px; background:-webkit-linear-gradient(180deg,red,blue);/*Safari5.1-6.0*/ background:-o-linear-gradient(180deg,red,blue);/*Opera11.1-12.0*/ background:-moz-linear-gradient(180deg,red,blue);/*Firefox3.6-15*/ background:linear-gradient(180deg,red,blue);/*标准的语法（必须放在最后）*/ } #grad4{ height:40px; background:-webkit-linear-gradient(-90deg,red,blue);/*Safari5.1-6.0*/ background:-o-linear-gradient(-90deg,red,blue);/*Opera11.1-12.0*/ background:-moz-linear-gradient(-90deg,red,blue);/*Firefox3.6-15*/ background:linear-gradient(-90deg,red,blue);/*标准的语法（必须放在最后）*/ } #grad5{ height:40px; background:-webkit-linear-gradient(red,green,blue);/*Safari5.1-6.0*/ background:-o-linear-gradient(red,green,blue);/*Opera11.1-12.0*/ background:-moz-linear-gradient(red,green,blue);/*Firefox3.6-15*/ background:linear-gradient(red,green,blue);/*标准的语法（必须放在最后）*/ } #grad6{ height:40px; background:-webkit-linear-gradient(red,orange,yellow,green,blue,indigo,violet);/*Safari5.1-6.0*/ background:-o-linear-gradient(red,orange,yellow,green,blue,indigo,violet);/*Opera11.1-12.0*/ background:-moz-linear-gradient(red,orange,yellow,green,blue,indigo,violet);/*Firefox3.6-15*/ background:linear-gradient(red,orange,yellow,green,blue,indigo,violet);/*标准的语法（必须放在最后）*/ } #grad7{ height:40px; background:-webkit-linear-gradient(red10%,green85%,blue90%);/*Safari5.1-6.0*/ background:-o-linear-gradient(red10%,green85%,blue90%);/*Opera11.1-12.0*/ background:-moz-linear-gradient(red10%,green85%,blue90%);/*Firefox3.6-15*/ background:linear-gradient(red10%,green85%,blue90%);/*标准的语法（必须放在最后）*/ } #grad8{ height:40px; background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);/*Safari5.1-6.0*/ background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);/*Opera11.1-12.0*/ background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);/*Firefox3.6-15*/ background:linear-gradient(toright,red,orange,yellow,green,blue,indigo,violet);/*标准的语法（必须放在最后）*/ } 线性渐变-使用不同的角度 0deg 90deg 180deg -90deg 3个颜色结点（均匀分布） 7个颜色结点（均匀分布） 3个颜色结点（不均匀分布）渐变背景

css实现360度无限旋转

2017-10-26

1688 0

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

css3实现鼠标悬停图片翻转

2017-11-01

1019 0

css3实现鼠标悬停图片翻转.last_btnimg{-moz-transition:all0.5slinear0s; webkit-transition:all0.5slinear0s; transition:all0.5slinear0s;} .last_btna:hoverimg{ -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

1049 0

html代码正六边形 css代码.lineF,.lineS { position:absolute; visibility:hidden; } .lineS { top:182px; left:105px; } .boxF,.boxS,.boxT,.overlay { width:240px; height:290px; overflow:hidden; } .boxF,.boxS { visibility:hidden; } .boxF { transform:rotate(30deg); float:left; margin-left:10px; -ms-transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); } .boxS { transform:rotate(-60deg); -ms-transform:rotate(-60deg); -moz-transform:rotate(-60deg); -webkit-transform:rotate(-60deg); } .boxT { transform:rotate(30deg); background:no-repeat50%center; background-size:100%auto; -ms-transform:rotate(-60deg); -moz-transform:rotate(-60deg); -webkit-transform:rotate(-60deg); visibility:visible; } .overlay { transition:all250msease-in-out0s; display:none; position:relative; } .overlay:hover { background-color:rgba(0,0,0,0.6); cursor:pointer; } .boxT:hover.overlay { display:block; } .overlaya { transform:rotate(90deg); display:block; /*display:inline-block;*/ position:absolute; left:14%; top:45%; text-align:center; width:220px; height:32px; line-height:35px; color:White; font-size:24px; font-weight:normal; }

html常见样式代码、小结

2017-12-04

899 0

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

css3实现舞台灯管效果

2018-03-24

1023 0

Document .pr{position:relative} .banner{background:#170f1c;overflow:hidden} .bannerimg{width:100%} .bannerul{position:absolute;right:50%;top:50%;margin-right:-32%;margin-top:10%;width:30%;color:#fff;text-align:center} .bannerulli{width:20%;display:inline-block;margin-right:3%;line-height:30px;font-size:18px} .bannerulli:nth-child(1)img{animation:rollIn1s;-webkit-animation:rollIn1s} .bannerulli:nth-child(2)img{animation:rollIn2s;-webkit-animation:rollIn1.4s} .bannerulli:nth-child(3)img{animation:rollIn3s;-webkit-animation:rollIn1.8s} .bannerulli:nth-child(4)img{animation:rollIn3s;-webkit-animation:rollIn2.2s} .hoverlight{ cursor:pointer; position:absolute; left:0px; bottom:-10%; width:20%; height:200%; background-image:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image:-o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image:-ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); animation:light_move5s2sinfinitelinear; -webkit-animation:light_move4.5s2sinfinitelinear; transform-origin:0bottom; -webkit-transform-origin:0bottom; }.hoverlight1{ cursor:pointer; position:absolute; left:90%; bottom:-30%; width:10%; height:200%; background-image:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image:-o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image:-ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); animation:light_move15s4sinfinitelinear; -webkit-animation:light_move14.5s2sinfinitelinear; transform-origin:0bottom; -webkit-transform-origin:0bottom; } @keyframesbounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-5px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,-4px,0)}} @keyframesrollIn{0%{opacity:0;transform:translate3d(100%,0,0)rotate(120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframesrollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)rotate(-120deg)}} @keyframesrotate{ 0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);} 50%{-webkit-transform:rotate(360deg);-moz-transform:rotate(90deg);transform:rotate(360deg);} 100%{-webkit-transform:rotate(0deg);-moz-transform:rotate(90deg);transform:rotate(0deg);} } @keyframesrubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.move{ -webkit-animation:movement3slinearnormalbothinfinite; -o-animation:movement3slinearnormalbothinfinite; animation:movement3slinearnormalbothinfinite; } .move1{ -webkit-animation:movement13slinearnormalbothinfinite; -o-animation:movement13slinearnormalbothinfinite; animation:movement13slinearnormalbothinfinite; } .move2{ -webkit-animation:movement23slinearnormalbothinfinite; -o-animation:movement23slinearnormalbothinfinite; animation:movement23slinearnormalbothinfinite; } .move3{ -webkit-animation:movement33slinearnormalbothinfinite; -o-animation:movement33slinearnormalbothinfinite; animation:movement33slinearnormalbothinfinite; }@keyframesmovement{ 0%{-webkit-transform:translate(0px,-3px);transform:translate(0px,-3px);} 25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);} 50%{-webkit-transform:translate(6px,10px);transform:translate(6px,10px);} 75%{-webkit-transform:translate(8px,0px);transform:translate(8px,0px);} 100%{-webkit-transform:translate(0px,-3px);transform:translate(0px,-3px);} } @-webkit-keyframesmovement{ 0%{-webkit-transform:translate(0px,-3px);transform:translate(0px,-3px);} 25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);} 50%{-webkit-transform:translate(6px,10px);transform:translate(6px,10px);} 75%{-webkit-transform:translate(8px,0px);transform:translate(8px,0px);} 100%{-webkit-transform:translate(0px,-3px);transform:translate(0px,-3px);} } @keyframesmovement1{ 0%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);} 25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);} 50%{-webkit-transform:translate(-6px,-10px);transform:translate(-6px,-10px);} 75%{-webkit-transform:translate(8px,0px);transform:translate(8px,0px);} 100%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);} } @-webkit-keyframesmovement1{ 0%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);} 25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);} 50%{-webkit-transform:translate(-6px,-10px);transform:translate(-6px,-10px);} 75%{-webkit-transform:translate(8px,0px);transform:translate(8px,0px);} 100%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);} } @keyframesmovement2{ 0%{-webkit-transform:translate(10px,3px);transform:translate(10px,3px);} 25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);} 50%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);} 75%{-webkit-transform:translate(-8px,0px);transform:translate(-8px,0px);} 100%{-webkit-transform:translate(10px,3px);transform:translate(10px,3px);} } @-webkit-keyframesmovement2{ 0%{-webkit-transform:translate(10px,3px);transform:translate(10px,3px);} 25%{-webkit-transform:translate(3px,6px);transform:translate(3px,6px);} 50%{-webkit-transform:translate(6px,-3px);transform:translate(6px,-3px);} 75%{-webkit-transform:translate(-8px,0px);transform:translate(-8px,0px);} 100%{-webkit-transform:translate(10px,3px);transform:translate(10px,3px);} }@keyframesmovement3{ 0%{-webkit-transform:translate(-10px,3px);transform:translate(-10px,3px);} 25%{-webkit-transform:translate(-4px,6px);transform:translate(-4px,6px);} 50%{-webkit-transform:translate(2px,8px);transform:translate(2px,8px);} 75%{-webkit-transform:translate(-8px,0px);transform:translate(-8px,0px);} 100%{-webkit-transform:translate(-10px,3px);transform:translate(-10px,3px);} } @-webkit-keyframesmovement3{ 0%{-webkit-transform:translate(-10px,3px);transform:translate(-10px,3px);} 25%{-webkit-transform:translate(-4px,6px);transform:translate(-4px,6px);} 50%{-webkit-transform:translate(2px,8px);transform:translate(2px,8px);} 75%{-webkit-transform:translate(-8px,0px);transform:translate(-8px,0px);} 100%{-webkit-transform:translate(-10px,3px);transform:translate(-10px,3px);} } @keyframeslight_move{ 0%{transform:rotate(0deg);opacity:0} 30%{transform:rotate(40deg);opacity:1} 75%{transform:rotate(90deg);} 100%{transform:rotate(0deg);} }@-webkit-keyframeslight_move{ 0%{-webkit-transform:rotate(0deg);opacity:0} 30%{-webkit-transform:rotate(40deg);opacity:1} 75%{-webkit-transform:rotate(90deg);} 100%{-webkit-transform:rotate(0deg);} }@keyframeslight_move1{ 0%{transform:rotate(0deg);opacity:0} 30%{transform:rotate(-40deg);opacity:1} 75%{transform:rotate(-90deg);} 100%{transform:rotate(0deg);} }@-webkit-keyframeslight_move1{ 0%{-webkit-transform:rotate(0deg);opacity:0} 30%{-webkit-transform:rotate(-40deg);opacity:1} 75%{-webkit-transform:rotate(-90deg);} 100%{-webkit-transform:rotate(0deg);} }

HTML动画，花飘动效果

2018-06-14

1119 0

html代码 css代码：/*banner*/ #banner{ width:100%; position:relative; overflow:hidden; } #banner>img{ width:100%; min-height:340px; } #banner.btn{ width:21%; position:absolute; left:39.5%; bottom:-10%; z-index:3; } .hua{ position:absolute; } .hua1{ width:5%; animation:dong16slinearinfinite; -webkit-animation:dong16slinearinfinite; -o-animation:dong16slinearinfinite; -moz-animation:dong16slinearinfinite; } .hua2{ width:3%; animation:dong27slinearinfinite; -webkit-animation:dong27slinearinfinite; -o-animation:dong27slinearinfinite; -moz-animation:dong27slinearinfinite; } .hua3{ width:6%; animation:dong38slinearinfinite; -webkit-animation:dong38slinearinfinite; -o-animation:dong38slinearinfinite; -moz-animation:dong38slinearinfinite; } /*动画一*/ @keyframesdong1{ 0%{left:83%;top:0;} 20%{left:70%;top:11%;} 40%{left:54%;top:25%;} 60%{left:37%;top:36%;} 80%{left:16%;top:46%;} 100%{left:-10%;top:54%;} } @-webkit-keyframesdong1{ 0%{left:83%;top:0;} 20%{left:70%;top:11%;} 40%{left:54%;top:25%;} 60%{left:37%;top:36%;} 80%{left:16%;top:46%;} 100%{left:-10%;top:54%;} } @-moz-keyframesdong1{ 0%{left:83%;top:0;} 20%{left:70%;top:11%;} 40%{left:54%;top:25%;} 60%{left:37%;top:36%;} 80%{left:16%;top:46%;} 100%{left:-10%;top:54%;} } @-o-keyframesdong1{ 0%{left:83%;top:0;} 20%{left:70%;top:11%;} 40%{left:54%;top:25%;} 60%{left:37%;top:36%;} 80%{left:16%;top:46%;} 100%{left:-10%;top:54%;} } /*动画二*/ @keyframesdong2{ 0%{left:98%;top:23%;} 10%{left:92%;top:33%;} 20%{left:85%;top:42%;} 30%{left:76.5%;top:50%;} 40%{left:68%;top:58%;} 50%{left:59%;top:67%;} 60%{left:48%;top:74.6%;} 70%{left:37%;top:83%;} 80%{left:24%;top:88%;} 90%{left:12%;top:94%;} 100%{left:-5%;top:98%;} } @-webkit-keyframesdong2{ 0%{left:98%;top:23%;} 10%{left:92%;top:33%;} 20%{left:85%;top:42%;} 30%{left:76.5%;top:50%;} 40%{left:68%;top:58%;} 50%{left:59%;top:67%;} 60%{left:48%;top:74.6%;} 70%{left:37%;top:83%;} 80%{left:24%;top:88%;} 90%{left:12%;top:94%;} 100%{left:-5%;top:98%;} } @-moz-keyframesdong2{ 0%{left:98%;top:23%;} 10%{left:92%;top:33%;} 20%{left:85%;top:42%;} 30%{left:76.5%;top:50%;} 40%{left:68%;top:58%;} 50%{left:59%;top:67%;} 60%{left:48%;top:74.6%;} 70%{left:37%;top:83%;} 80%{left:24%;top:88%;} 90%{left:12%;top:94%;} 100%{left:-5%;top:98%;} } @-o-keyframesdong2{ 0%{left:98%;top:23%;} 10%{left:92%;top:33%;} 20%{left:85%;top:42%;} 30%{left:76.5%;top:50%;} 40%{left:68%;top:58%;} 50%{left:59%;top:67%;} 60%{left:48%;top:74.6%;} 70%{left:37%;top:83%;} 80%{left:24%;top:88%;} 90%{left:12%;top:94%;} 100%{left:-5%;top:98%;} } /*动画三*/ @keyframesdong3{ 0%{left:39%;top:75.8%;} 50%{left:18%;top:86.5%;} 100%{left:-10%;top:96%;} } @-webkit-keyframesdong3{ 0%{left:39%;top:75.8%;} 50%{left:18%;top:86.5%;} 100%{left:-10%;top:96%;} } @-moz-keyframesdong3{ 0%{left:39%;top:75.8%;} 50%{left:18%;top:86.5%;} 100%{left:-10%;top:96%;} } @-o-keyframesdong3{ 0%{left:39%;top:75.8%;} 50%{left:18%;top:86.5%;} 100%{left:-10%;top:96%;} }

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

2017-11-03

1125 0

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

html前端按钮效果

2018-05-08

2298 0

常见按钮特效整理：1 .zkbtn--上下抖动.zkbtn{animation:td1.5sinfinite;-webkit-animation:td1.5sinfinite;} @-webkit-keyframestd{ 0%,20%,50%,80%,100%{-webkit-transform:translateY(0);} 40%{-webkit-transform:translateY(-4px);} 60%{-webkit-transform:translateY(-8px);} } @keyframestd{ 0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0);} 40%{-webkit-transform:translateY(-4px);transform:translateY(-4px);} 60%{-webkit-transform:translateY(-8px);transform:translateY(-8px);}2.amint-da---缓慢放大.amint-da{ animation:scaleOut1s1sinfiniteease; } @-webkit-keyframesscaleOut{ 0%{ transform:scale(0.95); opacity:0.9; } 50%{ transform:scale(1); opacity:0.95; } 100%{ transform:scale(1.05); opacity:1; } }3鼠标悬停缓慢向上移动-5px;.p3{transition:all.2slinear; -webkit-transition:all.2slinear; -moz-transition:all.2slinear; -ms-transition:all.2slinear; -o-transition:all.2s} .p3li:hover{transform:translateY(-5px);}4 .c_stykebrn按钮不停放大.c_stykebrn{ -moz-animation:fd1slinearinfinitebackwards;-ms-animation:fd1slinearinfinitebackwards;-o-animation:fd1slinearinfinitebackwards;-webkit-animation:fd1slinearinfinitebackwards;animation:fd1slinearinfinitebackwards; } @keyframesfd{ 0%{ transform:scale(1); } 50%{ transform:scale(1.1); } 100%{ transform:scale(1); } }5 .animated around按钮左右移动.animated{ animation-duration:1s;/*动画时间*/ animation-fill-mode:both;/*播放后的状态*/ animation-duration:2s;/*动画时间*/ animation-iteration-count:infinite;/*动作循环的次数：infinite无限循环*/ } .around{ animation-name:aroundAnimation;/*动画的名称*/ transform-origin:centerbottom;/*设置动画旋转元素的基点为*/ cursor:pointer; } @keyframesaroundAnimation{ 0%, 100%, 20%, 50%, 80%{ transition-timing-function:cubic-bezier(0.215,.61,.355,1); transform:translate3d(0,0,0); } 40%, 43%{ transition-timing-function:cubic-bezier(0.755,0.50,0.855,0.060); transform:translate3d(-20px,0,,0); } 70%{ transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060); transform:translate3d(-10px,0px,0); } 80%{ transform:translate2d(10px,0,0); } } 2. .laybtn{animation:showb2s.2slinearbothinfinite;-webkit-animation:showb2s.2slinearbothinfinite;-moz-animation:showb2s.2slinearbothinfinite;-o-animation:showb2s.2slinearbothinfinite;-ms-animation:showh1s.2slinearbothinfinite;} @-webkit-keyframesshowb{ 0%,100%,20%,50%,80%{ -webkit-transform:scale(1); transform:scale(1); } 40%{ -webkit-transform:scale(0.9); transform:scale(0.9); } 60%{ -webkit-transform:scale(0.9); transform:scale(0.9); } }6 .animate-hotspot-down按钮上下抖动@keyframeshotspot-down{25%{transform:translateY(-2px)}50%,100%{transform:translateY(0)}75%{transform:translateY(2px)}} .animate-hotspot-down{-webkit-animation:hotspot-down2slinearinfinite;animation:hotspot-down2slinearinfinite}7 .鼠标悬停刀片加抖动效果.banner_btn{display:block;width:312px;height:78px;background:url(images/banner_btn_03.png)no-repeatcentertop;position:absolute;left:50%;margin-left:-420px;bottom:155px;color:#fff;font-size:48px;font-family:'方正';font-weight:bold;text-align:center;line-height:78px;overflow:hidden;transition:all.2slinear;-webkit-transition:all.2slinear;-moz-transition:all.2slinear;-ms-transition:all.2slinear;-o-transition:all.2slinear;} .banner_btn:before{ content:''; position:absolute; background:#fff; width:10px; height:100px; top:0; left:-200px; opacity:0.2; -webkit-transition:all0.3sease-out; transition:all0.3sease-out; -webkit-transform:skewX(-25deg); transform:skewX(-25deg); overflow:hidden; } .banner_btn:hover:before{ width:30px; left:350px; } .banner_btn:hover{color:#fff;transform:translateY(-2px);-webkit-transform:translateY(-2px);-moz-transform:translateY(-2px);-ms-transform:translateY(-2px);-o-transform:translateY(-2px);}8、按钮左右走动.junpimg{ webkit-animation:jump3slinearnormalbothinfinite; -o-animation:jump3slinearnormalbothinfinite; animation:jump3slinearnormalbothinfinite; } @keyframesjump{ 0%{ transform:translateX(0); } 50%{ transform:translateX(15px); } 100%{ transform:translateX(0); } }9、晃动效果.sp1{ -webkit-animation:fan2sinfinite; animation:fan2sinfinite; } .sp1{ top:84px; right:173px; } @keyframesfan{ 0%{ transform:rotateY(0deg); } 100%{ transform:rotateY(360deg); } }10、缩小放大.chatcar{width:50px;height:50px;background:#000;animation:chatchars2sease;} @keyframeschatchars{ 0%{left:120px;transform:scale(0.1);} 20%{left:20px;} 40%{left:40px;} 100%{left:12px;transform:scale(1);}11、挂在绳索上摇摆动画.als{ position:absolute; width:5rem; height:5rem; background:#000; -webkit-transform-origin:center-20rem; transform-origin:center-20rem; -webkit-animation:swing7scubic-bezier(0.5,0,0.5,1)infiniteboth; animation:swing7scubic-bezier(0.5,0,0.5,1)infiniteboth; } @keyframesswing{ 0%{ -webkit-transform:rotate(5deg); transform:rotate(5deg); } 12.5%{ -webkit-transform:rotate(-10deg); transform:rotate(-10deg); } 25%{ -webkit-transform:rotate(10deg); transform:rotate(10deg); } 37.5%{ -webkit-transform:rotate(-15deg); transform:rotate(-15deg); } 50%{ -webkit-transform:rotate(23deg); transform:rotate(23deg); } 62.5%{ -webkit-transform:rotate(-23deg); transform:rotate(-23deg); } 75%{ -webkit-transform:rotate(15deg); transform:rotate(15deg); } 87.5%{ -webkit-transform:rotate(-10deg); transform:rotate(-10deg); } 100%{ -webkit-transform:rotate(5deg); transform:rotate(5deg); } }12.红包抖动效果.swt-float{z-index:2147483650;position:fixed;top:0;left:2%;width:100px;top:40%;-webkit-animation:tada1.5slinearnormalbothinfinite;-o-animation:tada1.5slinearnormalbothinfinite;animation:tada1.5slinearnormalbothinfinite} @-moz-keyframestada{0%{-moz-transform:scale(1)} 10%,20%{-moz-transform:scale(.9)rotate(-3deg)} 30%,50%,70%,90%{-moz-transform:scale(1.1)rotate(3deg)} 40%,60%,80%{-moz-transform:scale(1.1)rotate(-3deg)} 100%{-moz-transform:scale(1)rotate(0)} } @-webkit-keyframestada{0%{-webkit-transform:scale(1)} 10%,20%{-webkit-transform:scale(.9)rotate(-3deg)} 30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg)} 40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg)} 100%{-webkit-transform:scale(1)rotate(0)} }14.打字效果.shuru{animation:typing4ssteps(11,end)infinite,blink-caret.5sstep-endinfinitealternate} @keyframestyping{0%{width:0}25%{width:22ch}100%{width:22ch}} @keyframesblink-caret{50%{border-color:transparent}} @-webkit-keyframesanim1{0%{top:0;opacity:1}100%{top:-100px;opacity:1}}15.按钮不停旋转20度.btn{ -webkit-animation:swing2slinearnormalbothinfinite; -o-animation:swing2slinearnormalbothinfinite; animation:swing2slinearnormalbothinfinite; } @keyframesswing{ 0%{transform:rotate(5deg);} 50%{transform:rotate(-5deg);} 100%{transform:rotate(5deg);} } @-webkit-keyframesswing{ 0%{-webkit-transform:rotate(5deg);} 50%{-webkit-transform:rotate(-5deg);} 100%{-webkit-transform:rotate(5deg);} }16.鼠标悬停显示按钮html: 按钮>> css:.p4_btn{display:block;width:192px;height:51px;font-size:24px;color:#fff;line-height:51px; background:linear-gradient(90deg,#fc6550,#f92676);border-radius:45px;position:absolute; left:35px;bottom:-30px;} .p4_crlia.pubtn{transition:all0.5slinear;-webkit-transition:all0.5slinear;opacity:0;} .p4_crli:hover{transform:translate(0px,-20px);-webkit-transform:translate(0px,-20px);} .p4_crli:hovera.pubtn{bottom:-30px;opacity:1;color:#fff;}15.按钮上下动目标{animation:float4seaseinfinite;} @keyframesfloat{ 0%,100%{ transform:translate3d(0,0,0) } 40%{ transform:translate3d(0,-20px,0) } }16.从小大的圆形.mubiao{width:5px;height:5px;margin:300pxauto;background:#000;border-radius:50%;animation:vs3slinearinfinitebackwards} @keyframesvs{0%{box-shadow:00156px#000} 25%{box-shadow:00080px#000} 50%{box-shadow:000156px#000} 25%{box-shadow:00080px#000} 100%{box-shadow:00156px#000} }17.放大隐藏.目标{width:50px;height:50px;background:#000;-webkit-animation:scaleout3.3sinfiniteease-in-out;animation:scaleout3.3sinfiniteease-in-out;} @-webkit-keyframesscaleout{ 0%{ -webkit-transform:scale(1.0) } 100%{ -webkit-transform:scale(2.1); opacity:0; } }@keyframesscaleout{ 0%{ transform:scale(1.0); -webkit-transform:scale(1.0); opacity:0; } 10%{ transform:scale(1.0); -webkit-transform:scale(1.0); opacity:1; } 100%{ transform:scale(2.1); -webkit-transform:scale(2.1); opacity:0; } }18.放大缩小.目标{width:50px;height:50px;background:#000;animation:pulseScale2sinfinite;} .pulseScale{-webkit-animation-name:pulseScale;animation-name:pulseScale} @-webkit-keyframespulseScale{50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 100%{-webkit-transform:translateZ(0)} } @keyframespulseScale{50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 100%{transform:translateZ(0)} }19.鼠标悬停翻转.swtBtn{-webkit-transition:all.3slinear;-moz-transition:all.3slinear;transition:all.3slinear;} .swtBtn:hover{-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);-o-transform:rotateY(360deg);-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}20.按钮放大效果 .btn{display:block;width:200px;height:50px;background-color:#D72602;position:relative;color:#fff;text-decoration:none;text-align:center;line-height:50px;font-size:25px;border-radius:45px;} .div2{ position:absolute; right:0px; top:0; bottom:0; margin:auto; pointer-events:none; background-color:#ffffff; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -ms-border-radius:100%; border-radius:100%; -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both; display:inline-block; width:200px; height:150px; -webkit-animation:ball-scale1s0sease-in-outinfinite; -moz-animation:ball-scale1s0sease-in-outinfinite; -ms-animation:ball-scale1s0sease-in-outinfinite; -o-animation:ball-scale1s0sease-in-outinfinite; animation:ball-scale1s0sease-in-outinfinite; } @-webkit-keyframesball-scale{ 0%{ -webkit-transform:scale(0); transform:scale(0) } 100%{ -webkit-transform:scale(1); transform:scale(1); opacity:0 } } @keyframesball-scale{ 0%{ -webkit-transform:scale(0); transform:scale(0) } 100%{ -webkit-transform:scale(1); transform:scale(1); opacity:0 } } 了解详情