计算机教程

当前位置:3522.com > 计算机教程 > CSS33522.com 特效分解一

CSS33522.com 特效分解一

来源:http://www.4sports-uk.com 作者:3522.com 时间:2019-07-07 03:19

      先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的。整理出的笔记,分享给大家。因为源码是好,但是一头扎进去半天出不来。

基本选择器

      首先看个登陆框,如下,相信不少朋友见到过。

层次选择器

F E
F>E
F E 下一个兄弟元素
F3522.com,~E 下面全部兄弟元素

      这个上面有很多css3特效。边框阴影,内置斜纹的字体,login 下的横线等,我来一一分解。

伪类选择器

      3522.com 1

动态伪类选择器

/link a标签的默认状态/
a:link{
background: red;
}
/a标签访问之后的状态/
a:visited{
background: green;
}
a:hover{
background: black;
}

/鼠标在a标签按下时状态/
a:active{
background: yellow;
}

/元素获取焦点时状态/
/input:focus{
background: black;
}
/
爱恨原则( LoVe/HAte)

     1.内外阴影画法:

目标伪类选择器

:target

结构伪选择器

E:first-child
E:last-child
E:only-child 只有一个子元素
E:empty 没有子元素
E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:fist-of-type
E:last-of-type
n的含义

odd(奇数) even(偶数)

:checked
自定义单选复选框选中后的状态
必须加上-webkit-appearance:none;才有效果

否定伪类选择器

E:not(F)
伪元素

::first-letter 第一个字
::first-line第一行
::selection改变选中后的背景色
::fefore
::after
属性选择器

E[attr=value]
E[attr|=value]

且该属性的值为“value”,或者该属性的值以“value-“(”-“为连字符)开头的元素

E[attr~=value] 且该属性的值是一个以空格作为分隔的值列表,其中一个值为"value"的元素
E[attr*=value] 含有value的全部
E[attr^=value]第一个含有value的全部
E[attr$=value]最后一个含有value的全部

     大家熟知box-shadow,这个比较简单。box-shadow最多有个参数,分别是x投影,y投影,模糊半径,扩展半径,颜色,inset。inset决定了是内阴影还是外阴影。

盒模型

     PS:x为0,或者y为0 三边有阴影。x和y都为0 四边都有阴影。 内外阴影可以叠加。这样,第三幅图明显旧有质感了些,上图就好像有了厚度一样的感觉。

resize (缩放属性)

resize: none;
resize: both; /* 可以修改高度和宽度 /
resize: horizontal; /
只能修改高度 /
resize: vertical; /
只能修改宽度 */
必须加overflow属性

     3522.com 2 3522.com 33522.com 4

outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset]

与border对比:

outline不占用网页布局空间
outline四边的都是一样的,不能像border一样单独设置
border设置的边框只能向外扩展,outline可以通过设置outline-offset向内部创建轮廓

 .test1 {box-shadow: 0px 10px 10px gray;width: 200px;height: 200px;margin-left: 50px; background-color: #e0ffff}
 .test2 { box-shadow: 0px 0px 10px gray;width: 200px;height: 200px;margin-left: 50px; background-color: #e0ffff}   .test3 { box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7)  ,0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;width: 200px;height: 200px;margin-left: 50px; background-color:white}

-webkit-box-reflect(倒影)

只有webkit支持

三个参数:

direction 方向 above|below|left|right;上下左右
距离
渐变(可选)

 2.两端渐变线条

box-shadow

box-shadow是向盒子添加阴影。支持添加一个或者多个。

box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow属性至多有6个参数设置

inset: 阴影类型, 可选参数, 如果不设值,其默认的投影方式是外阴影;如果取其唯一值inset,就是将外阴影变成内阴影
x-offset: 阴影水平偏移量, 如果为正值, 阴影向左偏移, 如果为负值, 阴影向右偏移
y-offset: 阴影垂直偏移量, 如果为正值, 阴影向下偏移, 如果为负值,阴影向上偏移
blur-radius: 模糊半径, 可选参数, 只能为正值, 数值越大, 模糊效果越明显
spread-radius: 扩展半径, 可选参数, 如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小
color: 阴影颜色

    3522.com 5

多重阴影

box-shadow: 0 0 0 1px red,
0 0 0 5px blue,
0 0 0 8px green,
0 0 0 12px yellow,
0 0 0 16px orange,
0 0 0 20px #06c,
0 0 5px 24px lime;/每个阴影用逗号隔开, 最先定义的显示在最上面/

  渐变线,当然用的是线性渐变再加伪元素。 这里用before和after一样。 content是不能少的,不然就看不见了。 伪元素的定位最好和父级元素形成relative和absolute的关系。

单边阴影

方法: 先设置模糊半径, 设置扩展半径为负数, 缩小阴影大小, 直到看不到阴影, 然后将阴影向上移动.

 .test {  width: 800px;height: 50px;margin-left: 50px;background-color: #e0ffff;position: relative; }  
  .test:before{      content: ' '; width: 100%;height: 2px; position: absolute;  bottom: -20px;      background: -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);       background: -o-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);  }

实心上半圆

方法: 把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致.
div{
height:50px;/是width的一半/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/半径至少设置为height的值/
}

线性渐变可以有多个参数,头个left 表示渐变是从左往右,也可以是top。还可以换成角度。然后每个颜色的百分比。 rgba写着麻烦,可以用#XXXX 但是前者便于条透明度。

四分之一圆

div{
height:100px;/与width相同/
width:100px;
background:#9da;
border-radius:100px 0 0 0;/半径至少设置为height的值/
}

再来个炫一点的:

text-overflow

text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。
以下3个都要加上
white-space:nowrap; /强制文本在一行内显示/
text-overflow:ellipsis;省略标记
overflow: hidden; /溢出内容为隐藏/

3522.com 6

text-shadow

文字阴影
text-shadow: x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)
和box-shdow很像

 

字体

@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}

body{
font-family: 字体名称;
}

.ctitle{ text-align: left;font-weight: bold;font-size: 2em;margin-left: 10%;margin-right: 10%; margin-top:40px;}  .ctitle:after{      content: ' ';      display: block;      width: 100%;      height: 5px;      margin-top: 10px;      background: -webkit-linear-gradient(left,#7fffd4 0%, #ee82ee 20%, rgba(147, 184, 189, 0) 100%);  } 

背景(background)

在CSS3之前我们对背景图片的控制极为有限,只能决定其来源、位置、重复,CSS3开辟了一篇新天地

背景的基本属性

background-color 背景颜色
background-image 背景图片
background-repeat 背景图片的展示方式
background-attachment 背景图片是固定还是滚动
backround-position 背景图片位置

background-position位置:

background-postion:x y;
x:{容器(container)的宽度—背景图片的宽度}x百分比,超出的部分隐藏。
y:{容器(container)的高度—背景图片的高度}
y百分比,超出的部分隐藏。

background-size(背景图片大小)

background-size: 长度值 | 百分比 | cover | contain
百分比是相对于元素的百分比

cover 缩放背景图片以完全覆盖背景区,可能背景图片部分看不见

contain 缩放背景图片以完全装入背景区,可能背景区部分空白。

background-origin(背景图片相对什么位置来定位)

这个属性要和background-position结合来看,

backgound-origin设置background-position的参考坐标

background-origin: border-box | padding-box | content-box;
border-box: 根据边框盒来定位
padding-box: 根据内边界盒来定位
content-box:  根据内容框来定位

background-clip(可以理解成背景的大小)

这个属性用了裁剪背景的大小

background-clip: border-box | padding-box | content-box | text;
同上

简写

background: [background-color] || [background-image] ||
[background-repeat] || [background-attachment] ||
[background-position] / [ background-size] ||
[background-origin] || [background-clip];
多背景图片

可以为同一背景添加多张背景图片, 这种写法不支持加颜色和background-clip

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
url("haorooms.jpg") 400px 201px no-repeat;

3.斜纹背景和字体:

gradient(渐变)

生成渐变颜色的背景图片

CSS3渐变分为linear-gradient(线性渐变)和radial-gradient(径向渐变)

  3522.com 7

linear-gradient(线性渐变)

在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴

用法

background-image: linear-gradient(方向, 颜色, 颜色,..)
第一个参数为渐变的方向, 取值为角度(如45deg)或方向关键字(top, bottom等)
0deg == top 顺时针

第二个参数开始是一个颜色列表, 表示起始点到结束点之间渐变颜色;每个颜色可以加入百分比表示颜色开始位置
background: linear-gradient(45deg, #D38312 10%,#A83279 90%);前10%为一个颜色,到90%变为另一个颜色

  像上面这种斜纹,还是借助于线性渐变,而且是带有角度的。

radial-gradient(径向渐变)

CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合。

用法

radial-gradient: (形状 大小 at 位置, 颜色, 颜色,...);
形状: 定义渐变的形状,可选参数, 取值为circle(圆)或ellipse(椭圆),如果不设置则根据元素的形状来确定
大小: 定义渐变的大小,可选值,默认为径向渐变的半径长度为从圆心到离圆心最远的边
如果渐变形状为圆形, 取值为长度值(如,50px, 10em),此值不不能负值。
如果渐变形状为椭圆, 取值为两个值, 第一个值代表椭圆的水平半径,第二个值代表垂直半径。这两个值除了使用长度值定义大小之外还可以使用来定义这两半径大小。使用定义值是相对于径向渐变容器的尺寸。同样不能为负值。
也可以是关键字(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)); 注意firefox目前只支持关键字
位置: 定义径向渐变的圆心位置,用于确定元素渐变的中心位置。可选参数, 默认为元素中心,也是用两个值表示,第一个代表横坐标, 第二个代表纵坐标,取值可以是 长度值,百分比,或方向关键字(top, bottom, right, left). 注意加上at关键字
颜色列表: 用法和线性渐变一样
background-image: radial-gradient(25% 25%, red, blue);/* 用百分比指定椭圆的大小 /
background-image: radial-gradient(circle 50px at center top, red, blue);/
指定圆心的位置 */

  但是我发现,那个Login 的背景就是斜纹。

放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .imgbox{
            position: relative;
            width: 720px;
            height: 450px;
            float: left;
        }
        .filter{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
            display: none;
            background: url(54faea348b520dda60b56cbed9a4a4a8.jpg) no-repeat;
        }
        .mask{
            position: absolute;
            left: 0;
            right:0;
            bottom: 0;
            top: 0;
            background: rgba(0,0,0,0.5);
            z-index: 98;
            display: none;
        }
        .bigimg{
            width: 600px;
            height: 600px;(放大三倍)
            border:1px solid black;
            float: left;
            background: url(54faea348b520dda60b56cbed9a4a4a8.jpg) no-repeat;
            display: none;
        }
    </style>
</head>
<body>
    <div class="imgbox">
        ![](54faea348b520dda60b56cbed9a4a4a8.jpg)
        <div class="filter"></div>
        <div class="mask"></div>
    </div>
    <div class="bigimg"></div>
    <script>
        var imgbox=document.querySelector('.imgbox');
        var filter=document.querySelector('.filter');
        var bigimg=document.querySelector('.bigimg');
        var mask=document.querySelector('.mask');

        var imgh=imgbox.clientHeight;
        var imgw=imgbox.clientWidth;

        bigimg.style.backgroundSize = imgw*3 'px '   imgh*3 'px';(放大三倍)

        function onmousemove(ev){
            var clientx=ev.clientX;
                var clienty=ev.clientY;
                var x=clientx-100;
                var y=clienty-100;
                if(x<0){
                    x=0;
                }
                if(x>imgw-200){
                    x=imgw-200;
                }
                if(y<0){
                    y=0;
                }
                if(y>imgh-200){
                    y=imgh-200;
                }
                filter.style.top=y 'px';
                filter.style.left=x 'px';

                bigimg.style.backgroundPosition= (-x*3) 'px '   (-y*3) 'px';(放大三倍)
                filter.style.backgroundPosition= -x 'px '    -y 'px';
        }

        function onmouseleave(){
            filter.style.display='none';
            bigimg.style.display='none';
            mask.style.display='none';
            imgbox.removeEventListener('mousemove',onmousemove);
            imgbox.removeEventListener('mouseleave',onmouseleave);
        }

        imgbox.addEventListener('mouseenter',function(){
            filter.style.display='block';
            bigimg.style.display='block';
            mask.style.display='block';
            imgbox.addEventListener('mousemove',onmousemove);
            imgbox.addEventListener('mouseleave',onmouseleave);
        });
    </script>
</body>
</html>

本文由3522.com发布于计算机教程,转载请注明出处:CSS33522.com 特效分解一

关键词: 3522.com

上一篇:bootstrap angularjs seajs构建Web Form前端2

下一篇:没有了