跳至主要內容

常用CSS特效

白日梦想家yy...大约 6 分钟

常用CSS特效

公共样式

@charset "utf-8";  
/* CSS Document */  
/*CSS初始化*/  
body,h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dt,dd,form,input,hr,p,div,img,span{margin:0;padding:0;}  
a{  
   -moz-outline:none;  
   -webkit-outline:none;  
   -o-outline:none;  
   -ms-outline:none;  
   outline:none;  
   text-decoration:none;  
   }  
h1,h2,h3,h4,h5,h6,em{font-weight:normal; font-style: normal;}  
body{font:14px "微软雅黑"; color: #000; user-select:none;}  
input,textarea{background:none;outline:none;}  
ul,li,ol{list-style:none;}  
img,hr{border:none;}  
img{display:block; border: none;}  
.clearfix:after {  
   content: "";  
   display: block;  
   clear: both;  
   font-size: 0px;  
   height: 0px;  
   visibility: hidden;  
}

CSS绘制不规则图形

.triangle-up {  
  /* 三角形 */  
  width: 0;  
  height: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 100px solid rgb(0, 162, 255);  
}  
.triangle-down {  
  /* 倒三角 */  
  width: 0;  
  height: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-top: 100px solid rgb(0, 162, 255);  
}  
.triangle-left {  
  /* 左三角 */  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 50px solid transparent;  
  border-right: 100px solid rgb(0, 162, 255);  
}  
.triangle-right {  
  /* 右三角 */  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 50px solid transparent;  
  border-left: 100px solid rgb(0, 162, 255);  
}  
.triangle-topleft {  
  /* 左上三角 */  
  width: 0;  
  height: 0;  
  border-right: 100px solid transparent;  
  border-top: 100px solid rgb(0, 162, 255);  
}  
.triangle-topright {  
  /* 右上三角 */  
  width: 0;  
  height: 0;  
  border-left: 100px solid transparent;  
  border-top: 100px solid rgb(0, 162, 255);  
}  
.triangle-downleft {  
  /* 左下三角 */  
  width: 0;  
  height: 0;  
  border-right: 100px solid transparent;  
  border-bottom: 100px solid rgb(0, 162, 255);  
}  
.triangle-downright {  
  /* 右下三角 */  
  width: 0;  
  height: 0;  
  border-left: 100px solid transparent;  
  border-bottom: 100px solid #00a2ff;  
}  
  
/* 圆形 */  
.circular {  
  /* 圆形 */  
  width: 100px;  
  height: 100px;  
  background: #00a2ff;  
  border-radius: 50%;  
}  
.oval {  
  /* 椭圆 */  
  width: 200px;  
  height: 100px;  
  background: #00a2ff;  
  border-radius: 100px / 50px;  
}  
.sector {  
  /* 扇形 */  
  width: 0;  
  height: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-top: 100px solid #00a2ff;  
  border-radius: 50%;  
}  
.ring {  
  /* 圆环 */  
  width: 100px;  
  height: 100px;  
  border: 5px solid #00a2ff;  
  border-radius: 50%;  
}  
.crescent {  
  /* 月牙 */  
  width: 100px;  
  height: 100px;  
  border-radius: 50%;  
  box-shadow: 20px 20px 0 0 #3ea6e2;  
}  
.egg {  
  /* 鸡蛋 */  
  width: 70px;  
  height: 100px;  
  background: #3ea6e2;  
  border-radius: 60% 60% 60% 60% / 70% 70% 50% 50%;  
}  
/* 规则图形 */  
.square {  
  /* 正方形 */  
  width: 100px;  
  height: 100px;  
  background: #3ea6e2;  
}  
.rectangle {  
  /* 长方形 */  
  width: 200px;  
  height: 100px;  
  background: #3ea6e2;  
}  
.rhomb {  
  /* 菱形 */  
  width: 100px;  
  height: 100px;  
  background: #3ea6e2;  
  transform: rotate(45deg);  
}  
.parallelogram {  
  /* 平行四边形 */  
  width: 200px;  
  height: 100px;  
  background: #3ea6e2;  
  transform: skew(-20deg);  
}  
.trapezoid {  
  /* 梯形 */  
  width: 100px;  
  height: 0;  
  border-bottom: 100px solid #3ea6e2;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
}  
.trapezoid2 {  
  /* 梯形 */  
  width: 100px;  
  height: 0;  
  border-bottom: 100px solid #3ea6e2;  
  border-left: 0 solid transparent;  
  border-right: 50px solid transparent;  
}  
  
/* 多边形 */  
.pentagon {  
  /* 五边形：三角形和梯形的结合 */  
  width: 60px;  
  height: 0;  
  position: relative;  
  top: 30px;  
  border-top: 55px solid #3ea6e2;  
  border-left: 25px solid transparent;  
  border-right: 25px solid transparent;  
}  
.pentagon:before {  
  content: "";  
  position: absolute;  
  width: 0px;  
  height: 0;  
  border-left: 55px solid transparent;  
  border-right: 55px solid transparent;  
  border-bottom: 35px solid #9fc1d4;  
  left: -25px;  
  top: -90px;  
}  
.diamond {  
  /* 钻石：梯形和三角形组成 */  
  width: 50px;  
  height: 0;  
  position: relative;  
  border-bottom: 25px solid #3ea6e2;  
  border-left: 25px solid transparent;  
  border-right: 25px solid transparent;  
}  
.diamond:before {  
  content: "";  
  width: 0;  
  height: 0;  
  position: absolute;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-top: 70px solid #9fc1d4;  
  left: -25px;  
  top: 25px;  
}  
  
  
.hexagon {  
  /*六边形：在长方形上面和下面各放置一个三角形*/  
  width: 100px;  
  height: 55px;  
  background: #3ea6e2;  
  position: relative;  
  top: 20px;  
}  
.hexagon:before {  
  content: "";  
  width: 0;  
  height: 0;  
  position: absolute;  
  top: -25px;  
  left: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 25px solid #9fc1d4;  
}  
.hexagon:after {  
  content: "";  
  width: 0;  
  height: 0;  
  position: absolute;  
  bottom: -25px;  
  left: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-top: 25px solid #9fc1d4;  
}  
  
.octagon {  
  /* 八边形：长方形、上下各放置一个梯形 */  
  width: 100px;  
  height: 100px;  
  background: #3ea6e2;  
  position: relative;  
}  
.octagon:before {  
  content: "";  
  position: absolute;  
  width: 42px;  
  height: 0;  
  border-left: 29px solid #f2f2f2;  
  border-right: 29px solid #f2f2f2;  
  border-bottom: 30px solid #9fc1d4;  
  top: 0;  
  left: 0;  
}  
.octagon:after {  
  content: "";  
  position: absolute;  
  width: 42px;  
  height: 0;  
  border-left: 29px solid #f2f2f2;  
  border-right: 29px solid #f2f2f2;  
  border-top: 30px solid #9fc1d4;  
  bottom: 0;  
  left: 0;  
}  
  
/* 特殊形状系列 */  
.love {  
  /* 爱心 */  
  position: relative;  
  width: 140px;  
  height: 120px;  
  background: #00a2ff;  
}  
.love:before {  
  content: "";  
  width: 70px;  
  height: 110px;  
  background: #ec3f48;  
  position: absolute;  
  left: 50px;  
  border-top-left-radius: 50%;  
  border-top-right-radius: 50%;  
  transform: rotate(45deg);  
}  
.love:after {  
  content: "";  
  width: 70px;  
  height: 110px;  
  background: #d180b2;  
  position: absolute;  
  right: 50px;  
  border-top-left-radius: 50%;  
  border-top-right-radius: 50%;  
  transform: rotate(-45deg);  
}  
  
.infinity {  
  /* 无穷大 */  
  width: 190px;  
  height: 100px;  
  position: relative;  
}  
.infinity:before {  
  content: "";  
  width: 50px;  
  height: 50px;  
  position: absolute;  
  top: 0;  
  left: 0;  
  border: 20px solid #9fc1d4;  
  border-radius: 50px 50px 0 50px;  
  transform: rotate(-45deg);  
}  
.infinity:after {  
  content: "";  
  width: 50px;  
  height: 50px;  
  position: absolute;  
  top: 0;  
  right: 0;  
  border: 20px solid #3ea6e2;  
  border-radius: 50px 50px 50px 0;  
  transform: rotate(45deg);  
}  
  
.pacman {  
  /* 食人豆 */  
  width: 0;  
  height: 0;  
  border: 60px solid #3ea6e2;  
  border-right: 60px solid transparent;  
  border-radius: 100%;  
}  
  
.taichi {  
  /* 八卦：多个圆形组成 */  
  width: 100px;  
  height: 50px;  
  border-color: #000;  
  border-width: 2px 2px 50px 2px;  
  border-style: solid;  
  border-radius: 50%;  
  position: relative;  
}  
.taichi:before {  
  content: "";  
  position: absolute;  
  width: 12px;  
  height: 12px;  
  background: #fff;  
  border-radius: 50%;  
  top: 50%;  
  left: 0;  
  border: 19px solid #000;  
}  
.taichi:after {  
  content: "";  
  position: absolute;  
  width: 12px;  
  height: 12px;  
  background: #000;  
  border-radius: 50%;  
  top: 50%;  
  left: 50%;  
  border: 19px solid #fff;  
}  
  
.starFive {  
  /* 五角星： */  
  width: 0;  
  height: 0;  
  position: relative;  
  border-left: 80px solid transparent;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #3ea6e2;  
  transform: rotate(35deg);  
}  
.starFive:before {  
  content: "";  
  position: absolute;  
  width: 0;  
  height: 0;  
  border-left: 80px solid transparent;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #3ea6e2;  
  transform: rotate(-70deg);  
  top: 3px;  
  left: -80px;  
}  
.starFive:after {  
  content: "";  
  position: absolute;  
  width: 0;  
  height: 0;  
  border-bottom: 60px solid #9fc1d4;  
  border-right: 20px solid transparent;  
  border-left: 20px solid transparent;  
  transform: rotate(-35deg);  
  top: -40px;  
  left: -49px;  
}  
  
.starSix {  
  /* 六角形：两个三角形组成 */  
  width: 0;  
  height: 0;  
  position: relative;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 100px solid #3ea6e2;  
}  
.starSix:before {  
  content: "";  
  width: 0;  
  height: 0;  
  position: absolute;  
  top: 30px;  
  left: -50px;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-top: 100px solid #9fc1d4;  
}  
  
.starEight {  
  /* 八角星：两个正方形，旋转角度 */  
  width: 100px;  
  height: 100px;  
  background: #3ea6e2;  
  position: relative;  
}  
.starEight:before {  
  content: "";  
  width: 100px;  
  height: 100px;  
  background: #9fc1d4;  
  position: absolute;  
  top: 0;  
  left: 0;  
  transform: rotate(45deg);  
}  
  
.starTwelve {  
  /* 十二角星：三个正方形，旋转角度 */  
  width: 100px;  
  height: 100px;  
  background: #3ea6e2;  
  position: relative;  
}  
.starTwelve:before {  
  content: "";  
  width: 100px;  
  height: 100px;  
  background: #9fc1d4;  
  position: absolute;  
  top: 0;  
  left: 0;  
  transform: rotate(-30deg)  
}  
.starTwelve:after {  
  content: "";  
  width: 100px;  
  height: 100px;  
  background: #5fc1d4;  
  position: absolute;  
  top: 0;  
  left: 0;  
  transform: rotate(30deg)  
}  
  
/* 常见需求 */  
.alertDialog {  
  /* 对话框：一个圆角矩形和一个小三角形 */  
  width: 150px;  
  height: 100px;  
  background: #3ea6e2;  
  border-radius: 10px;  
  position: relative;  
}  
.alertDialog:before {  
  content: "";  
  width: 0;  
  height: 0;  
  position: absolute;  
  left: -20px;  
  top: 40px;  
  border-top: 10px solid transparent;  
  border-bottom: 10px solid transparent;  
  border-right: 20px solid #9fc1d4;      
}

兼容前缀

body{
	-moz-     /* 火狐等使用Mozilla浏览器引擎的浏览器 */
	-webkit-  /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
	-o-       /* Opera浏览器(早期) */
	-ms-      /* Internet Explorer (不一定) */ 
}

css动画语法

  • CSS动画时间延迟transition: all 1.5s;
  • CSS图片放大transform: scale(1.3);
  • CSS动画时间transition: all 0.4s;

CSS渐变写法

body{
	background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
    background-color: rgba(0, 0, 0, 0);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    background-image: linear-gradient(to right, rgb(99, 114, 255) 0%, rgb(92, 169, 251) 100%);
    background-size: auto auto;
    background-origin: padding-box;
    background-clip: border-box;
}

CSS背景图固定

body{
	background-attachment:fixed;
}

a标签无法点击语法

body{
	pointer-events: none;
}

文字下划线动画

文字行元素生效，或者里面嵌套a标签

body{
	background-image: linear-gradient(180deg,transparent 65%,#fcf113 0);
    background-size: 0 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    -webkit-transition: background-size .4s ease;
    -moz-transition: background-size .4s ease;
    -ms-transition: background-size .4s ease;
    -o-transition: background-size .4s ease;
    transition: background-size .4s ease;
}

body:hover{
	background-size: 100% 100%;
}

渐变遮罩层

body{
	background: linear-gradient(180deg, rgba(86, 97, 108, 0) 0%, rgba(33, 52, 69, 0.7) 100%);
}

文字渐变光泽循环动画

masked-animation必须要和下面循环动画的名称一致

body{
	background-image: -webkit-linear-gradient(left, #fb2db9, #2228de 25%, #fb2db9 50%, #2228de 75%, #fb2db9);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 4s infinite linear;
}

@-webkit-keyframes masked-animation {
         0%{ background-position: 0 0;}
         100% { background-position: -100% 0;}
}
上次编辑于:
贡献者: mygit
Copyright © 2025 白日梦想家yy