少量好看的css样式

  • 时间:2018-06-06 00:32 作者:九云IT 来源:九云IT 阅读:222
  • 扫一扫,手机访问
摘要:先看看效果图:那个蚂蚁行军框是能动的,有趣html代码,想要看那个css样式就使用对应的classNamecss回退样式 YES! OK! Cancel! hello world !!! hello world !!! 半透明边框 多重边框 内圆角 条纹背景 格子背景的

先看看效果图:

少量好看的css样式

那个蚂蚁行军框是能动的,有趣

html代码,想要看那个css样式就使用对应的className

css回退样式

  • hello
  • world
  • !!!

  1. hello
  2. world
  3. !!!

半透明边框

多重边框

内圆角

条纹背景

格子背景的实现

信封背景

蚂蚁行军边框

椭圆圆角

用伪元素创立平行四边形

切角效果

目前看不出什么效果

连字效果:hello my name is kangkang,welcome to China!

css代码

.box1 {

height: 25em;

width: 20em;

background: rgb(255, 128, 0);

background: -moz-linear-gradient(0deg, yellow, red);

background: -o-linear-gradient(0deg, yellow, red);

background: -webkit-linear-gradient(0deg, yellow, red);

background: linear-gradient(90deg, yellow, red);

float: left;

}

h1 {

color: gray;

}

@supports (text-shadow: 0 0 .3em gray) {

h1 {

color: transparent;

text-shadow: 0 0 .3em gray;

}

}

button {

padding: .3em .8em;

border: 1px solid rgba(0,0,0,.1);

background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);

border-radius: .2em;

box-shadow: 0 .05em .25em rgba(0,0,0,.5);

color: white;

text-shadow: 0 -.05em .05em rgba(0,0,0,.5);

font-size: 125%;

line-height: 1.5;

}

button.ok {

background-color: #6b0;

}

button.cancel {

background-color: #c00;

}

ul { --accent-color: purple; }

ol { --accent-color: rebeccapurple; }

li { background: var(--accent-color); }

.box2 {

width: 10em;

height: 8em;

float: left;

border: 10px solid hsla(0,0%,100%,.5);

background-clip: padding-box;

margin: 2em;

}

.box3 {

width: 10em;

height: 8em;

background: yellowgreen;

box-shadow: 0 0 0 10px #655,

0 0 0 15px deeppink,

0 2px 5px 15px rgba(0,0,0,.6);

float: left;

margin: 2em;

}

.box4 {

width: 10em;

height: 8em;

background: tan;

border-radius: .8em;

padding: 1em;

box-shadow: 0 0 0 .6em #655;

outline: .6em solid #655;

float: left;

}

.box5 {

width: 10em;

height: 8em;

float: left;

margin: 2em;

background: linear-gradient(45deg,

#fb3 25%, #58a 0, #58a 50%,

#fb3 0, #fb3 75%, #58a 0);

background-size: 30px 30px;

}

.box6 {

width: 10em;

height: 8em;

float: left;

background: #655;

background-image: radial-gradient(tan 30%, transparent 0),

radial-gradient(tan 30%, transparent 0);

background-size: 30px 30px;

background-position: 0 0, 15px 15px;

}

.box7 {

width: 10em;

height: 8em;

float: left;

padding: 1em;

border: 1em solid transparent;

background: linear-gradient(white, white) padding-box,

repeating-linear-gradient(-45deg,

red 0, red 12.5%,

transparent 0, transparent 25%,

#58a 0, #58a 37.5%,

transparent 0, transparent 50%)

0 / 5em 5em;

}

@keyframes ants { to { background-position: 100% } }

.box8 {

width: 10em;

height: 8em;

float: left;

margin: 2em;

padding: 1em;

border: 1px solid transparent;

background:

linear-gradient(white, white) padding-box,

repeating-linear-gradient(-45deg,

black 0, black 25%, white 0, white 50%

) 0 / .6em .6em;

animation: ants 12s linear infinite;

}

.box9 {

width: 10em;

height: 8em;

float: left;

background: blue;

border-radius: 50% / 50%;

}

.box10 {

width: 10em;

height: 8em;

float: left;

position: relative;

}

.box10::before {

margin-left: 2em;

content: ''; /* 使用伪元从来生成一个矩形 */

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

z-index: -1;

background: #58a;

transform: skew(45deg);

}

.box11 {

margin-left: 5em;

width: 10em;

height: 8em;

float: left;

}

img {

clip-path: polygon(50% 0, 100% 50%,

50% 100%, 0 50%);

transition: 1s clip-path;

}

img:hover {

clip-path: polygon(0 0, 100% 0,

100% 100%, 0 100%);

}

.box12 {

width: 10em;

height: 8em;

float: left;

margin-left: 2em;

background: #58a;

background:

linear-gradient(-45deg, transparent 15px, #58a 0)

right,

linear-gradient(45deg, transparent 15px, #655 0)

left;/* 若用径向渐变radial-gradient()就是变成弧形切角 */

background-size: 50% 100%; /*背景大小,第一个是宽度,第二个是高度 */

background-repeat: no-repeat;

}

.box13 {

margin-top: 3em;

width: 10em;

height: 8em;

margin-left: 2em;

font-variant-ligatures: common-ligatures

discretionary-ligatures

historical-ligatures;

float: left;

}

.box14 {

width: 10em;

height: 8em;

margin-left: 3em;

background: #203;

color: #ffc;

text-shadow: 0 0 .1em, 0 0 .3em;

float: left;

}

.box14 a {

background: #203;

color: white;

transition: 1s;

}

.box14 a:hover {/*:hover 状态下把文字本身隐藏掉,那它看起来真的就像在慢慢变模糊*/

color: transparent;

text-shadow: 0 0 .1em white, 0 0 .3em white;

}

文章来源于网络

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
【系统环境|服务器应用】第10题- 你不知道的delete操作符(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部