css 制作图片,CSS制作图形

最新推荐文章于 2022-06-14 15:49:12 发布
最新推荐文章于 2022-06-14 15:49:12 发布
阅读量408 收藏
点赞数 1
文章标签： css 制作图片

气泡三角形

bVbm6Bl?w=452&h=256

利用 border 的 transparent 特性实现

.bubbly

.bubbly {

position: absolute;

top:50%;

left: 50%;

transform:translate(-50%,-50%);

background: #00aabb;

border-radius: .4em;

width: 260px;

padding: 60px 20px;

text-align: center;

color: white;

font-size: 200%;

}

.bubbly:after {

content: '';

position: absolute;

bottom: 0;

left: 50%;

border: 34px solid transparent;

border-top-color: #00aabb;

border-bottom: 0;

border-left: 0;

margin: 0 0 -34px -17px;

}

梯形

bVbm6BK?w=432&h=235

梯形

利用伪类加旋转透视实现

.trapezoid

.trapezoid{

position: absolute;

top:50%;

left: 50%;

transform:translate(-50%,-50%);

width: 160px;

padding: 60px;

text-align: center;

color: white;

font-size: 200%;

}

.trapezoid:before{

content:"";

position: absolute;

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

transform:perspective(40px) scaleY(1.3) rotateX(5deg);

transform-origin: bottom;

background:deeppink;

z-index:-1;

}

爱心

bVbm6B0?w=272&h=178

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before,

#heart:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

太极图

bVbm6B5?w=223&h=169

 
 
#yin-yang {
 
 
width: 96px;
 
 
height: 48px;
 
 
background: #eee;
 
 
border-color: red;
 
 
border-style: solid;
 
 
border-width: 2px 2px 50px 2px;
 
 
border-radius: 100%;
 
 
position: relative;
 
 
}
 
 
#yin-yang:before {
 
 
content: "";
 
 
position: absolute;
 
 
top: 50%;
 
 
left: 0;
 
 
background: #eee;
 
 
border: 18px solid red;
 
 
border-radius: 100%;
 
 
width: 12px;
 
 
height: 12px;
 
 
}
 
 
#yin-yang:after {
 
 
content: "";
 
 
position: absolute;
 
 
top: 50%;
 
 
left: 50%;
 
 
background: red;
 
 
border: 18px solid #eee;
 
 
border-radius:100%;
 
 
width: 12px;
 
 
height: 12px;
 
 
}
 
 
折角
 
 
bVbm6Cn?w=548&h=389
 
 
 
  
利用切角、伪类、渐变、旋转实现
 
  
.corner
 
 
 
 
.corner{
 
 
position: absolute;
 
 
top:50%;left: 50%;
 
 
transform:translate(-50%,-50%);
 
 
width: 120px;line-height:120px;
 
 
padding:40px;
 
 
text-align: center;
 
 
color: white;
 
 
font-size: 200%;
 
 
background:linear-gradient(-150deg,transparent 1.5em, yellowgreen 0);
 
 
border-radius:.5em;
 
 
}
 
 
.corner:before{
 
 
content: '';
 
 
position: absolute;
 
 
top: 0; right: 0;
 
 
background:
 
 
linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
 
 
width: 1.73em; height: 3em;
 
 
transform: translateY(-1.3em) rotate(-30deg);
 
 
transform-origin: bottom right;
 
 
border-bottom-left-radius: inherit;
 
 
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
 
 
}
 
 
混合模式背景图
 
 
bVbm6CO?w=576&h=350
 
 
 
  
利用渐变实现
 
  
.colorful-stripe
 
 
 
 
.colorful-stripe {
 
 
position: absolute;
 
 
top: 50%;
 
 
left: 50%;
 
 
transform: translate(-50%, -50%);
 
 
width: 300px;
 
 
line-height: 200px;
 
 
text-align: center;
 
 
color: #fff;
 
 
font-size: 200%;
 
 
border-radius: .5em;
 
 
background:
 
 
linear-gradient(limegreen, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);
 
 
background-blend-mode: screen;
 
 
}
 
 
多云
 
 
bVbm6Dl?w=703&h=461
 
 
 
  
利用线性渐变、阴影、缩放实现
 
  
.cloudy
 
 
 
 
.cloudy{
 
 
position: absolute;
 
 
top: 50%;left: 50%;
 
 
width:200px;height:260px;
 
 
transform: translate(-50%, -50%);
 
 
text-align:center;
 
 
font-size:200%;
 
 
color:#fff;
 
 
background:#2EB5E5;
 
 
border-radius:5px;
 
 
}
 
 
.cloudy:before {
 
 
content: "";
 
 
text-indent:23px;
 
 
font-size:22px;
 
 
line-height:40px;
 
 
color:#333;
 
 
position: absolute;
 
 
height: 50px;width: 50px;
 
 
background: #FFFFFF;
 
 
left:30%;
 
 
top:45%;
 
 
transform: translate(-50%, -50%);
 
 
border-radius: 50%;
 
 
box-shadow:
 
 
#FFFFFF 65px -15px 0 -5px,
 
 
#FFFFFF 25px -25px,
 
 
#FFFFFF 30px 10px,
 
 
#FFFFFF 60px 15px 0 -10px,
 
 
#FFFFFF 85px 5px 0 -5px,
 
 
#C8C8C8 35px -35px,
 
 
#C8C8C8 66px -27px 0 -5px,
 
 
#C8C8C8 91px -10px 0 -8px;
 
 
animation: cloudy 5s ease-in-out infinite;
 
 
}
 
 
.cloudy:after{
 
 
content:"";
 
 
position: absolute;
 
 
top: 80%;left: 50%;
 
 
height: 15px;
 
 
width: 120px;
 
 
background:rgba(0,0,0,.5);
 
 
border-radius: 50%;
 
 
transform: translate(-50%, -50%);
 
 
animation: cloudy_shadow 5s ease-in-out infinite;
 
 
}
 
 
@keyframes cloudy {
 
 
50%{
 
 
transform: translate(-50%, -70%);
 
 
}
 
 
100%{
 
 
transform: translate(-50%, -50%);
 
 
}
 
 
}
 
 
@keyframes cloudy_shadow {
 
 
50%{
 
 
transform: translate(-50%, -50%) scale(0.8);
 
 
background:rgba(0,0,0,.2);
 
 
}
 
 
100%{
 
 
transform: translate(-50%, -50%) scale(1);
 
 
background:rgba(0,0,0,.5);
 
 
}
 
 
}
 
 
阴影实现多云天气图案
 
 
bVbm6DA?w=583&h=465
 
 
 
  
多云(cloudy2)(单标签实现)
 
  
利用线性渐变、阴影、缩放实现
 
  
.cloudy2
 
 
 
 
.cloudy2{
 
 
position: absolute;
 
 
top: 50%;left: 50%;
 
 
width:200px;height:260px;
 
 
transform: translate(-50%, -50%);
 
 
text-align:center;
 
 
font-size:200%;
 
 
color:#fff;
 
 
background:#2EB5E5;
 
 
border-radius:5px;
 
 
}
 
 
.cloudy2:before {
 
 
content: "";
 
 
text-indent:23px;
 
 
font-size:22px;
 
 
line-height:40px;
 
 
color:#333;
 
 
position: absolute;
 
 
height: 50px;width: 50px;
 
 
background: #FFFFFF;
 
 
left:30%;
 
 
top:55%;
 
 
transform: translate(-50%, -50%);
 
 
border-radius: 50%;
 
 
z-index:100;
 
 
box-shadow:
 
 
#FFFFFF 65px -15px 0 -5px,
 
 
#FFFFFF 25px -25px,
 
 
#FFFFFF 30px 10px,
 
 
#FFFFFF 60px 15px 0 -10px,
 
 
#FFFFFF 85px 5px 0 -5px;
 
 
animation: cloudy2 5s ease-in-out infinite;
 
 
}
 
 
.cloudy2:after{
 
 
content:"";
 
 
position: absolute;
 
 
top: 45%;left: 63%;
 
 
height: 60px;
 
 
width: 60px;
 
 
z-index:10;
 
 
background:linear-gradient(180deg,#FE9F38 0%, #F46635 100%);
 
 
border-radius: 50%;
 
 
transform: translate(-50%, -50%);
 
 
box-shadow: 0 0 10px 4px #FFA563;
 
 
animation: cloudy2 10s ease-in-out infinite;
 
 
}
 
 
@keyframes cloudy2 {
 
 
50%{
 
 
transform: translate(-50%, -70%);
 
 
}
 
 
100%{
 
 
transform: translate(-50%, -50%);
 
 
}
 
 
}
 
 
阴影实现雨天天气图案
 
 
bVbm6DL?w=658&h=464
 
 
 
  
雨(rainy)
 
  
利用线性渐变、阴影、缩放实现
 
  
.rainy
 
 
 
 
.rainy-container {
 
 
position: absolute;
 
 
top: 50%;
 
 
left: 50%;
 
 
width: 200px;
 
 
height: 260px;
 
 
transform: translate(-50%, -50%);
 
 
text-align: center;
 
 
font-size: 200%;
 
 
color: #fff;
 
 
background: #E6E6E6;
 
 
border-radius: 5px;
 
 
}
 
 
.rainy {
 
 
position: absolute;
 
 
width: 3px;
 
 
height: 6px;
 
 
top: 30%;
 
 
left: 50%;
 
 
background: #CCCCCC;
 
 
border-radius: 50%;
 
 
animation: rainy_rain .7s infinite linear;
 
 
}
 
 
.rainy:before {
 
 
content: "";
 
 
color: #333;
 
 
position: absolute;
 
 
height: 50px;
 
 
width: 50px;
 
 
top: 30px;
 
 
left: -40px;
 
 
background: #CCC;
 
 
transform: translate(-50%, -50%);
 
 
border-radius: 50%;
 
 
box-shadow: #CCC 65px -15px 0 -5px, #CCC 25px -25px, #CCC 30px 10px, #CCC 60px 15px 0 -10px, #CCC 85px 5px 0 -5px;
 
 
animation: cloudy 5s ease-in-out infinite;
 
 
}
 
 
.rainy:after {
 
 
content: "";
 
 
position: absolute;
 
 
top: 120px;
 
 
left: 50%;
 
 
height: 15px;
 
 
width: 120px;
 
 
background: rgba(0, 0, 0, .5);
 
 
border-radius: 50%;
 
 
transform: translate(-50%, -50%);
 
 
animation: cloudy_shadow 5s ease-in-out infinite;
 
 
}
 
 
@keyframes cloudy {
 
 
50% {
 
 
transform: translate(-50%, -70%);
 
 
}
 
 
100% {
 
 
transform: translate(-50%, -50%);
 
 
}
 
 
}
 
 
@keyframes cloudy_shadow {
 
 
50% {
 
 
transform: translate(-50%, -50%) scale(0.8);
 
 
background: rgba(0, 0, 0, .2);
 
 
}
 
 
100% {
 
 
transform: translate(-50%, -50%) scale(1);
 
 
background: rgba(0, 0, 0, .5);
 
 
}
 
 
}
 
 
@keyframes rainy_rain {
 
 
0% {
 
 
box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
 
 
}
 
 
25% {
 
 
box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 120px, rgba(0, 0, 0, 0) 12px 120px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
 
 
}
 
 
26% {
 
 
box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 40px, rgba(0, 0, 0, 0) 12px 20px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
 
 
}
 
 
50% {
 
 
box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 100px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
 
 
}
 
 
51% {
 
 
box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 45px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
 
 
}
 
 
75% {
 
 
box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 95px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 120px, rgba(0, 0, 0, 0) 30px 110px;
 
 
}
 
 
76% {
 
 
box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 35px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 25px, rgba(0, 0, 0, 0) 30px 15px;
 
 
}
 
 
100% {
 
 
box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
 
 
}
 
 
}
 
 
彩虹天气图案
 
 
bVbm6D6?w=628&h=453
 
 
 
  
彩虹(rainbow)
 
  
利用border、box-shadow 实现
 
  
.rainbow
 
 
 
 
.rainbow-container{
 
 
position: absolute;
 
 
top: 50%;left: 50%;
 
 
width:200px;height:260px;
 
 
transform: translate(-50%, -50%);
 
 
text-align:center;
 
 
font-size:200%;
 
 
color:#fff;
 
 
background:#F3D166;
 
 
border-radius:5px;
 
 
}
 
 
.rainbow{
 
 
position:absolute;
 
 
top: 50%;
 
 
left: 50%;
 
 
transform: translate(-50%, -50%);
 
 
height: 1px;width: 1px;
 
 
}
 
 
.rainbow:before{
 
 
content:"";
 
 
position:absolute;
 
 
top: 50%;left: 50%;
 
 
transform: translate(-50%, -50%) rotate(45deg);
 
 
height: 70px;width: 70px;
 
 
border-radius: 100px 0 0 0;
 
 
box-shadow:
 
 
#F44336 -2px -2px 0 1px,
 
 
#FF9800 -4px -4px 0 3px,
 
 
#FFEB3B -6px -6px 0 5px,
 
 
#8BC34A -8px -8px 0 7px,
 
 
#00BCD4 -10px -10px 0 9px,
 
 
#2196F3 -12px -12px 0 11px,
 
 
#9C27B0 -14px -14px 0 13px;
 
 
animation: rainbow 5s ease-in-out infinite;
 
 
}
 
 
.rainbow:after{
 
 
content: "";
 
 
position: absolute;
 
 
top: 70px;
 
 
left: 50%;
 
 
height: 15px;
 
 
width: 120px;
 
 
background: rgba(0, 0, 0, .5);
 
 
border-radius: 50%;
 
 
transform: translate(-50%, -50%);
 
 
animation: cloudy_shadow 5s ease-in-out infinite;
 
 
}
 
 
@keyframes rainbow {
 
 
50% {
 
 
transform: translate(-50%, -55%) rotate(30deg);
 
 
}
 
 
100% {
 
 
transform: translate(-50%, -50%) rotate(45deg);
 
 
}
 
 
}
 
 
@keyframes cloudy_shadow {
 
 
50% {
 
 
transform: translate(-50%, -50%) scale(0.8);
 
 
background: rgba(0, 0, 0, .2);
 
 
}
 
 
100% {
 
 
transform: translate(-50%, -50%) scale(1);
 
 
background: rgba(0, 0, 0, .5);
 
 
}
 
 
}
 
 
雪天天气图案
 
 
bVbm6Eg?w=618&h=461
 
 
 
  
雪(snowy)
 
  
利用阴影实现
 
  
.snowy
 
 
 
 
.snowy-container {
 
 
position: absolute;
 
 
top: 50%;
 
 
left: 50%;
 
 
width: 200px;
 
 
height: 260px;
 
 
transform: translate(-50%, -50%);
 
 
text-align: center;
 
 
font-size: 200%;
 
 
color: #fff;
 
 
background: #607D8B;
 
 
border-radius: 5px;
 
 
}
 
 
.snowy {
 
 
position: absolute;
 
 
width: 4px;
 
 
height: 4px;
 
 
border-radius:50%;
 
 
top: 30%;
 
 
left: 50%;
 
 
background: #fff;
 
 
border-radius: 50%;
 
 
animation: snowy_rain 2s infinite linear;
 
 
}
 
 
.snowy:before {
 
 
content: "";
 
 
color: #333;
 
 
position: absolute;
 
 
height: 50px;
 
 
width: 50px;
 
 
top: 30px;
 
 
left: -40px;
 
 
background: #eee;
 
 
transform: translate(-50%, -50%);
 
 
border-radius: 50%;
 
 
box-shadow:
 
 
#eee 65px -15px 0 -5px,
 
 
#eee 25px -25px,
 
 
#eee 30px 10px,
 
 
#eee 60px 15px 0 -10px,
 
 
#eee 85px 5px 0 -5px;
 
 
animation: cloudy 5s ease-in-out infinite;
 
 
}
 
 
.snowy:after {
 
 
content: "";
 
 
position: absolute;
 
 
top: 120px;
 
 
left: 50%;
 
 
height: 15px;
 
 
width: 120px;
 
 
background: rgba(0, 0, 0, .5);
 
 
border-radius: 50%;
 
 
transform: translate(-50%, -50%);
 
 
animation: cloudy_shadow 5s ease-in-out infinite;
 
 
}
 
 
@keyframes cloudy {
 
 
50% {
 
 
transform: translate(-50%, -70%);
 
 
}
 
 
100% {
 
 
transform: translate(-50%, -50%);
 
 
}
 
 
}
 
 
@keyframes cloudy_shadow {
 
 
50% {
 
 
transform: translate(-50%, -50%) scale(0.8);
 
 
background: rgba(0, 0, 0, .2);
 
 
}
 
 
100% {
 
 
transform: translate(-50%, -50%) scale(1);
 
 
background: rgba(0, 0, 0, .5);
 
 
}
 
 
}
 
 
@keyframes snowy_rain {
 
 
0% {
 
 
box-shadow:
 
 
rgba(255, 255, 255, 0) -10px 30px,
 
 
rgba(255, 255, 255, 0) 40px 40px,
 
 
rgba(255, 255, 255, .6) -50px 75px,
 
 
rgba(255, 255, 255, .6) 55px 50px,
 
 
rgba(255, 255, 255, .6) -18px 100px,
 
 
rgba(255, 255, 255, .6) 12px 95px,
 
 
rgba(255, 255, 255, .6) -31px 45px,
 
 
rgba(255, 255, 255, .6) 30px 35px;
 
 
}
 
 
25% {
 
 
box-shadow:
 
 
rgba(255, 255, 255, .6) -10px 45px,
 
 
rgba(255, 255, 255, .6) 40px 60px,
 
 
rgba(255, 255, 255, .6) -50px 90px,
 
 
rgba(255, 255, 255, .6) 55px 65px,
 
 
rgba(255, 255, 255, 0) -18px 120px,
 
 
rgba(255, 255, 255, 0) 12px 120px,
 
 
rgba(255, 255, 255, .6) -31px 70px,
 
 
rgba(255, 255, 255, .6) 30px 60px;
 
 
}
 
 
26% {
 
 
box-shadow:
 
 
rgba(255, 255, 255, .6) -10px 45px,
 
 
rgba(255, 255, 255, .6) 40px 60px,
 
 
rgba(255, 255, 255, .6) -50px 90px,
 
 
rgba(255, 255, 255, .6) 55px 65px,
 
 
rgba(255, 255, 255, 0) -18px 40px,
 
 
rgba(255, 255, 255, 0) 12px 20px,
 
 
rgba(255, 255, 255, .6) -31px 70px,
 
 
rgba(255, 255, 255, .6) 30px 60px;
 
 
}
 
 
50% {
 
 
box-shadow:
 
 
rgba(255, 255, 255, .6) -10px 70px,
 
 
rgba(255, 255, 255, .6) 40px 80px,
 
 
rgba(255, 255, 255, 0) -50px 100px,
 
 
rgba(255, 255, 255, .6) 55px 80px,
 
 
rgba(255, 255, 255, .6) -18px 60px,
 
 
rgba(255, 255, 255, .6) 12px 45px,
 
 
rgba(255, 255, 255, .6) -31px 95px,
 
 
rgba(255, 255, 255, .6) 30px 85px;
 
 
}
 
 
51% {
 
 
box-shadow:
 
 
rgba(255, 255, 255, .6) -10px 70px,
 
 
rgba(255, 255, 255, .6) 40px 80px,
 
 
rgba(255, 255, 255, 0) -50px 45px,
 
 
rgba(255, 255, 255, .6) 55px 80px,
 
 
rgba(255, 255, 255, .6) -18px 60px,
 
 
rgba(255, 255, 255, .6) 12px 45px,
 
 
rgba(255, 255, 255, .6) -31px 95px,
 
 
rgba(255, 255, 255, .6) 30px 85px;
 
 
}
 
 
75% {
 
 
box-shadow:
 
 
rgba(255, 255, 255, .6) -10px 95px,
 
 
rgba(255, 255, 255, .6) 40px 100px,
 
 
rgba(255, 255, 255, .6) -50px 60px,
 
 
rgba(255, 255, 255, 0) 55px 95px,
 
 
rgba(255, 255, 255, .6) -18px 80px,
 
 
rgba(255, 255, 255, .6) 12px 70px,
 
 
rgba(255, 255, 255, 0) -31px 120px,
 
 
rgba(255, 255, 255, 0) 30px 110px;
 
 
}
 
 
76% {
 
 
box-shadow:
 
 
rgba(255, 255, 255, .6) -10px 95px,
 
 
rgba(255, 255, 255, .6) 40px 100px,
 
 
rgba(255, 255, 255, .6) -50px 60px,
 
 
rgba(255, 255, 255, 0) 55px 35px,
 
 
rgba(255, 255, 255, .6) -18px 80px,
 
 
rgba(255, 255, 255, .6) 12px 70px,
 
 
rgba(255, 255, 255, 0) -31px 25px,
 
 
rgba(255, 255, 255, 0) 30px 15px;
 
 
}
 
 
100% {
 
 
box-shadow:
 
 
rgba(255, 255, 255, 0) -10px 120px,
 
 
rgba(255, 255, 255, 0) 40px 120px,
 
 
rgba(255, 255, 255, .6) -50px 75px,
 
 
rgba(255, 255, 255, .6) 55px 50px,
 
 
rgba(255, 255, 255, .6) -18px 100px,
 
 
rgba(255, 255, 255, .6) 12px 95px,
 
 
rgba(255, 255, 255, .6) -31px 45px,
 
 
rgba(255, 255, 255, .6) 30px 35px;
 
 
}
 
 
}
 
 
chrome 浏览器图标
 
 
bVbm6EJ?w=602&h=394
 
 
 
  
Chrome(单标签实现)
 
  
利用渐变实现
 
  
 
 
 
 
.Chrome{
 
 
position: absolute;
 
 
top: 50%;left: 50%;
 
 
width: 180px;height: 180px;
 
 
transform: translate(-50%, -50%);
 
 
box-shadow:0 0px 4px #999,0 0 2px #ddd inset;
 
 
border-radius:50%;
 
 
background-image:
 
 
radial-gradient(#4FACF5 0%,#2196F3 28%, transparent 28%),
 
 
radial-gradient(#fff 33%, transparent 33%),
 
 
linear-gradient(-50deg,#FFEB3B 34%, transparent 34%),
 
 
linear-gradient(60deg,#4CAF50 33%, transparent 33%),
 
 
linear-gradient(180deg,#FF756B 0%, #F44336 30%, transparent 30%),
 
 
linear-gradient(-120deg,#FFEB3B 40%, transparent 40%),
 
 
linear-gradient(-60deg,#FFEB3B 30%, transparent 30%),
 
 
linear-gradient(0deg,#4CAF50 45%, transparent 45%),
 
 
linear-gradient(60deg,#4CAF50 30%, transparent 30%),
 
 
linear-gradient(120deg,#F44336 50%, transparent 50%),
 
 
linear-gradient(180deg,#F44336 30%, transparent 30%);
 
 
background-position:0 0;
 
 
}
 
 
IE 浏览器图标
 
 
bVbm6ES?w=655&h=406
 
 
 
  
IE(单标签实现)
 
  
利用渐变、多重阴影实现
 
  
 
 
 
 
.IE{
 
 
position: absolute;
 
 
top: 50%;left: 50%;
 
 
width:200px; height:200px;
 
 
transform: translate(-50%, -50%);
 
 
border-radius:50%;
 
 
/* box-shadow:1px 2px 1px #ddd; */
 
 
background-image:
 
 
radial-gradient(#fff 38%, transparent 38%),
 
 
radial-gradient(#09C 0%, #09C 100%);
 
 
}
 
 
.IE:before{
 
 
content: "";
 
 
width:285px;
 
 
height:122px;
 
 
background:none;
 
 
border-radius:100%;
 
 
position:absolute;
 
 
top:33px;
 
 
left:-45px;
 
 
margin:auto;
 
 
box-shadow:
 
 
inset 0 12px 0 13px #09c,
 
 
-35px -8px 0 -5px #fff;
 
 
transform: rotate(-35deg);
 
 
}
 
 
.IE:after {
 
 
content: "";
 
 
width: 120px;
 
 
height: 25px;
 
 
background: #09c;
 
 
position: absolute;
 
 
top: 80px;
 
 
left: 0;
 
 
right: 0;
 
 
margin: auto;
 
 
box-shadow: 50px 23px 0 -2px #fff
 
 
}
 
 
safari 浏览器图标
 
 
bVbm6EU?w=755&h=390
 
 
 
  
safari(单标签实现)
 
  
利用渐变、border、旋转实现
 
  
 
 
 
 
.safari{
 
 
position: absolute;
 
 
top: 50%;left: 50%;
 
 
width:200px; height:200px;
 
 
transform: translate(-50%, -50%);
 
 
border-radius:50%;
 
 
border:5px solid #E8E8E8;
 
 
box-shadow:
 
 
-1px 3px 1px 2px #999,
 
 
-1px 3px 1px 2px #999 inset;
 
 
background-image:
 
 
radial-gradient(transparent 30%,#fff 30%,#fff 34%, transparent 34%),
 
 
linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
 
 
linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
 
 
linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
 
 
linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
 
 
linear-gradient(#1DE3FF 0%, #1F52EF 100%);
 
 
background-size: 50% 50%,20px 2px,20px 2px,2px 20px,2px 20px,100%,100%;
 
 
background-repeat:no-repeat;
 
 
background-position:center center, 175px center,5px center,center 175px,center 5px,0 0;
 
 
}
 
 
.safari::before{
 
 
content:"";
 
 
position: absolute;
 
 
top: 10px;left: 50%;
 
 
border-radius:10px;
 
 
/* width:20px; height:80px; */
 
 
border-bottom:100px solid rgba(255,255,255,.9);
 
 
border-left:10px solid transparent;
 
 
border-right:10px solid transparent;
 
 
transform-origin:center 90px;
 
 
z-index:-1;
 
 
transform:translate(-50%, 0%) rotate(40deg);
 
 
}
 
 
.safari::after{
 
 
content:"";
 
 
position: absolute;
 
 
top: 10px;left: 50%;
 
 
border-radius:10px;
 
 
/* width:20px; height:80px; */
 
 
border-bottom:100px solid rgba(255,0,0,.9);
 
 
border-left:10px solid transparent;
 
 
border-right:10px solid transparent;
 
 
transform-origin:center 90px;
 
 
transform:translate(-50%, 0%) rotate(220deg);
 
 
}
 
 
.safari:hover::before{
 
 
transition:transform 1s;
 
 
transform:translate(-50%, 0%) rotate(70deg);
 
 
}
 
 
.safari:hover::after{
 
 
transition:transform 1s;
 
 
transform:translate(-50%, 0%) rotate(250deg);
 
 
}
 


                

        

        




    




    

      

        

            

              
                
                  王若琳
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
用CSS绘制最常见的40种形状和图形，0基础前端开发

				
			

			

				

					2401_84092143的博客
				

				

					04-06
					
					812
					
				

			

		

		

			
				
前端校招精编面试解析大全点击这里免费获取完整版pdf查看女性身体可视化修身工具前端校招精编面试解析大全点击这里免费获取完整版pdf查看。

			
		

	



                

              
                



	

		

			

				
					
html5 css3图标制作,使用CSS生成图标

				
			

			

				

					weixin_30991277的博客
				

				

					06-09
					
					702
					
				

			

		

		

			
				
有一次笔者在参加前端面试的过程中被面试官问到这样一个问题： BootStrapt里面的图标是怎么样的？用过Bootstrapt的开发者都知道，在Bootstrapt里面有一个图标组件，引用这个文件之后，就可以通过给元素添加类名来给元素添加相应的图标，并且这个图标还可以改变颜色和大小。那么它是怎么实现的呢？大家首先想到的最通用的添加图标的方法就是以图片的形式添加，但是仔细想一想，图片能改变颜色吗？大...

			
		

	



                


  
              

                


	

		

			

				
					
使用cssbox将html文件转为图片文件

				
			

			

				

					itigoitie的博客
				

				

					06-11
					
					1024
					
				

			

		

		

			
				
在我的另一篇博客中，大家已经了解到如何使用freemarker动态填充html文件了，那么如何将html文件转为图片文件呢？

			
		

	





	

		

			

				
					
css生成各种图形详解

				
			

			

				

					weixin_34106122的博客
				

				

					04-26
					
					487
					
				

			

		

		

			
				
css面试题之生成各种常见图形
最近一直在看面试题，发现了一些有趣的东西，有很多东西以前不是很懂，都停留在使用的层次上，所以现在开始恶补基础。刚好了看到了一个面试题，感觉以前没有对这个知识点了解的深入，因此现在做个笔记，防止自己忘记。如果你是一名前端开发人员，那么你一定熟悉css吧！那你试一下用纯css实现一个三角形、五角星、平行四边形？用css生成的各种图形基本上都依赖于border、borde...

			
		

	



		

			
		



	

		

			

				
					
还在手动生成图像？太low了！来试试CSS Painting API 自动生成图像的快感！

				
			

			

				

					huz1lu的博客
				

				

					03-02
					
					776
					
				

			

		

		

			
				
图像为应用程序增添色彩，丰富内容。然而，如果网页中嵌入了大量高分辨率图像，会大量增加页面资源加载时间，严重影响用户体验。对于展示产品、方案等必须内容的图像，我们别无选择，只能按照正常方式嵌入这些图像并通过缓存它们来优化应用程序。但是，如果我们在应用程序中需要几何图像，则不必再将其作为资源来加载。


我们可以使用 CSS Painting API 即时生成几何图像。


让我们一起来走进这个 API，并且学习如何使用它生成图像吧～

CSS Painting API 的简介

开发者们能够使用 CSS Pa

			
		

	





	

		

			

				
					
div生成图片_关于CSS的部分课程——div期

				
			

			

				

					weixin_39531604的博客
				

				

					11-29
					
					230
					
				

			

		

		

			
				
今天我们讲的是id选择器和一部分关于div的样式。先上表：background-image设置元素的背景图片background-repeat设置是否及如何重复背景图像。背景图像默认在水平和垂直方向上重复。box-shadow设置元素的阴影效果(比较好看)id设置元素的id，id在HTML文档中必须是唯一的。我们可以通过background-image来设置div元素的背景图片：注意：b...

			
		

	





	

		

			

				
					
css制作的几何图形7.3

				
			

			

				

					07-04
				

			

		

		

			
				
css制作的几个简单的几何图形，已经过测试，均已实现，可以下载交流，如有疑问可留言

			
		

	





	

		

			

				
					
xhtml+css制作不规则导航

				
			

			

				

					10-30
				

			

		

		

			
				
如果需要更精细的控制，可以使用SVG图形，将它们作为背景图像或直接插入到HTML中。  总的来说，创建不规则导航需要对CSS布局、背景图像切片以及交互式样式有深入理解。这不仅涉及到美学，还涉及到技术的运用，确保在...

			
		

	





	

		

			

				
					
CSS制作图形变形弹出效果的示例分享

				
			

			

				

					09-24
				

			

		

		

			
				
标题中提到的“CSS制作图形变形弹出效果”，指的是使用CSS3的变形（Transform）属性来实现元素形状和尺寸的变化。这种技术通常与JavaScript库如jQuery结合使用，以便在用户触发特定事件（例如点击按钮）时控制动画的...

			
		

	





	

		

			

				
					
css制作的4个简单的动画特效

				
			

			

				

					07-07
				

			

		

		

			
				
css制作的动画，有4个图形效果，1个是旋转，一个是变大，一个旋转+变大小，最后一个是上下移动、左右移动

			
		

	





	

		

			

				
					
利用css与html生成瀑布流图片展示

				
			

			

				

					qq_36389107的博客
				

				

					08-30
					
					2963
					
				

			

		

		

			
				
所谓瀑布流，就是想瀑布一样展示图片。不对图片经行处理让图片达到自动排版的效果。让图片展示变得美观。 
    不说废话了，上代码就行了。有需要的拿去用吧。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title&g

			
		

	





	

		

			

				
					
使用CssBox+itext实现jsp页面转图片并导出pdf

				
			

			

				

					11-23
				

			

		

		

			
				
pom文件如下：

    com.itextpdf
    itextpdf
    5.5.12


    com.itextpdf.tool
    xmlworker
    5.5.12


    com.itextpdf
    itext-asian
    5.2.0


    net.sf.cssbox
    cssbox
    4.13


			
		

	





	

		

			

				
					
html css 图标生成器

				
			

			

				

					昊喵喵博士
				

				

					03-09
					
					2150
					
				

			

		

		

			
				
转载：https://www.html.cn/tool/css-clip-path/


			
		

	





	

		

			

				
					
用CSS绘制最常见的40种形状和基本图形

				
			

			

				

					細水、長流√的专栏
				

				

					02-23
					
					952
					
				

			

		

		

			
				
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。

Square(正方形)






#square {
    width: 100px;
    height: 100px;
    background: red;
}

Rectangle(矩形)




#rectangle {
    width: 200px;
    height: 100px;
    bac

			
		

	





	

		

			

				
					
css3制作图形

				
			

			

				

					记录本人工作中遇到的问题、经验总结以及分享。
				

				

					06-14
					
					179
					
				

			

		

		

			
				
css3制作图形。

			
		

	





	

		

			

				
					
html转为图片(三)：Cssbox

				
			

			

				

					小丫头~瞄
				

				

					01-16
					
					3569
					
				

			

		

		

			
				
引入依赖包

<dependency>
    <groupId>net.sf.cssbox</groupId>
    <artifactId>cssbox</artifactId>
    <version>4.14</version>
</dependency>

案例：

 pu

			
		

	





	

		

			

				
					
用css绘制图形,纯 CSS 绘制各种基本图形

				
			

			

				

					weixin_33754535的博客
				

				

					08-03
					
					1184
					
				

			

		

		

			
				
最近被问到如何用CSS绘制一个圆，解决这个问题的同时引发了我对CSS绘制图形的兴趣。今天汇总一下CSS绘制的各种基本图形。1.正方形正方形是最简单的图形了，只需要宽高一致就可以绘制出来。// css.square{width: 100px;height: 100px;border: 1px solid black;}//html正方形2.圆形圆形主要用到了border-radius属性。该属性可以...

			
		

	





	

		

			

				
					
java cssbox_CssBox通过HTML生成图片

				
			

			

				

					weixin_39980809的博客
				

				

					02-16
					
					948
					
				

			

		

		

			
				
Maven管理net.sf.cssboxcssbox4.14其所以依赖的jar包： 集成调用方法：import java.awt.Dimension;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import org.fit.cssbox.demo.ImageRenderer;impor...

			
		

	





	

		

			

				
					
css制作图像遮罩效果

					
最新发布

				
			

			

				

					03-31
				

			

		

		

			
				
图像遮罩效果可以用CSS的clip-path属性来实现。clip-path可以通过定义一个图形，将其应用于一个元素的区域，以定义哪些部分应该显示，哪些部分应该隐藏。

以下是一个使用clip-path制作图像遮罩效果的示例：

HTML代码：

```
<div class="image">
  <img src="https://picsum.photos/400/300" alt="Image">
</div>
```

CSS代码：

```
.image {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
```

在上面的示例中，我们首先将包含图像的容器设置为相对定位，并将其宽度和高度设置为图像的宽度和高度。然后，我们将图像设置为绝对定位，并将其位置设置为容器的左上角。

接下来，我们使用object-fit属性将图像缩放到容器的大小，并使用clip-path属性定义一个多边形，将其应用于图像元素。在这个多边形中，我们定义了四个点来创建一个三角形，它会遮罩图像的下部分。你可以根据自己的需求来调整多边形的形状，以实现不同的遮罩效果。

最后，我们将容器的overflow属性设置为hidden，以确保超出容器边界的部分被裁剪掉。

通过这种方式，我们可以轻松地使用CSS制作各种图像遮罩效果。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值