3

前端常用的CSS代码块（一）

 2 years ago
source link: https://blog.51cto.com/u_15682900/5398690
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

前端常用的CSS代码块（一）

原创

用html+css可以很方便的进行网页的排版布局，但不是每一种属性或者代码都会记得。下面分享一些常用的代码块。

前端常用的CSS代码块（一）_css

1、垂直居中对齐

.vc {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.vc {
   position:absolute;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   margin:-50px 0 -50px;
}



2、全屏显示



html, 
body {
    position: fixed;
    width: 100%;
    height: 100%;
}
div {
    height: 100%;
}



3.背景渐变动画



bg {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}    
bg:hover {
    background-position: 0 0;
}



4.长文本自动换行



pre {
    white-space: pre-line;
    word-wrap: break-word;
}



5.模糊文本



.text {
   filter: blur(1px);
}



6.用CSS实现省略号动画



.point:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026";
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}



7.清除浮动



.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



8.CSS元素透明



.transparent {
    filter: alpha(opacity=50); 
    -khtml-opacity: 0.5; 
    -moz-opacity: 0.5;   
    opacity: 0.5;     
}



9.个性圆角



.borderRadius {
    border-radius: 4px 3px 6px 10px;
}
.borderRadius {
    border-top-left-radius: 4px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 10px;
}



10.通用媒体查询



@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}
@media only screen and (min-width : 321px) {
  /* Styles */
}
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}
/* 桌面 */
@media only screen and (min-width : 1224px) {
  /* Styles */
}

@media only screen and (min-width : 1824px) {
  /* Styles */
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK