常用CSS 样式特效 【持续更新中】

改变input文本框的placeholder属性的预留提醒文本颜色：

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #808080;　　}
input:-moz-placeholder, textarea:-moz-placeholder {color:#808080;}
input::-moz-placeholder, textarea::-moz-placeholder {color:#808080;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#808080;}

 

鼠标移入元素旋转360度放大效果移出恢复：

.avator img{border-radius: 100%;transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}
.avator img:hover{transform: rotate(360deg) scale(1.2);-webkit-transform: rotate(360deg) scale(1.2);-moz-transform: rotate(360deg) scale(1.2);-o-transform: rotate(360deg) scale(1.2);-ms-transform: rotate(360deg) scale(1.2);}

 文本框获取焦点效果 1：

input:focus {outline: none; color: #000;transition: border linear .1s,box-shadow linear .3s;-moz-transition: border linear .1s,-moz-box-shadow linear .3s;-webkit-transition: border linear .1s,-webkit-box-shadow linear .3s;border-color: rgba(22,154,218,.75);box-shadow: 0 0 10px rgba(22,154,218,.105);-moz-box-shadow: 0 0 10px rgba(22,154,218,.5);-webkit-box-shadow: 0 0 10px rgba(22,154,218,3);}

 文本框获取焦点效果 2：

input:focus,textarea:focus{-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;-webkit-box-shadow:0 0 3px #58ACFA;-moz-box-shadow: 0 0 3px #58ACFA;box-shadow:0 0 3px #58ACFA;}

 背景图片填充文本效果：

div{background: #fff url("border.jpg");background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

 渐变背景填充图片效果：

background-image: url(“http://www.addthis.com/dietsite-assets/images/homepage/translucent-swoop-L-e6041ce65e.png”),linear-gradient(90deg, #0088f7 0%, #1ece8e 100%);