If the foundation is not good, it is recommended to learn first

CSS Introduction Notes (1)

Juejin. Cn/post / 684490…

15 CSS3 selector

Structure selector

:nth-child(n) Set from 1 :nth-child(2n) Set from 0 for even elements: nth-Child (2n+1) Odd elements :nth-of-type(n) Number of children of the same type of an element :first-child -> nth-child(1) :first-of-type->nth-of-type(1) :last-child :last-of-type :only one child element :only one child element of the same type :empty satisfies the condition

Negative selector

:not()

Property selector

E [attr = val] [attr E | = val] can only be equal to the val or can only begin with val – E [attr * = val] contains val string E [attr ~ = val] have more than one attribute values, One of these is val E[attr^=val] starts with val E[attr$=val] ends with val

Target pseudoclass selector

:target Matches the target element pointed to by the URL. The style effect takes effect only if the URL points to the matched element

Pseudo elements

:first-line matches the first line of text :first-letter matches the first character :before and after Insert extra content before and after the DOM element

16 the rounded border – the radius

Border-radius :1-4 digits /1-4 digits

  • Horizontal half-price in front, vertical radius in back
  • The directions of the four numbers are upper left, right, upper right, lower left, lower left
  • Without a “/”, the horizontal radius is the same as the vertical radius
    • border-radius:10px/5px
    • border-radius:60px 40px 30px 20px/30px 20px 10px 5
  • Example: circle ellipse semicircle fan

17 Linear gradient

linear-gradient

  • Linear – gradient ([< start > | | > < Angle,]? < point >,< point >…)
  • Only in the background
  • The color changes along a straight line
  • parameter
    • Starting point: In what direction does the gradient start
      • Left, top, left top
    • Angle: The Angle of the book titles begins to gradient
      • XXX DEG form
    • Dot: The color and position of the gradient dot
      • Red 50%, location optional
  • Repeated linear gradient

18 Radial gradient

background: radial-gradient(shape size at position, start-color, … , last-color);

shape Determine the type of circle:

– Ellipse (default): Specifies the radial gradient of the ellipse.

– circle: specifies the radial gradient of a circle
size Define the size of the gradient, possible values:

– apaps-corner (default) : Specifies the radius of the radial gradient as the Angle from the center to the farthest from the center of the circle

– Closest side: Specifies the length of the radial gradient radius from the center to the closest side of the circle

– Closest -corner: Specifies the radius of the radial gradient as the Angle closest to the center

– apapel-side: specifies that the radius of the radial gradient is from the center of the circle to the farthest side from the center
position Define the position of the gradient. Possible values:

– center(Default) : Sets the ordinate value of the radial gradient center.

– top: Sets the top to the vertical value of the radial gradient center.

– bottom: Sets the bottom as the vertical value of the radial gradient center.
start-color, … , last-color Used to specify the start and end colors of the gradient. 

      
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6-12.0 */
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6-15 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax (must come last) */
}
</style>
</head>
<body>

<h3>Radial gradient - color nodes are not evenly distributed</h3>
<div id="grad1"></div>

<p><strong>Note:</strong>Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>
Copy the code

19 the shadow

Shadow box

box-shadow

h v blur spread color inset

  • H: offset in horizontal direction
  • V: offset in vertical direction
  • Blur: Indicates the blur radius
  • Spread the radius
  • Color: color
  • Inset: Add this to indicate that the inner shadow is the outer shadow by default

Text shadow

text-shadow

x y blur color

  • X-axis offset Y-axis offset ambiguity color
  • Multilayer shadows create text stereoscopic effects, set multiple colors, separated by commas

Add border to text text-stroke:2px blue

  • Make your text smooth by setting a transparent border of 1px
  • Make the color transparent to create a cutout font

20 filter

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Note: Filters usually use percentages (e.g. 75%), but can also be expressed as decimals (e.g. 0.75).

Filter describe
none Default value, no effect.
blur(px) Set the image to gaussian blur. Radius “sets the standard deviation of the Gaussian function, or how many pixels are fused together on the screen, so larger values are more blurry;



If no value is set, the default is 0; This parameter sets CSS length values, but does not accept percentage values.
brightness(%) Apply a linear multiplication to the image to make it appear brighter or darker. If the value is 0%, the image will be completely black. If the value is 100%, the image does not change. Other values correspond to linear multiplier effects. A value of more than 100% is ok, and the image will be brighter than before. If no value is set, the default is 1.
contrast(%) Adjust the contrast of the image. If it’s 0 percent, it’s going to go completely black. The value is 100%. The graph stays the same. Values can exceed 100%, meaning lower comparisons will be applied. If no value is set, the default value is 1.
drop-shadow(h-shadow v-shadow blur spread color) Set a shadow effect on the image. A shadow is an offset version of a mask that can be drawn in a particular color and can have a degree of blurring underneath the image. Functions accept values of type (defined in CSS3 context), except that the “inset” keyword is not allowed. This function is similar to the existing box-shadow box-shadow property; The difference is that with filters, some browsers offer hardware acceleration for better performance.< shadow > parameter as follows: ` ` * * < offset - > x < offset - > y * * * * * * (must) this is the two set the shadow offset < length >. < > offset - x * * * * set the horizontal distance. Negative values cause the shadow to appear to the left of the element. **<offset-y>** Sets the vertical distance. A negative value causes the shadow to appear above the element. Check the possible units of **<length>**.<br />** If both values are 0**, the shadow appears right after the element (if set)And /or ‘, will have blurred effect).““(Optional) This is the third code> value. The larger the value, the more obscure the shadow will become larger and lighter. Negative values are not allowed. If not set, the default is 0 (the edge of the shadow is very sharp).This is the fourth value. A positive value causes the shadow to expand and grow, while a negative value causes the shadow to shrink. If not set, the default is 0 (the shadow is the same size as the element).

Note: Webkit, as well as some other browsers, do not support the fourth length and will not render if it is added.(Optional) View possible keywords and tags for the value. If not specified, the color value is browser – based. In Gecko (Firefox), Presto (Opera), and Trident (Internet Explorer), color is appliedcolorProperty value. In addition, WebKit shadows are transparent if the color value is omitted. ` ` ` ` ` ` `
grayscale(%) Convert the image to grayscale image. Value defines the scale of the conversion. If the value is 100%, the image will be converted to gray scale completely, and if the value is 0%, the image will have no change. Values between 0% and 100% are linear multipliers of the effect. If this parameter is not set, the default value is 0.
hue-rotate(deg) Apply hue rotation to the image. Angle “sets the color ring Angle at which the image will be adjusted. If the value is 0deg, the image has no change. If the value is not set, the default value is 0deg. While there is no maximum value, anything above 360deg is like going around again.
invert(%) Invert the input image. Value defines the scale of the conversion. 100% value is completely reversed. If the value is 0%, the image has no change. Values between 0% and 100% are linear multipliers of the effect. If the value is not set, the default value is 0.
opacity(%) Convert the transparency of the image. Value defines the scale of the conversion. A value of 0% indicates complete transparency, while a value of 100% indicates no change in the image. Values between 0% and 100% are linear multipliers of the effect and are also equivalent to image samples multiplied by number. If the value is not set, the default value is 1. This function is similar to the existing opacity property, except that some browsers provide hardware acceleration through filter to improve performance.
saturate(%) Convert image saturation. Value defines the scale of the conversion. A value of 0% indicates complete unsaturated, while a value of 100% indicates no change in the image. The other values are linear multipliers of the effect. Values above 100% are allowed and have higher saturation. If the value is not set, the default value is 1.
sepia(%) Convert the image to dark brown. Value defines the scale of the conversion. A value of 100% is completely dark brown and a value of 0% has no change in the image. Values between 0% and 100% are linear multipliers of the effect. If this parameter is not set, the default value is 0.
url() The URL function takes an XML file that sets an SVG filter and can contain an anchor to specify a specific filter element.

Example: filter: url(svG-url #element-id)
initial Set properties to default values
inherit Inherits the attribute from the parent element

21 mask

Mask is similar to background, and the values of mask are like this

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
Copy the code

      
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
    .mask{
        width:475px;
        height:260px;
        background-image:url("http://img.blog.csdn.net/20170701221659356");

        /* The value is the image path */
        -webkit-mask-image:url("http://img.blog.csdn.net/20170701221732018");
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>
Copy the code

22 Transition animation

Transition-property Excessive attribute all[attr] transition-Dunration Excessive time transition-delay Delay time transition-timing-function Indicates the movement type

  • Ease :(gradually slowing down) the default value
  • Linear: (uniform)
  • Ease – in: (acceleration)
  • Ease – out: (slow)
  • Ease-in-out :(speeding up and then slowing down)
  • Cubic bezier Curve (X1,y1, X2,y2) 

      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <! --[if It IE 9]><script src="html5.min.js"></script><! [endif]-->
    <style>
    #div{
        width: 100px;
        height:100px;
        background: red;
        transition:width 1s 1s;
        /* Delay of one second */
    }
    #div:hover{
        width: 300px;
        transition:width 1s 1s; 
        /* Delay of one second */
    }
    </style>
</head>
<body>
    <div id="div"></div>
</body>
</html>
Copy the code

Project case


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <! --[if It IE 9]><script src="html5.min.js"></script><! [endif]-->
    <style>
        /* Transition animation thinking steps 1. Find the transition properties 2. Find the transition properties start and end values 3. Add the transition property box shadow to the appropriate position 30px transparent end value 0 White */
        body{
            background:#2192bc;
        }
        .box{
            width: 100px;
            height: 100px;
            background: #2c9dc4 url("./1991841492744344.jpg") no-repeat center center;
            border-radius: 50%;
            margin: 100px auto;
            box-shadow: 0 0 0 30px transparent;
            -o-transition: box-shadow 1s;
            -ms-transition: box-shadow 1s;
            -moz-transition: box-shadow 1s;
            -webkit-transition: box-shadow 1s;
            transition: box-shadow 1s;
        }
        .box:hover{
            box-shadow: 0 0 0 0 rgba,0.5 (255255255); }</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
Copy the code

23 transform 2D transform

Rotate () Rotates the function

  • Deg degree
  • Transform-origin Specifies the base point of rotation

Skew () is a skew function

  • skewX()
  • skewY()

The default value for the scale() function is 1

  • scaleX()
  • scaleY()

Translate () The displacement function

  • translateX()
  • translateY()

      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <! --[if It IE 9]><script src="html5.min.js"></script><! [endif]-->
    <style>
       #div1{
           width: 200px;
           height: 300px;
           border: 1px solid red;
       }
       
       #div1 img{
           width:100%;
           height: 100%;
           transition: all 1s;
       }

       #div1:hover img{
           transform: skew(-15deg,15deg);
       }
    </style>
</head>
<body>
    <div id="div1">
        <img src="./1991841492744344.jpg" alt="" srcset="">
    </div>

</body>
</html>
Copy the code

24 Animation frame

The key frame –

Similar to flash defining the style of animation at each stage, that is, frame animation

Time unit of a key frame

  • Numbers: 0%, 25%, 100%, etc. (Set the style of any point in time within a period of time)
  • Characters :form(0%), to(100%);

format

@keyframes Animation name {animation state}Copy the code

      
<html>
<head>
<style> 
div
{
  width:100px;
  height:100px;
  background:red;
  animation:myfirst 5s;
  -moz-animation:myfirst 5s; /* Firefox */
  -webkit-animation:myfirst 5s; /* Safari and Chrome */
  -o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
	from {background:red; }to {background:yellow; @ -}}moz-keyframes myfirst /* Firefox */
{
	from {background:red; }to {background:yellow; @ -}}webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red; }to {background:yellow; @ -}}o-keyframes myfirst /* Opera */
{
	from {background:red; }to {background:yellow;}
}
</style>
</head>
<body>

<div></div>

<p><b>Note:</b>This example is not valid in Internet Explorer.</p>

</body>
</html>

Copy the code

format

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green; @ -}}moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green; @ -}}webkit-keyframesMyfirst /* Safari and Chrome */ {0% {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green; @ -}}o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
Copy the code

25 the transform3d deformation

The difference between 1.3D and 2D is that there is an extra Z-axis. 2D has some translation effects, while 3D can rotate it by 2 axis. Here's an explanation for the left hand rule: Stretch out your left hand so that the thumb and forefinger form an "L" shape, with the thumb pointing to the right, the forefinger pointing up, and the middle finger pointing forward. This creates a left - handed coordinate system, with the thumb, index and middle fingers representing the positive X, Y and Z axes respectively. The following figureCopy the code
  • Direction judgment formula
X is negative on the left, positive on the right y is negative on the top, positive on the bottom z is negative on the inside, positive on the outsideCopy the code

rotateX()

1. It's a rotation along the x solid. For example, the transform: rotateX (180 deg); The rotation is also centered on the axis of the imageCopy the code

rotateY()

1. It's a rotation along the y solid. For example, the transform: rotateY (180 deg); The rotation is also centered on the axis of the imageCopy the code

 rotateZ ()

1. It's a rotation along the Z solid. For example, the transform: rotateZ (180 deg); The rotation is also centered on the axis of the imageCopy the code

Mobile translateX (x)/translateY (y)/translateZ (z)

[note] where x and y are both length values and percentages, the percentage is the sum of the horizontal width and vertical height of the element relative to the original element. Z can only set length value to translate3D (x,y,z)Copy the code

Perspective, the perspective

1. The computer display screen is a 2D plane. The reason why the image has a three-dimensional feeling (3D effect) is actually a visual presentation, which can be achieved through perspective. 2. Perspective can turn a 2D plane into a 3D effect during the conversion process. - Perspective principle: near big far small. - Browser Perspective: Perspective all images near, large and small on the screen. - Perspective: The length from the viewpoint to the screen. Viewpoint, used to simulate the position of the human eye during perspective effects. 3. Perspective effects are not required in every situation. 4. Perspective is typically set as a property to the parent element and applies to all child elements of the 3D transformationCopy the code

Using perspective


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;  /* Visual distance Distance from the eye to the screen The larger the visual distance the less obvious the smaller the visual distance, the more obvious the perspective effect */
        }
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        img:hover {
            transform: rotateX(360deg);
        }
    </style>
</head>
<body>
<img src="images/x.jpg" alt=""/>
</body>
</html>
Copy the code

Is the element visible when it is not facing the screen — backface-visibility

1. The backface-visibility property defines whether an element is visible when it is not facing the screen.Copy the code

Reverse box case

div {
			width: 224px;
			height: 224px;
			margin: 100px auto;
			position: relative;
		}
		div img {
			position: absolute;
			top: 0;
			left: 0;
			transition: all 1s; 
		}
		div img:first-child {
			z-index: 1;
			backface-visibility: hidden; /* Not front object screen, hide */
		}
		div:hover img {
			transform: rotateY(180deg);
}
Copy the code

case


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background: url('http://pic22.nipic.com/20120725/9676681_001949824394_2.jpg') no-repeat;
            background-size: cover;
            position: relative;
            perspective: 1000px;  /* Add perspective effect to parent box */
        }
        .ldoor..rdoor{
            position: absolute;
            background-color: red;
            border:1px solid # 000;
            top:0;
            width: 250px;
            height: 500px;
        }
        .ldoor{
            transform-origin: left;/* Rotation axis */
            left: 0;
        }
        .rdoor{
            transform-origin: right;/* Rotation axis */
            right: 0;
        }
        /* Mouse over section box two door boxes rotateY*/
        section:hover .ldoor {
            transform: rotateY(-130deg);  /* Because it flips to the left, it's negative */
        }
        section:hover .rdoor {
            transform: rotateY(130deg);
        }
    </style>
</head>
<body>
<section>
    <div class="ldoor"></div>
    <div class="rdoor"></div>
</section>
</body>
</html>
Copy the code