Recently CSS3 feel really amazing, when fully mastered the use of really interesting, but time is very difficult to make good use of, so I order a bit about the new features of CSS3, but also facilitate their access, if the article had What is wrong or a better way, welcome to point out -
transition - transition
Through the transition transition, we can make developers do not need javascriptto implement simple animation interactivity.
grammar
transition: property duration timing-function delay;
And attribute values described
Example - Transition
Rate from fast to slow, exercise time 2s, 1s started after the transition from the initial state to the final state
div
{
width:80px;
height:80px;
background:rgb(18, 185, 121);
transition:width 2s ease 1s;
-webkit-transition:width 2s ease 1s;
}
div:hover
{
width:200px;
}
Examples -hover effect
We can see a button with the exercise time of 3 seconds left, the right mouse put up the color came out, which is on the left with the transition to the right with no transition effect
code show as below:
css code
button{
width:100px;
height:70px;
border-radius: 10%;
color: forestgreen;
}
.one{
transition: all 3s;
}
button:hover
{
background:rgb(218, 118, 4);
}
html code
<div>
<button class="one">Monday</button>
<button class="two">Tuesday</button>
</div>
Example - Transition rotation
css code
.box {
height: 200px;
width: 200px;
background: -webkit-radial-gradient(rgb(105, 103, 204),rgb(226, 40, 26),rgb(106, 177, 85));
transition: all 3s;
}
.box:hover {
transform: rotate(180deg) scale(.5, .5);
background: -webkit-radial-gradient(rgb(218, 44, 116),rgb(45, 47, 207),rgb(201, 128, 19));
}
html code
<div class="box"></div>
animation - animation
grammar
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Description attribute values and
Example - Animation
Animation used the gradient of the above background, animation 5s completed, the animation pause the mouse on top
.box {
background: -webkit-radial-gradient(rgb(211, 28, 43),rgb(130, 190, 111),rgba(228, 184, 42, 0.425));
height: 120px;
width: 120px;
position:relative;
animation: change 5s infinite;
}
.box:hover {
animation-play-state: paused;
}
@keyframes change
{
from {left:0px;}
to {left:200px;}
}
Example - different points in time animation
10% of which, 50%, 70%, and 100% representing the attribute values at different time points in a changing
.box {
height: 120px;
width: 120px;
position:relative;
animation: change 2s linear 2s infinite reverse running both;
}
.box:hover {
animation-play-state: paused;
}
@keyframes change {
0% {
height: 150px;
background: -webkit-radial-gradient(rgb(44, 218, 111),rgb(130, 190, 111),rgba(230, 37, 172, 0.425));
}
50% {
width: 80px;
}
70% {
width: 200px;
height: 200px;
}
100% {
width: 100px;
height: 100px;
background: -webkit-radial-gradient(rgb(218, 64, 44),rgb(45, 207, 118),rgb(201, 128, 19));
}
}
shadow - the shadow
grammar
box-shadow: h-shadow v-shadow blur spread color inset
Description attribute values and
Examples -div shadow
div
{
width:300px;
height:100px;
background-color:rgb(75, 179, 75);
box-shadow: 15px 15px 10px #888888;
}
Example - Picture shadow
<style>
.pic img
{
width:300px;
height:200px;
margin-right:30px;
}
.onepic{
box-shadow: 15px 15px 10px #748ab8;
}
.twopic{
box-shadow: 15px 15px 10px #944848;
}
</style>
<div class="pic">
<img src="./three.jpg" class="onepic"/>
<img src="./four.jpg" class="twopic"/>
</div>
transform - Conversion
grammar
transform: none|transform-functions
Description attribute values and
Examples -2D rotation
.pic img{
width:200px;
height:100px;
transform:rotate(15deg);
margin: 60px;
}
<div class="pic">
<img src="./five.jpg" class="onepic"/>
</div>
Examples inclined -2D
.pic img{
width:200px;
height:100px;
transform: skew(10deg,10deg);
margin: 60px;
}
<div class="pic">
<img src="./five.jpg" class="onepic"/>
</div>
Examples -3D rotation
.pic img{
width:200px;
height:100px;
margin: 60px;
}
.pic:hover{
transform:rotateX(180deg);
}
<div class="pic">
<img src="./five.jpg" class="onepic"/>
</div>
Examples -3D rotation
.pic img{
width:200px;
height:100px;
margin: 60px;
transform:rotate3d(10,10,10,60deg);
}
<div class="pic">
<img src="./five.jpg" class="onepic"/>
</div>
transform-origin
grammar
transform-origin: x-axis y-axis z-axis
Description attribute values and
Examples of - setting the rotational position of the point
.pic
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid rgb(201, 134, 46);
}
.pic2
{
padding:50px;
position: absolute;
background-image: url("./four.jpg");
transform: rotate(45deg);
transform-origin:20% 40%;
}
<div class="pic">
<div class="pic2">hello</div>
</div>
transform-style
grammar
transform-style: flat|preserve-3d
Description attribute values and
Example - 3D conversion sub-elements
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid rgb(197, 139, 32);
}
#div2
{
padding:50px;
position: absolute;
background-image: url("./four.jpg");
transform: rotateY(60deg);
transform-style: preserve-3d;
}
#div3
{
padding:40px;
position: absolute;
background-image: url("./six.jpg");
transform: rotateY(-50deg);
box-shadow: 15px 15px 10px #944848;
}
<div id="div1">
<div id="div2">HELLO
<div id="div3">HAPPY</div>
</div>
</div>
background background
grammar
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit
Description attribute values and
Example - Background image
Css
.box{
display: flex;
justify-content: center;
·}
.box1{
text-align: center;
width: 300px;
height: 250px;
background-image: url("./six.jpg");
}
.box2{
text-align: center;
width: 300px;
height: 250px;
background-image: url("./sun.png");
}
html
<div class="box">
<div class="box1">
<p>I love the sea</p>
<p>I feel very happy</p>
</div>
<div class="box2">
<p>I like the sun</p>
<p>I feel very happy</p>
</div>
</div>
border-image picture frame
grammar
border-image: source slice width outset repeat|initial|inherit
Description attribute values and
Example - Borders
css
.box{
border: 10px solid transparent;
padding: 15px;
border-image: url(./border.jpg);
border-image-slice: 30;
border-image-repeat: repeat;
border-image-outset: 0;
}
html
<div class="box"></div>
Flex layout
Two-column layout
css section
.outer2 {
display: flex;
}
.outer2 .left {
flex: 0 0 200px;
/* flex-grow: 0;
flex-shrink:0;
flex-basis:200px; */
}
.outer2 .right {
flex: auto;
}
html part
<div class="outer outer2">
<div class="left">2-left</div>
<div class="right">2-right</div>
</div>
Renderings:
Three-column layout
css section
.outer2 {
display: flex;
}
.outer2 .left {
flex: 0 0 100px;
}
.outer2 .middle {
flex: auto;
}
.outer2 .right {
flex: 0 0 200px;
}
html part
<div class="outer outer2">
<div class="left">2-left</div>
<div class="middle">2-middle</div>
<div class="right">2-right</div>
</div>
Renderings:
Holy Grail layout
css section
header, footer {
height: 100px;
width: 100%;
background-color: antiquewhite;
}
.container {
height: 200px;
padding-left: 200px;
padding-right: 300px;
}
.container > div {
float: left;
position: relative;
height: 100%;
}
.left {
width: 200px;
height: 200px;
background-color: burlywood;
margin-left: -100%;
left: -200px;
}
.right {
width: 300px;
height: 200px;
background-color: burlywood;
margin-left: -300px;
right: -300px;
}
.middle {
width: 100%;
height: 200px;
background-color: #b0f9c2;
}
html part
<header>header</header>
<div class="container">
<div class="middle">midlle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
Renderings:
Filter - Filters
CSS3 Filter (filter) property change and provide elements giving a blurred color function. CSS3 Fitler used to adjust the image rendering, display background or borders.
Example - Original
css section
.box {
display: flex;
flex-direction: column;
align-items: center;
}
.box img {
width: 300px;
height: 300px;
-webkit-filter: none;
filter: none;
}
html part
<div class="box">
<p>原图</p>
<img src="./timg.gif"/>
</div>
Renderings:
Example - fuzzy
Modify css
-webkit-filter: blur(5px);
filter: blur(5px);
Renderings:
Example - gradation
Modify css
-webkit-filter: grayscale(1);
filter: grayscale(1);
Renderings:
Example - Brightness
Modify css
-webkit-filter: brightness(1.5);
filter: brightness(1.5);
Renderings:
Example - Contrast
Modify css
-webkit-filter: contrast(2.4);
filter: contrast(2.4);
Renderings:
Example - Saturation
Modify css
-webkit-filter: saturate(1.6);
filter: saturate(1.6);
Renderings:
Example - hue rotation
Modify css
-webkit-filter: hue-rotate(160deg);
filter: hue-rotate(160deg);
Renderings:
Example - anti-color
Modify css
-webkit-filter: invert(1);
filter: invert(1);
Renderings:
Example - Shadow
Modify css
-webkit-filter: drop-shadow(0px 0px 5px #000);
filter: drop-shadow(0px 0px 5px #000);
Renderings:
Example - Transparency
Modify css
-webkit-filter: opacity(75%);
filter: opacity(75%);
Renderings:
Example - Brown
Modify css
-webkit-filter: sepia(0.77);
filter: sepia(0.77);
Renderings:
frame
Example - Fillet
css section
#radius {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300px;
border-radius: 25px;
}
html part
<div id="radius">创建盒子边框圆角创建盒子边框圆角创建盒子边框圆角创建盒子边框圆角</div>
Renderings:
Example - Shadow Box
css section
#shadow {
width: 200px;
height: 200px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
html part
<div id="shadow"></div>
Renderings:
Example - Picture border
css section
#round {
-webkit-border-image: url('./border.png') 30 30 round; /* Safari 5 and older */
-o-border-image: url('./border.png') 30 30 round; /* Opera */
border-image: url('./border.png') 30 30 round;
}
html part
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
Renderings:
Linear gradient Linear Gradient
grammar
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Example - from top to bottom
From top to bottom (by default)
// css
.grad1 {
height: 200px;
width: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(#2A8BBE, #FE280E);
}
// html
<div class="grad1"></div>
Example - from left to right
// css
.grad2 {
height: 200px;
width: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(to right, #2A8BBE, #FE280E);
}
// html
<div class="grad2"></div>
Example - diagonal
// css
.grad3 {
height: 200px;
width: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(to bottom right, blue, #FE280E);
}
// html
<div class="grad3"></div>
Example - defined angle
If you want to do more in the direction of the gradient control, you can define a point of view. Angle refers to an angle between a horizontal line and the gradient, the counterclockwise direction is calculated. In other words, 0deg will create a gradient from the bottom up on, 90deg will create a gradient from left to right. Note that many browsers (Chrome, Safari, firefox etc.) uses the old standard, namely 0deg will create a gradient from left to right, 90deg will create a gradient from the bottom up on. Conversion formula 90 - x = y wherein x is the standard angle, y is a non-standard angle.
// 语法
background-image: linear-gradient(angle, color-stop1, color-stop2);
css section
#wrap {
width: 300px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#grad1 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(-90deg, red, yellow);
}
html part
<div id="wrap">
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
</div>
Renderings
Radial Gradient Radial Gradient
grammar
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Example - set the shape
css section
#radient {
display: flex;
flex-direction: row;
}
.radient {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-right: 20px;
}
#radient1 {
height: 150px;
width: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(red, yellow, #FE280E); /* 标准的语法（必须放在最后） */
}
#radient2 {
height: 150px;
width: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(circle, red, yellow, #FE280E); /* 标准的语法（必须放在最后） */
}
html part
<div id="radient">
<div class="radient">
<p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="radient1"></div>
</div>
<div class="radient">
<p><strong>圆形 Circle：</strong></p>
<div id="radient2"></div>
</div>
</div>
Renderings:
Example - uniform color
css section
#radient3 {
height: 150px;
width: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
html part
<div class="radient">
<h3>径向渐变 - 颜色结点均匀分布</h3>
<div id="radient3"></div>
</div>
Renderings:
Example - color unevenness
css section
#radient4 {
height: 150px;
width: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}
html part
<div class="radient">
<h3>径向渐变 - 颜色结点不均匀分布</h3>
<div id="radient4"></div>
</div>
Renderings:
Writing
Example - single line exceeds ellipsis
Single-line excess ellipsis
css section
.single {
width:200px;
border:1px solid #c01c1c;
padding: 20px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
html part
<div class="single">单行超出部分显示省略号单行超出部分显示省略号超出部分显示省略号</div>
Renderings:
Example - Multi-line exceeds ellipsis
Multi-line excess ellipsis
css section
.double {
width:200px;
border:1px solid #c01c1c;
margin:0 auto;
overflow : hidden;
text-overflow: ellipsis;
padding:0 20px;
line-height:30px;
height:60px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Note : When you add padding effect if the multi-line and single element like elements ellipsis, padding can not directly operate.
html part
<div class="double">多行超出部分显示省略号多行超出部分显示省略号多行超出部分显示省略号多行超出部分显示省略号多行超出部分显示省略号多行超出部分显示省略号多行</div>
Renderings:
Example - text shadow
Text shadow text-shadow
css section
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
html part
<h1>文本阴影效果！</h1>
Renderings:
Example - the text wrap
Word-wrap text wrap
css section
p {
width: 150px;
padding: 20px;
border: 1px solid #FF0000;
word-wrap: break-word;
}
html part
<p>
测试文本换行
testing word break!
</p>
Renderings:
to sum up
CSS3 by common attributes and the example above, let me be more understanding of these properties. In fact, these CSS3 properties seem simple, but in reality the real development of the project is not easy to remember. The most important thing is, we have to practice more, gymnastics is the most important part, Practice makes perfect also comes out of this! css3 only to be used, but also with good use css3, on the development of the project, very helpful!
At last
This article would like to see a small partner learn something -
Welcome to join, learn the front together, progress together!
