移动应用图标设计 - App Icon PicLab

相机、图片、拍照类App的图标

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1700
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    height: 100%;
    background: #ff4081;
    position: relative;
}
.icon-larger {
    width: 440px;
    height: 440px;
    border-radius: 76px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    -ms-transform: translate(-50%, -50%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5);
}
.icon-piclab {
    background: -webkit-linear-gradient(left, transparent, transparent 164px, #28d4fc 164px, #28d4fc 220px, #fc7462 220px, #fc7462 276px, transparent 276px), -webkit-linear-gradient(top, #fff, #f4f4f4);
    background: linear-gradient(to right, transparent, transparent 164px, #28d4fc 164px, #28d4fc 220px, #fc7462 220px, #fc7462 276px, transparent 276px), linear-gradient(to bottom, #fff, #f4f4f4);
}
.icon-piclab:before,
.icon-piclab:after {
    content: "";
    display: block;
    position: absolute;
}
.icon-piclab:before {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: -webkit-linear-gradient(top, #e0e0e0, #fefefe);
    background: linear-gradient(to bottom, #e0e0e0, #fefefe);
    box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50px;
    left: 50px;
}
.icon-piclab:after {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fcb8ae;
    box-shadow: inset -9px -9px 0 10px #f36855;
    position: absolute;
    top: 57px;
    left: 57px;
}
.ring0 {
    width: 276px;
    height: 276px;
    border-radius: 50%;
    background: -webkit-linear-gradient(top, #fff, #ececec);
    background: linear-gradient(to bottom, #fff, #ececec);
    box-shadow: 0 18px 0 0 rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.ring0:before,
.ring0:after {
    content: "";
    display: block;
    position: absolute;
}
.ring0:before {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: -webkit-linear-gradient(top, #cdcdcd, #fefefe);
    background: linear-gradient(to bottom, #cdcdcd, #fefefe);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.ring0:after {
    width: 182px;
    height: 182px;
    border-radius: 50%;
    background: -webkit-linear-gradient(top, #3e3e3e, #d9d9d9);
    background: linear-gradient(to bottom, #3e3e3e, #d9d9d9);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.ring1 {
    width: 172px;
    height: 172px;
    /*radial-gradient(circle at center center,
    transparent,transparent 50px,
    rgba(0,0,0,.2) 50px,rgba(0,0,0,.2) 57px,
    rgba(0,0,0,.4) 57px, rgba(0,0,0,.4) 58px,
    rgba(0,0,0,.2) 58px,rgba(0,0,0,.3) 66px,
     rgba(0,0,0,.4) 66px, rgba(0,0,0,.4) 67px,
    transparent 67px,  transparent 75px,
     rgba(0,0,0,.3) 75px, rgba(0,0,0,.3) 76px,
    transparent 76px),*/
    
    border-radius: 50%;
    background: -webkit-linear-gradient(345deg, #fe4a32, #32bdff 120px);
    background: linear-gradient(105deg, #fe4a32, #32bdff 120px);
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.ring1:before,
.ring1:after {
    content: "";
    display: block;
    position: absolute;
}
.ring1:before {
    width: 134px;
    height: 134px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.ring1:after {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.ring2 {
    width: 152px;
    height: 152px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
}
.ring2:before,
.ring2:after {
    content: "";
    display: block;
    position: absolute;
}
.ring2:before {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-transform: skew(20deg, 20deg) rotate(10deg);
    -ms-transform: skew(20deg, 20deg) rotate(10deg);
    transform: skew(20deg, 20deg) rotate(10deg);
    position: absolute;
    top: -40px;
    left: -30px;
}
.ring2:after {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-transform: rotate(50deg) skew(-25deg, -25deg);
    -ms-transform: rotate(50deg) skew(-25deg, -25deg);
    transform: rotate(50deg) skew(-25deg, -25deg);
    position: absolute;
    top: 40px;
    left: -40px;
}
.ring3 {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6);
    background: -webkit-radial-gradient(center center, circle, #042636, #021017 20px, #073d55 20px, #033043 33px, #02202d 33px, #02202d 34px, #022636 34px, #021c28 40px, #022c3f 40px, #022c3f 41px, #02161e 41px);
    background: radial-gradient(circle at center center, #042636, #021017 20px, #073d55 20px, #033043 33px, #02202d 33px, #02202d 34px, #022636 34px, #021c28 40px, #022c3f 40px, #022c3f 41px, #02161e 41px);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.ring3:before,
.ring3:after {
    content: "";
    display: block;
    position: absolute;
}
.ring4 {
    width: 172px;
    height: 172px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.ring4:before,
.ring4:after {
    content: "";
    display: block;
    position: absolute;
}
.ring4:before {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.4);
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: skew(19deg, 19deg);
    -ms-transform: skew(19deg, 19deg);
    transform: skew(19deg, 19deg);
}
.ring4:after {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.4);
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: skew(33deg, 33deg);
    -ms-transform: skew(33deg, 33deg);
    transform: skew(33deg, 33deg);
}

HTML

相机、图片、拍照类App的图标

编辑器支持Emmet

快捷键

相机、图片、拍照类App的图标

Web Animation API开发实例 - 涟漪动效

HTML5 + GSAP + Founation.css构建响应式博客文章列表页面布局模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：