PC端css总结

ianutt

已于 2022-06-01 16:09:05 修改

阅读量181

点赞数

文章标签： css html5 html

于 2021-04-14 14:06:46 首次发布

本文链接：https://blog.csdn.net/ianutt/article/details/115697240

版权

HTMLCSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

页面变灰

body{filter: grayscale(1);}

html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;}

:after 伪元素

h2{ position:relative; text-align:center;}
h2:after {width:40px;height: 2px;display: block;content: "";background-color: #2FC1AC;margin-top: 20px; position: absolute; left: 50%; transform: translateX(-50%);}

在这里插入图片描述

三行截字

-webkit-line-clamp: 3;display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width:50px; overflow:hidden;

在这里插入图片描述

鼠标滑过图片一束光

<div> <a href="#" title="" target="_blank"> <img src="http://img13.360buyimg.com/da/jfs/t1987/25/1024816866/28066/1dcfdd6c/5640ba3dNcb10a336.jpg" width="330" height="475" > </a> </div>
<div> <a href="#" title="" target="_blank"> <img src="http://img13.360buyimg.com/da/jfs/t1987/25/1024816866/28066/1dcfdd6c/5640ba3dNcb10a336.jpg" width="330" height="475" > </a> </div>

div { position: relative; height: 450px; width: 330px; left: 150px; top: 0; overflow: hidden; }
div a { display: block; }
a:hover::before { left: 400px; transition: left 1s ease 0s; }
div a::before { content: ""; position: absolute; width: 80px; height: 450px; top: 0; left: -150px; overflow: hidden; background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%); background: -webkit-gradient(linear, left top, righttop, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%); background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%); -webkit-transform: skewX(-25deg); -moz-transform: skewX(-25deg); -o-transform: skewX(-25deg); }

鼠标滑过图片缩放效果

<a href="" target="_blank" class="fd"><img src="" alt="" width="340" height="230"></a>

.fd{ width:340px; height:230px; display:block; overflow:hidden;}
.fd img{width:340px; height:230px;transform: scale(1); transition: all 1s ease 0s; -webkit-transform: scale(1); -webkit-transform: all 1s ease 0s;}
.fd:hover img{transform: scale(1.1); transition: all 1s ease 0s; -webkit-transform: scale(1.1); -webkit-transform: all 1s ease 0s;}

鼠标滑过图片半透明效果

ul li:hover{width:300px; height:300px;filter: alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}

图片翻转显示文字效果

<ul class="artisanCon">
        <li>
            <div class="artisanConlist1">
                <a href=""><img src="images/logo.jpg" alt=""></a>
            </div>
            <div class="artisanConlist11"> <a href="">XXXX</a> </div>
        </li>
        <li>
            <div class="artisanConlist1">
                <a href=""><img src="images/logo.jpg" alt=""></a>
            </div>
            <div class="artisanConlist11"> <a href="">XXXX</a> </div>
        </li><li>
        <div class="artisanConlist1">
            <a href=""><img src="images/logo.jpg" alt=""></a>
        </div>
        <div class="artisanConlist11"> <a href="">XXXX</a> </div>
    </li><li>
        <div class="artisanConlist1">
            <a href=""><img src="images/logo.jpg" alt=""></a>
        </div>
        <div class="artisanConlist11"> <a href="">XXXX</a> </div>
    </li>
</ul>

.artisanCon{ overflow: hidden;padding: 1px;  margin-bottom: 10px; background:#fff; }
.artisanCon li{ float:left; position:relative; height:50px; width: 140px; border:1px solid #efefef;  margin: 0 0 -1px -1px; z-index: 0; }
.artisanCon li:hover{ border:1px solid #c5dbfd; z-index: 1;}
.artisanCon li div{ width: 138px; height: 48px; position: absolute; left: 0; bottom: 0; backface-visibility:hidden;/*背对元素隐藏*/ transition:all 1s; color:#fff; }
.artisanCon li div img{ width: 138px; height: 48px;}
.artisanCon li div a{ width: 100%; font-size:12px; line-height:48px;  overflow:hidden; display:block; font-style:normal; text-align: center; color: #04a2e8; margin: 0!important;}
.artisanCon li div a:hover{ color: #04a2e8;}
.artisanCon li .artisanConlist1{ background: #fff;}
.artisanCon li .artisanConlist11{ background: #fff; transform:rotateY(180deg);}
.artisanCon li:hover .artisanConlist1{ transform:rotateY(180deg);}
.artisanCon li:hover .artisanConlist11{ transform:rotateY(0deg);}

fixed相对于父级容器定位

<div class="container">
	<div class="rightfixed">返回顶部</div>
</div>
<style>
.containers {width: 1200px; margin: 0 auto;overflow: hidden;}
.rightfixed {width: 36px; height: 100px; background: url() no-repeat center; position: fixed;  top: 35%;margin-left: 1200px;text-align: center;}
</style>

鼠标滑过有灰色投影效果

ul li{ text-align:center; height:460px;  width:387px; float:left; -moz-box-shadow: 0px 4px 10px -2px #d7d7d7; -webkit-box-shadow:0px 4px 10px -2px #d7d7d7; box-shadow: 0px 4px 10px -2px #d7d7d7; -webkit-transition: -webkit-transform .3s;-moz-transition: transform .3s,-moz-transform .3s;transition: transform .3s;transition: transform .3s,-webkit-transform .3s,-moz-transform .3s}
ul li:hover{ -webkit-transform: translateY(-5px);-moz-transform: translateY(-5px);-ms-transform: translateY(-5px);transform: translateY(-5px);-moz-box-shadow: 0px 8px 12px -2px #d7d7d7; -webkit-box-shadow:0px 8px 12px -2px #d7d7d7; box-shadow: 0px 8px 12px -2px #d7d7d7; border-bottom:6px solid #0067FF;}

背景色渐变

div{
	background-image: -ms-linear-gradient(90deg,#fd514b,#ff9571);
	background-image: -moz-linear-gradient(90deg,#fd514b,#ff9571);
	background-image: -webkit-gradient(90deg,#fd514b,#ff9571);
	background-image: -webkit-linear-gradient(90deg,#fd514b,#ff9571);
	background-image: -o-linear-gradient(90deg,#fd514b,#ff9571);
	background-image: linear-gradient(90deg,#fd514b,#ff9571); }
}