html文字和居中圆,CSS3首页居中圆形标题文本效果

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:700");

html,

body {

height: 100%;

padding: 0;

margin: 0;

font-family: 'PT Sans Narrow', sans-serif;

}

* {

box-sizing: border-box;

}

body {

background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/172299/14991864_10154634234740675_5670628946850978668_n.jpg);

background-size: 100vmax;

background-position: center;

}

body:before {

content: '';

display: block;

position: absolute;

top: 0;

left: 0;

margin: 1%;

width: 98%;

height: 98%;

border: 1px solid white;

mix-blend-mode: screen;

opacity: 0.15;

}

body:after {

content: '';

display: block;

width: 100%;

height: 100%;

background: url(https://lostandtaken.com/wp-content/uploads/edd/2016/02/subtle-light-grunge-texture-8.jpg);

background-size: cover;

mix-blend-mode: overlay;

opacity: 0.4;

}

#circle {

background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/172299/15027809_10154634234805675_8079536204838967476_n.jpg);

background-size: 100vmax;

background-position: center;

width: 50vmin;

height: 50vmin;

border-radius: 50%;

overflow: hidden;

position: absolute;

top: 50%;

left: 50%;

margin: -25vmin 0 0 -25vmin;

}

#circle p {

background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/172299/14991864_10154634234740675_5670628946850978668_n.jpg);

-webkit-background-clip: text;

color: transparent;

text-align: center;

text-transform: uppercase;

font-size: 8.5vmin;

margin: 50% 0 0 50%;

position: relative;

transform: translateX(-50%) translateY(-50%);

background-position: 30vmax bottom;

text-shadow: 0 0 0 rgba(255, 255, 255, 0.3);

line-height: 9vmin;

}

#circle p span {

display: block;

font-size: 5vmin;

line-height: 5vmin;

position: relative;

}

#circle p span:before,

#circle p span:after {

content: '';

display: block;

position: absolute;

top: 49%;

height: 2px;

background: rgba(255, 255, 255, 0.3);

width: 4vmin;

}

#circle p span:before {

left: 0;

}

#circle p span:after {

right: 0;

}