快速了解
完整资料
资料已展开关于 CSS3奇思妙想
SS3 奇思妙想，使用 CSS3 在单个标签内实现各类图形。除去一些需要背景衬托的图形，本项目中所有图形均为单标签图形，即使用一个标签完成整个图案
CSS Secret
拜读了 《CSS Secret》 这本大作之后，有了这个项目的想法。其中带星号的图形为书中出现过的实例。
大量使用了 ::before 、::after 伪元素，transparent、border ，多重线性与径向渐变，多重内外阴影，实现了许多奇妙的图形。
很多例子参照了书中得来，也有许多我工作中实践积攒而来的。
css 折角效果/切角效果
css
复制代码
.heartShaped {
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%) rotate(45deg);
background: rgba(255, 20, 147, .85);
width: 140px;
line-height: 140px;
text-align: center;
color: white;
font-size: 12px;
}
.heartShaped:before,
.heartShaped:after
{
content: '';
position: absolute;
top: 0;
left: -70px;
width: 140px;
height: 140px;
border-radius: 50%;
background: rgb(255, 20, 147);
z-index: -1;
}
.heartShaped:after{
top: -70px;
left: 0;
}
css
复制代码
.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;
}
css
复制代码
.pie{
position: absolute;
top:50%;left: 50%;
transform:translate(-50%,-50%);
width: 200px;line-height:200px;
border-radius:50%;
text-align: center;
color: white;
font-size: 200%;
background-color:yellowgreen;
overflow:hidden;
background-image:
linear-gradient(to right, transparent 50%, #655 0);
cursor:pointer;
}
.pie:before{
content:"";
position:absolute;
top:0;left:50%;
width:50%;height:100%;
background-color: inherit;
transform-origin: left;
z-index:-1;
transform:rotate(.1turn);
}
.pie:hover:before{
transition:all 1s;
transform:rotate(.45turn);
}
纯 CSS 方案实现背景变暗效果（hover按钮触发）
css
复制代码
.spectiveBlur{
position: absolute;
top: 50%;left: 50%;
width: 220px;line-height:160px;
transform: translate(-50%, -50%);
border-radius:10px;
overflow:hidden;
background:#E91E63;
color:#fff;
font-size:200%;
text-align:center;
cursor:pointer;
transition: transform .2s;
}
.spectiveBlur:hover{
box-shadow:0 0 0 1920px rgba(0,0,0,.7);
transform: translate(-50%, -50%) scale(1.2);
}
利用滤镜hue-rotate实现
css
复制代码
.colorful-stripe {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -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;
-webkit-animation: colorfulStripeChange 5s infinite alternate linear;
animation: colorfulStripeChange 5s infinite alternate linear;
}
@-webkit-keyframes colorfulStripeChange {
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
@keyframes colorfulStripeChange {
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}适合的使用方向
CSS Secret
SS3 奇思妙想，使用 CSS3 在单个标签内实现各类图形
主要用途
SS3 奇思妙想，使用 CSS3 在单个标签内实现各类图形。除去一些需要背景衬托的图形，本项目中所有图形均为单标签图形，即使用一个标签完成整个图案
适用方向
适合编码、调试、测试、接口联调和工程效率提升等开发场景。
收录线索
CSS3动画CSS3奇思妙想CSS3实现图形模板 / 素材
资料说明
内容根据公开资料整理；版本、兼容性与服务状态请以官网最新说明为准。