style,网站css样式集合

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

2021-04-23

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

345 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

789 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;scroll;right;center;transparent;;;;/*放自己的图标*/ }

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

2020-08-31

706 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; } .rj_zyyform;;input::-moz-placeholder;{;/*;Mozilla;Firefox;19+;*/ ;;color:;#7f7f7f; ;;font-size:;0.96rem; } .rj_zyyform;input::-ms-input-placeholder;{;/*;Internet;Explorer;10+;*/ ;;color:;#7f7f7f; ;;font-size:;0.96rem; }

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

2020-04-07

842 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

1098 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{ color:;#999; ;;;;overflow:;hidden; ;;;;line-height:;1.4; ;;;;margin:;.3rem;0; ;;;;overflow:;hidden; ;;;;display:;-webkit-box; ;;;;-webkit-box-orient:;vertical; ;;;;text-overflow:;ellipsis; ;;;;-webkit-line-clamp:;2; } </style>

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

2019-10-17

1365 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

993 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

1598 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

1045 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,;blue);;/*;标准的语法（必须放在最后）;*/;; };; ;; #grad2;{;; ;;;;height:;40px;;; ;;;;background:;-webkit-linear-gradient(90deg,;red,;blue);;/*;Safari;5.1;-;6.0;*/;; ;;;;background:;-o-linear-gradient(90deg,;red,;blue);;/*;Opera;11.1;-;12.0;*/;; ;;;;background:;-moz-linear-gradient(90deg,;red,;blue);;/*;Firefox;3.6;-;15;*/;; ;;;;background:;linear-gradient(90deg,;red,;blue);;/*;标准的语法（必须放在最后）;*/;; };; ;; #grad3;{;; ;;;;height:;40px;;; ;;;;background:;-webkit-linear-gradient(180deg,;red,;blue);;/*;Safari;5.1;-;6.0;*/;; ;;;;background:;-o-linear-gradient(180deg,;red,;blue);;/*;Opera;11.1;-;12.0;*/;; ;;;;background:;-moz-linear-gradient(180deg,;red,;blue);;/*;Firefox;3.6;-;15;*/;; ;;;;background:;linear-gradient(180deg,;red,;blue);;/*;标准的语法（必须放在最后）;*/;; };; ;; #grad4;{;; ;;;;height:;40px;;; ;;;;background:;-webkit-linear-gradient(-90deg,;red,;blue);;/*;Safari;5.1;-;6.0;*/;; ;;;;background:;-o-linear-gradient(-90deg,;red,;blue);;/*;Opera;11.1;-;12.0;*/;; ;;;;background:;-moz-linear-gradient(-90deg,;red,;blue);;/*;Firefox;3.6;-;15;*/;; ;;;;background:;linear-gradient(-90deg,;red,;blue);;/*;标准的语法（必须放在最后）;*/;; };; ;; #grad5;{;; ;;;;height:;40px;;; ;;;;background:;-webkit-linear-gradient(red,;green,;blue);;/*;Safari;5.1;-;6.0;*/;; ;;;;background:;-o-linear-gradient(red,;green,;blue);;/*;Opera;11.1;-;12.0;*/;; ;;;;background:;-moz-linear-gradient(red,;green,;blue);;/*;Firefox;3.6;-;15;*/;; ;;;;background:;linear-gradient(red,;green,;blue);;/*;标准的语法（必须放在最后）;*/;; };; ;; #grad6;{;; ;;;;height:;40px;;; ;;;;background:;-webkit-linear-gradient(red,;orange,;yellow,;green,;blue,;indigo,;violet);;/*;Safari;5.1;-;6.0;*/;; ;;;;background:;-o-linear-gradient(red,;orange,;yellow,;green,;blue,;indigo,;violet);;/*;Opera;11.1;-;12.0;*/;; ;;;;background:;-moz-linear-gradient(red,;orange,;yellow,;green,;blue,;indigo,;violet);;/*;Firefox;3.6;-;15;*/;; ;;;;background:;linear-gradient(red,;orange,;yellow,;green,;blue,;indigo,;violet);;/*;标准的语法（必须放在最后）;*/;; };; ;; #grad7;{;; ;;;;height:;40px;;; ;;;;background:;-webkit-linear-gradient(red;10%,;green;85%,;blue;90%);;/*;Safari;5.1;-;6.0;*/;; ;;;;background:;-o-linear-gradient(red;10%,;green;85%,;blue;90%);;/*;Opera;11.1;-;12.0;*/;; ;;;;background:;-moz-linear-gradient(red;10%,;green;85%,;blue;90%);;/*;Firefox;3.6;-;15;*/;; ;;;;background:;linear-gradient(red;10%,;green;85%,;blue;90%);;/*;标准的语法（必须放在最后）;*/;; };; ;; #grad8;{;; ;;;;height:;40px;;; ;;;;background:;-webkit-linear-gradient(left,;red,;orange,;yellow,;green,;blue,;indigo,;violet);;/*;Safari;5.1;-;6.0;*/;; ;;;;background:;-o-linear-gradient(left,;red,;orange,;yellow,;green,;blue,;indigo,;violet);;/*;Opera;11.1;-;12.0;*/;; ;;;;background:;-moz-linear-gradient(left,;red,;orange,;yellow,;green,;blue,;indigo,;violet);;/*;Firefox;3.6;-;15;*/;; ;;;;background:;linear-gradient(to;right,;red,;orange,;yellow,;green,;blue,;indigo,;violet);;/*;标准的语法（必须放在最后）;*/;; };; </style>;; </head>;; <body>;; ;; <h3>线性渐变;-;使用不同的角度</h3>;; <div;id="grad1";style="color:white;text-align:center;">0deg</div><br>;; <div;id="grad2";style="color:white;text-align:center;">90deg</div><br>;; <div;id="grad3";style="color:white;text-align:center;">180deg</div><br>;; <div;id="grad4";style="color:white;text-align:center;">-90deg</div>;; ;; <h3>3;个颜色结点（均匀分布）</h3>;; <div;id="grad5"></div>;; ;; <h3>7;个颜色结点（均匀分布）</h3>;; <div;id="grad6"></div>;; ;; <h3>3;个颜色结点（不均匀分布）</h3>;; <div;id="grad7"></div>;; ;; <br>;; <div;id="grad8";style="text-align:center;margin:auto;color:#FFFFFF;font-size:20px;font-weight:bold">;; 渐变背景;; </div>;; ;; </body>;; </html>

css实现360度无限旋转

2017-10-26

1931 0

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

css3实现鼠标悬停图片翻转

2017-11-01

1226 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

1265 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; ;;;;;;;;;;;;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-repeat;50%;center; ;;;;;;;;;;;;background-size:;100%;auto; ;;;;;;;;;;;;-ms-transform:;rotate(-60deg); ;;;;;;;;;;;;-moz-transform:;rotate(-60deg); ;;;;;;;;;;;;-webkit-transform:;rotate(-60deg); ;;;;;;;;;;;;visibility:;visible; ;;;;;;;;} ;;;;;;;;.overlay ;;;;;;;;{ ;;;;;;;;;;;;transition:;all;250ms;ease-in-out;0s; ;;;;;;;;;;;;display:;none; ;;;;;;;;;;;;position:;relative; ;;;;;;;;} ;;;;;;;;.overlay:hover ;;;;;;;;{ ;;;;;;;;;;;;background-color:;rgba(0,0,0,0.6); ;;;;;;;;;;;;cursor:;pointer; ;;;;;;;;} ;;;;;;;;.boxT:hover;.overlay ;;;;;;;;{ ;;;;;;;;;;;;display:;block; ;;;;;;;;} ;;;;;;;;.overlay;a ;;;;;;;;{ ;;;;;;;;;;;;;;;;;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

1506 0

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

css3实现舞台灯管效果

2018-03-24

1242 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>;;;; ;<style>.pr{;position:;relative} .banner{;background:;#170f1c;;overflow:;hidden} .banner;img{;width:;100%} .banner;ul{;position:;absolute;;right:50%;;top:50%;;margin-right:;-32%;;margin-top:10%;;width:30%;;color:;#fff;;text-align:;center;} .banner;ul;li{;width:;20%;;display:;inline-block;;margin-right:;3%;;line-height:;30px;;font-size:;18px} .banner;ul;li:nth-child(1);img{;animation:rollIn;1s;;-webkit-animation:;rollIn;1s;} .banner;ul;li:nth-child(2);img{;animation:rollIn;2s;;-webkit-animation:;rollIn;1.4s;} .banner;ul;li:nth-child(3);img{;animation:rollIn;3s;;-webkit-animation:;rollIn;1.8s;} .banner;ul;li:nth-child(4);img{;animation:rollIn;3s;;-webkit-animation:;rollIn;2.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_move;5s;2s;infinite;linear; ;;-webkit-animation:;light_move;4.5s;2s;infinite;linear; ;;transform-origin:0;bottom; ;;-webkit-transform-origin:0;bottom; }.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_move1;5s;4s;infinite;linear; ;;-webkit-animation:;light_move1;4.5s;2s;infinite;linear; ;;transform-origin:0;bottom; ;;-webkit-transform-origin:0;bottom; } @keyframes;bounce{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)}} @keyframes;rollIn{0%{opacity:0;transform:translate3d(100%,0,0);rotate(120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes;rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0);rotate(-120deg)}} @keyframes;rotate{ ;;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);} } @keyframes;rubberBand{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:;movement;3s;linear;normal;both;infinite; ;-o-animation:;movement;3s;linear;normal;both;infinite; ;animation:;movement;3s;linear;normal;both;infinite; } .move1{ ;-webkit-animation:;movement1;3s;linear;normal;both;infinite; ;-o-animation:;movement1;3s;linear;normal;both;infinite; ;animation:;movement1;3s;linear;normal;both;infinite; } .move2{ ;-webkit-animation:;movement2;3s;linear;normal;both;infinite; ;-o-animation:;movement2;3s;linear;normal;both;infinite; ;animation:;movement2;3s;linear;normal;both;infinite; } .move3{ ;-webkit-animation:;movement3;3s;linear;normal;both;infinite; ;-o-animation:;movement3;3s;linear;normal;both;infinite; ;animation:;movement3;3s;linear;normal;both;infinite; }@keyframes;movement;{ ;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-keyframes;movement;{ ;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);;;} } @keyframes;movement1;{ ;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-keyframes;movement1;{ ;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);;;} } @keyframes;movement2;{ ;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-keyframes;movement2;{ ;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);;;} }@keyframes;movement3;{ ;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-keyframes;movement3;{ ;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);;;} } @keyframes;light_move;{ ;;0%;{transform:rotate(0deg);;opacity:;0} ;;30%{transform:rotate(40deg);;opacity:;1} ;;75%{transform:rotate(90deg);} ;;100%{transform:rotate(0deg);} }@-webkit-keyframes;light_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);} }@keyframes;light_move1;{ ;;0%;{transform:rotate(0deg);opacity:;0} ;;30%{transform:rotate(-40deg);opacity:;1} ;;75%{transform:rotate(-90deg);} ;;100%{transform:rotate(0deg);} }@-webkit-keyframes;light_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);} } ;;</style> </body> </html>

HTML动画，花飘动效果

2018-06-14

1335 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> ;;;;;;;;<div;class="hua;hua2"><img;src="images/2018/fiveActive/hua2.png";alt=""></div> ;;;;;;;;<div;class="hua;hua3"><img;src="images/2018/fiveActive/hua4.png";alt=""></div> </div>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:;dong1;6s;linear;;infinite;; ;;;;-webkit-animation:dong1;6s;linear;infinite;;; ;;;;-o-animation:dong1;6s;linear;;infinite;; ;;;;-moz-animation:dong1;6s;linear;;infinite;; } .hua2{ ;;;;width:3%; ;;;;animation:;dong2;7s;linear;;infinite;; ;;;;-webkit-animation:dong2;7s;linear;;infinite;; ;;;;-o-animation:dong2;7s;linear;infinite;;; ;;;;-moz-animation:dong2;7s;linear;;infinite;; } .hua3{ ;;;;width:6%; ;;;;animation:;dong3;8s;linear;;infinite;; ;;;;-webkit-animation:dong3;8s;linear;infinite;;; ;;;;-o-animation:dong3;8s;linear;infinite;;; ;;;;-moz-animation:dong3;8s;linear;;infinite;; } /*动画一*/ @keyframes;dong1{ ;;;;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-keyframes;dong1{ ;;;;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-keyframes;dong1{ ;;;;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-keyframes;dong1{ ;;;;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%;} } /*动画二*/ @keyframes;dong2{ ;;;;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-keyframes;dong2{ ;;;;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-keyframes;dong2{ ;;;;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-keyframes;dong2{ ;;;;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%;} } /*动画三*/ @keyframes;dong3{ ;;;;0%;{left:;39%;top:;75.8%;} ;;;;50%;{left:;18%;top:;86.5%;} ;;;;100%;{left:;-10%;top:;96%;} } @-webkit-keyframes;dong3{ ;;;;0%;{left:;39%;top:;75.8%;} ;;;;50%;{left:;18%;top:;86.5%;} ;;;;100%;{left:;-10%;top:;96%;} } @-moz-keyframes;dong3{ ;;;;0%;{left:;39%;top:;75.8%;} ;;;;50%;{left:;18%;top:;86.5%;} ;;;;100%;{left:;-10%;top:;96%;} } @-o-keyframes;dong3{ ;;;;0%;{left:;39%;top:;75.8%;} ;;;;50%;{left:;18%;top:;86.5%;} ;;;;100%;{left:;-10%;top:;96%;} }

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

2017-11-03

1341 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

2663 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(-8px);transform:translateY(-8px);}2;.amint-da---缓慢放大.amint-da{ ;;;;animation:;scaleOut;1s;1s;infinite;ease; } @-webkit-keyframes;scaleOut;{ ;;;;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;.2s;linear; -webkit-transition:all;.2s;linear; -moz-transition:all;.2s;linear; -ms-transition:all;.2s;linear; -o-transition:all;.2s;} .p3;li:hover{transform:translateY(-5px);}4 .c_stykebrn按钮不停放大.c_stykebrn{ -moz-animation:fd;;1s;linear;infinite;backwards;;-ms-animation:fd;;1s;linear;infinite;backwards;;-o-animation:fd;;1s;linear;infinite;backwards;;-webkit-animation:fd;;1s;linear;infinite;backwards;;animation:fd;;1s;linear;infinite;backwards;; } @keyframes;fd{ 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:;center;bottom;;/*设置动画旋转元素的基点为*/ ;;cursor:;pointer; } ; @keyframes;aroundAnimation{ ;;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:;showb;2s;.2s;linear;both;infinite;;-webkit-animation:;showb;2s;.2s;linear;both;infinite;;-moz-animation:;showb;2s;.2s;linear;both;infinite;;-o-animation:;showb;2s;.2s;linear;both;infinite;;-ms-animation:;showh;1s;.2s;linear;both;infinite;} @-webkit-keyframes;showb{ ;;;;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按钮上下抖动@keyframes;hotspot-down{25%{transform:translateY(-2px)}50%,100%{transform:translateY(0)}75%{transform:translateY(2px)}} .animate-hotspot-down{-webkit-animation:hotspot-down;2s;linear;infinite;animation:hotspot-down;2s;linear;infinite}7 .鼠标悬停刀片加抖动效果.banner_btn{display:;block;;width:;312px;;height:78px;;;background:;url(images/banner_btn_03.png);no-repeat;center;top;;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;.2s;linear;-webkit-transition:all;.2s;linear;-moz-transition:all;.2s;linear;-ms-transition:all;.2s;linear;-o-transition:all;.2s;linear;} .banner_btn:before;{ ;content:;';'; ;position:;absolute; ;background:;#fff; ;width:;10px; ;height:;100px; ;top:;0; ;left:;-200px; ;opacity:;0.2; ;-webkit-transition:;all;0.3s;ease-out; ;transition:;all;0.3s;ease-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、按钮左右走动.junp;img{ ;;;;webkit-animation:;jump;3s;linear;normal;both;infinite; ;;;;-o-animation:;jump;3s;linear;normal;both;infinite; ;;;;animation:;jump;3s;linear;normal;both;infinite; } @keyframes;;jump{ ;;;;0%{ ;;;;;;;;transform:;translateX(0); ;;;;} ;;;;50%{ ;;;;;;;;transform:;translateX(15px); ;;;;} ;;;;100%{ ;;;;;;;;transform:;translateX(0); ;;;;} }9、晃动效果.sp1{ ;;;;-webkit-animation:;fan;2s;infinite; ;;;;animation:;fan;2s;infinite; } .sp1{ ;;;;top:84px; ;;;;right:173px; } @keyframes;fan;{ ;;;;0%{ ;;;;;;;;transform:;rotateY(0deg); ;;;;} ;;;;100%{ ;;;;;;;;transform:;rotateY(360deg); ;;;;} }10、缩小放大.chatcar{;width:50px;;height:50px;;background:#000;;animation:chatchars;2s;ease;} @keyframes;chatchars{ 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:;swing;7s;cubic-bezier(0.5,;0,;0.5,;1);infinite;both; ;;animation:;swing;7s;cubic-bezier(0.5,;0,;0.5,;1);infinite;both; } @keyframes;swing;{ ;;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:tada;1.5s;linear;normal;both;infinite;-o-animation:tada;1.5s;linear;normal;both;infinite;animation:tada;1.5s;linear;normal;both;infinite} @-moz-keyframes;tada{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-keyframes;tada{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:typing;4s;steps(11,end);infinite,blink-caret;.5s;step-end;infinite;alternate} @keyframes;typing{0%{width:0}25%{width:22ch}100%{width:22ch}} @keyframes;blink-caret{50%{border-color:transparent}} @-webkit-keyframes;anim1{0%{top:0;opacity:1}100%{top:-100px;opacity:1}}15.按钮不停旋转20度.btn{ ;;;;-webkit-animation:;swing;2s;linear;normal;both;infinite; ;;;;-o-animation:;swing;2s;linear;normal;both;infinite; ;;;;animation:;swing;2s;linear;normal;both;infinite; } @keyframes;;swing{ ;;;;0%{;;transform:;rotate(5deg);;;} ;;;;50%{;;transform:;rotate(-5deg);;;} ;;;;100%{;;transform:;rotate(5deg);;;} } @-webkit-keyframes;;swing{ ;;;;0%{;;-webkit-transform:;rotate(5deg);;;} ;;;;50%{;;-webkit-transform:;rotate(-5deg);;;} ;;;;100%{;;-webkit-transform:;rotate(5deg);;;} }16.鼠标悬停显示按钮html:<ul;class="p4_cr">;;;; <li>;;;; <a;href="">;;;; <a;href="";class="pubtn;p4_btn">按钮>></a>;;;; </a>;;;; </li>;;;; <li>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_cr;li;a.pubtn{transition:;all;0.5s;linear;;-webkit-transition:;all;0.5s;linear;;opacity:;0;;} .p4_cr;li:hover{transform:translate(0px,-20px);-webkit-transform:translate(0px,-20px);;} .p4_cr;li:hover;a.pubtn{bottom:;-30px;opacity:;1;;color:;#fff;}15.按钮上下动;;目标{animation:;float;4s;ease;infinite;} ;;@keyframes;float;{ ;;;;0%,100%;{ ;;;;;;;;transform:;translate3d(0,0,0) ;;;;} ;;;;40%;{ ;;;;;;;;transform:;translate3d(0,-20px,0) ;;;;} ;;}16.从小大的圆形.mubiao{;width:5px;height:5px;;margin:;300px;auto;;background:;#000;;border-radius:50%;;animation:vs;3s;linear;infinite;backwards} @keyframes;vs{0%{box-shadow:0;0;156px;#000} 25%{box-shadow:0;0;0;80px;#000} 50%{box-shadow:0;0;0;156px;#000} 25%{box-shadow:0;0;0;80px;#000} 100%{box-shadow:0;0;156px;#000} }17.放大隐藏.目标{;width:;50px;;height:;50px;;background:;#000;;-webkit-animation:scaleout;3.3s;infinite;ease-in-out;;animation:scaleout;3.3s;infinite;ease-in-out;} @-webkit-keyframes;scaleout;{ 0%;{ -webkit-transform:scale(1.0) } 100%;{ -webkit-transform:scale(2.1); opacity:0; } }@keyframes;scaleout;{ 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:pulseScale;2s;infinite;} .pulseScale{-webkit-animation-name:pulseScale;animation-name:pulseScale} @-webkit-keyframes;pulseScale{50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 100%{-webkit-transform:translateZ(0)} } @keyframes;pulseScale{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;.3s;linear;-moz-transition:all;.3s;linear;transition:all;.3s;linear;} .swtBtn:hover{-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);-o-transform:rotateY(360deg);-webkit-transform:rotateY(360deg);;transform:rotateY(360deg)}20.按钮放大效果<style> .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-scale;1s;0s;ease-in-out;infinite; -moz-animation:;ball-scale;1s;0s;ease-in-out;infinite; -ms-animation:;ball-scale;1s;0s;ease-in-out;infinite; -o-animation:;ball-scale;1s;0s;ease-in-out;infinite; animation:;ball-scale;1s;0s;ease-in-out;infinite; } @-webkit-keyframes;ball-scale;{ ;;;;0%;{ ;;;;;;;;-webkit-transform:;scale(0); ;;;;;;;;transform:;scale(0) ;;;;} ;;;;100%;{ ;;;;;;;;-webkit-transform:;scale(1); ;;;;;;;;transform:;scale(1); ;;;;;;;;opacity:;0 ;;;;} } @keyframes;ball-scale;{ ;;;;0%;{ ;;;;;;;;-webkit-transform:;scale(0); ;;;;;;;;transform:;scale(0) ;;;;} ;;;;100%;{ ;;;;;;;;-webkit-transform:;scale(1); ;;;;;;;;transform:;scale(1); ;;;;;;;;opacity:;0 ;;;;} } </style>; <a;href="javascript:;";class="btn"> 了解详情 <div;class="div2"></div> </a>