1. Введение
Думаю, все знакомы с CSS3, это очень интересная и волшебная штука! С css3 js может писать намного меньше! Я также писал статьи о css3 раньше, и я также инкапсулировал несколько небольших анимаций css3. Лично я считаю, что CSS3 не сложен, но трудно использовать его хорошо и плавно.Недавно я также прошел через некоторые новые функции CSS3 (не все из них, но они обычно используются в моей работе или найти они полезны), а также несколько примеров.Только что написал это резюме! Надеюсь, эта статья поможет вам понять css3. Написание этой статьи в основном для того, чтобы все поняли некоторые новые возможности css3, а также основы использования, почувствовали прелесть css3! Если вы хотите хорошо использовать CSS3, вам нужно продолжать усердно учиться и найти более подробные статьи или книги! Если у вас есть другие функции, которые вы можете порекомендовать, пожалуйста, добавьте их! Давайте учиться и развиваться вместе!
После прочтения этой статьи вам не нужно слишком внимательно читать код! Это в основном для того, чтобы вы узнали о новых возможностях css3! Код также очень простое использование. Код, который я даю, в основном предназначен для того, чтобы каждый мог запустить его в браузере для справки и отладки. Не смотрите только на код. Если вы смотрите только на код, вы не будете знать, какой код имеет какой эффект. Рекомендуется смотреть на код, наблюдая за эффектом.
2. Переход
Переход — одна из функций, которые я чаще всего использую в проекте! Также считается, что это пример, который многие люди используют больше всего! Я обычно использую его, чтобы сделать некоторые интерактивные эффекты (в основном анимацию при наведении курсора) более яркими и не такими жесткими! Что ж, давайте введем текст ниже!
Процитирую учебник для новичков: переходы CSS3 — это эффект постепенного перехода элементов от одного стиля к другому. Для этого необходимо указать две вещи: указать свойство CSS, чтобы добавить эффект, чтобы указать продолжительность эффекта.
2-1 Грамматика
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)каштан 1
/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2sкаштан 2
/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition：all,.5s
Каштан выше - это сокращенный режим, и каждый атрибут также может быть записан отдельно (ниже это не будет повторяться).
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
2-2 Пример — эффект наведения
Для двух вышеперечисленных кнопок первая использует переход, а вторая нет.Разницу видно.После использования перехода она не такая жесткая.Есть процесс изменения,который более яркий.
Конечно, это просто самый простой каштан перехода, код стиля двух кнопок, разница только в том, что первая кнопка добавляет код переходаtransition: all .5s;
2-3 Пример — выпадающее меню
В приведенных выше двух меню в первом не используется переход, во втором используется переход, каждый может четко увидеть разницу, и при использовании перехода он выглядит более удобным! Отличие кода в том, что родительский элемент (элемент-предок) ul с переходом имеет имя класса (ul-transition). Используйте это имя класса, чтобы установить переход ul.ul-transition ul{transform-origin: 0 0;transition: all .5s;}
Может быть, вы не знаете, о чем я говорю! я выложу код
html
<div class="demo-hover demo-ul t_c">
<ul class="fllil">
<li>
<a href="javascript:;">html</a>
<ul>
<li><a href="#">div</a></li>
<li><a href="#">h1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">js</a>
<ul>
<li><a href="#">string</a></li>
<li><a href="#">array</a></li>
<li><a href="#">object</a></li>
<li><a href="#">number</a></li>
</ul>
</li>
<li>
<a href="javascript:;">css3</a>
<ul>
<li><a href="#">transition</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
<li>
<a href="javascript:;">框架</a>
<ul>
<li><a href="#">vue</a></li>
<li><a href="#">react</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="demo-hover demo-ul ul-transition t_c">
<ul class="fllil">
<li>
<a href="javascript:;">html</a>
<ul>
<li><a href="#">div</a></li>
<li><a href="#">h1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">js</a>
<ul>
<li><a href="#">string</a></li>
<li><a href="#">array</a></li>
<li><a href="#">object</a></li>
<li><a href="#">number</a></li>
</ul>
</li>
<li>
<a href="javascript:;">css3</a>
<ul>
<li><a href="#">transition</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
<li>
<a href="javascript:;">框架</a>
<ul>
<li><a href="#">vue</a></li>
<li><a href="#">react</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
css
.demo-ul{margin-bottom: 300px;}
.demo-ul li{
padding: 0 10px;
width: 100px;
background: #f90;
position: relative;
}
.demo-ul li a{
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
.demo-ul li ul{
position: absolute;
width: 100%;
top: 40px;
left: 0;
transform: scaleY(0);
overflow: hidden;
}
.ul-transition ul{
transform-origin: 0 0;
transition: all .5s;
}
.demo-ul li:hover ul{
transform: scaleY(1);
}
.demo-ul li ul li{
float: none;
background: #0099ff;
}
Вышеуказанные два можно назвать очень простыми переходами. Переходы гибкие и мощные. В сочетании с js можно легко достичь различных эффектов (карта фокуса, аккордеон), а также множество неожиданных эффектов. Выкопать это дело каждого!
3. Анимация
Анимация обычно используется много, в основном для создания предустановленной анимации. И некоторые эффекты анимации взаимодействия со страницей, результаты и переходы должны быть одинаковыми, чтобы страница не была такой тупой!
3-1 Синтаксис
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）каштан 1
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;каштан 2
/*2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear 2s;каштан 3
/*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/
animation: logo2-line 2s linear alternate infinite;Еще одно важное свойство
animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。 */ 3-2. Анимация отображения логотипа
Это анимация, которую я написал с логотипом компании, не такая подробная
код показывает, как показано ниже
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
</head>
<style>
.logo-box{
width: 600px;
margin: 100px auto;
font-size: 0;
position: relative;
}
.logo-box div{
display: inline-block;
}
.logo-box .logo-text{
margin-left: 10px;
}
.logo-box .logo1{
animation: logo1 1s ease-in 2s;
animation-fill-mode:backwards;
}
.logo-box .logo-text{
animation: logoText 1s ease-in 3s;
animation-fill-mode:backwards;
}
.logo-box .logo2{
position: absolute;
top: 20px;
left: 20px;
animation: logo2-middle 2s ease-in;
}
.logo-box .logo2 img{
animation: logo2-line 2s linear;
}
@keyframes logo1 {
0%{
transform:rotate(180deg);
opacity: 0;
}
100%{
transform:rotate(0deg);
opacity: 1;
}
}
@keyframes logoText {
0%{
transform:translateX(30px);
opacity: 0;
}
100%{
transform:translateX(0);
opacity: 1;
}
}
@keyframes logo2-line {
0% { transform: translateX(200px)}
25% { transform: translateX(150px)}
50% { transform: translateX(100px)}
75% { transform: translateX(50px)}
100% { transform: translateX(0); }
}
@keyframes logo2-middle {
0% { transform: translateY(0); }
25% { transform: translateY(-100px); }
50% { transform: translateY(0); }
75% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
</style>
<body>
<div class="logo-box">
<div class="logo1"><img src="logo1.jpg"/></div>
<div class="logo2"><img src="logo2.jpg"/></div>
<div class="logo-text"><img src="logo3.jpg"/></div>
</div>
<div class="wraper"><div class="item"></div></div>
</body>
</html>
Давайте посмотрим на профессиональный уровень
код показывает, как показано ниже
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
overflow: hidden;
background: #fff;
}
.center {
margin: 80px auto;
}
.so {
display: block;
width: 500px;
height: 156px;
background: #ffffff;
}
.so .inner {
width: 500px;
height: 156px;
position: absolute;
}
.so .inner * {
position: absolute;
animation-iteration-count: infinite;
animation-duration: 3.5s;
}
.so .inner .name {
position: absolute;
font-size: 54px;
left: 130px;
top: 95px;
}
.so .inner .name .b {
font-weight: bold;
}
.so .inner .stack-box {
top: 100px;
width: 115px;
height: 56px;
}
.so .inner .box {
width: 115px;
height: 56px;
left: 0px;
}
.so .inner .box div {
background: #BCBBBB;
}
.so .inner .box .bottom {
bottom: 0px;
left: 0px;
width: 115px;
height: 12px;
}
.so .inner .box .left {
bottom: 11px;
left: 0px;
width: 12px;
height: 34px;
}
.so .inner .box .right {
bottom: 11px;
left: 103px;
width: 12px;
height: 34px;
}
.so .inner .box .top {
top: 0px;
left: 0px;
width: 0;
height: 12px;
}
.so .inner .stack {
left: 22px;
top: 22px;
}
.so .inner .stack .inner-item {
background: #F48024;
width: 71px;
height: 12px;
}
.so .inner .stack .item {
transition: transform 0.3s;
width: 291px;
}
.so .inner .stack div:nth-child(1) {
transform: rotate(0deg);
}
.so .inner .stack div:nth-child(2) {
transform: rotate(12deg);
}
.so .inner .stack div:nth-child(3) {
transform: rotate(24deg);
}
.so .inner .stack div:nth-child(4) {
transform: rotate(36deg);
}
.so .inner .stack div:nth-child(5) {
transform: rotate(48deg);
}
.so .inner .box {
animation-name: box;
}
.so .inner .box .top {
animation-name: box-top;
}
.so .inner .box .left {
animation-name: box-left;
}
.so .inner .box .right {
animation-name: box-right;
}
.so .inner .box .bottom {
animation-name: box-bottom;
}
.so .inner .stack-box {
animation-name: stack-box;
}
.so .inner .stack {
animation-name: stack;
}
.so .inner .stack .inner-item {
animation-name: stack-items;
}
.so .inner .stack .item:nth-child(1) {
animation-name: stack-item-1;
}
.so .inner .stack .item:nth-child(2) {
animation-name: stack-item-2;
}
.so .inner .stack .item:nth-child(3) {
animation-name: stack-item-3;
}
.so .inner .stack .item:nth-child(4) {
animation-name: stack-item-4;
}
.so .inner .stack .item:nth-child(5) {
animation-name: stack-item-5;
}
@keyframes stack {
0% {
left: 22px;
}
15% {
left: 22px;
}
30% {
left: 52px;
}
50% {
left: 52px;
}
80% {
left: 22px;
}
}
@keyframes stack-item-1 {
0% {
transform: rotate(12deg * 0);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg * 0);
}
}
@keyframes stack-item-2 {
0% {
transform: rotate(12deg * 1);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg * 1);
}
}
@keyframes stack-item-3 {
0% {
transform: rotate(12deg * 2);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg * 2);
}
}
@keyframes stack-item-4 {
0% {
transform: rotate(12deg * 3);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg * 3);
}
}
@keyframes stack-item-5 {
0% {
transform: rotate(12deg * 4);
}
10% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
54% {
transform: rotate(0deg);
}
92% {
transform: rotate(12deg * 4);
}
}
@keyframes stack-items {
0% {
width: 71px;
}
15% {
width: 71px;
}
30% {
width: 12px;
}
50% {
width: 12px;
}
80% {
width: 71px;
}
}
@keyframes box {
0% {
left: 0;
}
15% {
left: 0;
}
30% {
left: 30px;
}
50% {
left: 30px;
}
80% {
left: 0;
}
}
@keyframes box-top {
0% {
width: 0;
}
6% {
width: 0;
}
15% {
width: 115px;
}
30% {
width: 56px;
}
50% {
width: 56px;
}
59% {
width: 0;
}
}
@keyframes box-bottom {
0% {
width: 115px;
}
15% {
width: 115px;
}
30% {
width: 56px;
}
50% {
width: 56px;
}
80% {
width: 115px;
}
}
@keyframes box-right {
15% {
left: 103px;
}
30% {
left: 44px;
}
50% {
left: 44px;
}
80% {
left: 103px;
}
}
@keyframes stack-box {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(0deg);
}
40% {
transform: rotate(135deg);
}
50% {
transform: rotate(135deg);
}
83% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<body>
<div class="so center">
<div class="inner">
<div class="stack-box">
<div class="stack">
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
</div>
<div class="box">
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
</div>
<div class="name">
stack<span class="b">overflow</span>
</div>
</div>
</div>
</body>
</html>
3-3. эффект загрузки
Этого кода слишком много, давайте перейдем непосредственно на веб-сайт, чтобы увидеть его.css3-loading
3-4 Музыкальная вибрация
код показывает, как показано ниже
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3模拟跳动的音符效果</title>
<style>
*{margin:0;padding:0;list-style: none;}
body{background-color: #efefef;}
.demo-music {
position: absolute;
width: 100%;
height: 200px;
top: 120px;
zoom: 1.5;
}
.demo-music .music {
width: 80px;
height: 50px;
top: 50%;
left: 50%;
-webkit-transform: translate(-40px, -25px);
transform: translate(-40px, -25px);
position: absolute;
}
.demo-music #waves {
width: 80px;
height: 50px;
position: absolute;
top: 12px;
left: 12px;
}
.demo-music #waves li {
position: relative;
float: left;
height: 100%;
width: 12%;
overflow: hidden;
margin-right: 1px;
}
.demo-music #waves li span {
position: absolute;
bottom: 0;
display: block;
height: 100%;
width: 100px;
background: #09f;
}
.demo-music #waves .li1 span {
animation: waves 0.8s linear 0s infinite alternate;
-webkit-animation: waves 0.8s linear 0s infinite alternate;
}
.demo-music #waves .li2 span {
animation: waves 0.9s linear 0s infinite alternate;
-webkit-animation: waves 0.9s linear 0s infinite alternate;
}
.demo-music #waves .li3 span {
animation: waves 1s linear 0s infinite alternate;
-webkit-animation: waves 1s linear 0s infinite alternate;
}
.demo-music #waves .li4 span {
animation: waves 0.8s linear 0s infinite alternate;
-webkit-animation: waves 0.8s linear 0s infinite alternate;
}
.demo-music #waves .li5 span {
animation: waves 0.7s linear 0s infinite alternate;
-webkit-animation: waves 0.7s linear 0s infinite alternate;
}
.demo-music #waves .li6 span {
animation: waves 0.8s linear 0s infinite alternate;
-webkit-animation: waves 0.8s linear 0s infinite alternate;
}
@-webkit-keyframes waves {
10% {
height: 20%;
}
20% {
height: 60%;
}
40% {
height: 40%;
}
50% {
height: 100%;
}
100% {
height: 50%;
}
}
@keyframes waves {
10% {
height: 20%;
}
20% {
height: 60%;
}
40% {
height: 40%;
}
50% {
height: 100%;
}
100% {
height: 50%;
}
}
</style>
</head>
<body>
<div class="demo-music">
<div class="music">
<ul id="waves" class="movement">
<li class="li1"><span class="ani-li"></span></li>
<li class="li2"><span class="ani-li"></span></li>
<li class="li3"><span class="ani-li"></span></li>
<li class="li4"><span class="ani-li"></span></li>
<li class="li5"><span class="ani-li"></span></li>
<li class="li6"><span class="ani-li"></span></li>
</ul>
<div class="music-state"></div>
</div>
</div>
</body>
</html>
4. Форма преобразования
Эта часть разделена на преобразование 2D и преобразование 3D. Какая забава, перечислите несколько ниже!
4-1 Синтаксис
Преобразование: элементы, подходящие для преобразования в 2D или 3D.
Transform-Origin: положение элемента преобразования (преобразование вокруг этой точки). По умолчанию (X, Y, Z): (50%, 50%, 0)
4-2 Примеры
transform:rotate(30deg);
transform:translate(30px,30px);
transform:scale(.8);
transform: skew(10deg,10deg);
transform:rotateX(180deg);
transform:rotateY(180deg);
transform:rotate3d(10,10,10,90deg);
5. Селектор
Селектор, предоставляемый css3, может сделать нашу разработку более удобной! Это должен знать каждый. Ниже приведены селекторы, предоставляемые css3.
Изображение с w3c. Эту штуку рекомендуется всем пройти на w3c(Справочное руководство по CSS-селекторам), примеры там легко понять. Я не буду повторять это.
Предоставленные селекторы в основном очень полезны. Но я не думаю, что некоторые очень часто используются, например,:root，:empty，:target，:enabled，:checked. И некоторые из них не рекомендуются, в Интернете говорится, что производительность плохая.[attribute*=value]，[attribute$=value]，[attribute^=value], Я не использовал это раньше, поэтому я не знаю.
6. Тени
В прошлом, когда не было CSS3 или когда требовалась совместимость с браузерами более ранних версий, тени можно было реализовать только с картинками, но теперь это не нужно, CSS3 это обеспечивает!
6-1 Синтаксис
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
6-1. Каштаны
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:300px;
height:100px;
background:#09f;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
текущий результат
7. Граница
7-1. Пограничный рисунок
7-1-1 Синтаксис
border-image: URL-адрес изображения Граница изображения смещается внутрь на ширину границы изображения (по умолчанию это ширина границы) Используется для указания величины смещения, чтобы отрисовать за пределы границы (по умолчанию 0) Метод заполнения -- повторите, растянуть (stretch) или скруглить (по умолчанию: stretch);
7-1-2. Каштаны
Изображение рамки (из учебника для новичков)
код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.demo {
border: 15px solid transparent;
padding: 15px;
border-image: url(border.png);
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 0;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
Эффект
интересное изменение
Этот выглядит лучше, посмотрим
7-2.Ограничьте закругленные углы
7-2-1 Синтаксис
border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/*n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。*/
7-2-2 Каштаны
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
text-align:center;
width:300px;
border-radius:25px 0 25px 0;
}
</style>
</head>
<body>
<div>border-radius</div>
</body>
</html>
результат операции
8. Фон
В этой части в основном рассказывается о трех свойствах, которые CSS3 предоставляет фону.
background-clip
Укажите область фонового рисунка (отображения)
По умолчанию (рисунок от границы)
Начинайте рисовать (отображать) с отступов, не считая бордюра, что равносильно обрезке фона бордюра! (фоновый клип: padding-box;)
Рисовать (отображать) только в области содержимого, не считая отступов и бордюров, что эквивалентно обрезке фона отступов и бордюров! (фоновый клип: поле содержимого;)
background-origin
Цитата из учебника для новичков: свойство background-Origin указывает, что свойство background-position должно быть относительной позицией.
Исходный код html и css элемента div ниже одинаковый. следующим образом
html
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>css
div
{
border:10px dashed black;
padding:35px;
background:url('logo.png') no-repeat,#ccc;
background-position:0px 0px;
}
Давайте взглянем на три случая с разным фоном-происхождением.
background-size
Это убеждение легко понять, оно заключается в установке размера фона.
Исходный код html и css элемента div ниже одинаковый. следующим образом
html
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>css
div
{
border:1px dashed black;
padding:35px;
background:url('test.jpg') no-repeat;
}
несколько фоновых изображений
Это ничего, просто используйте несколько фоновых изображений в одном изображении, код выглядит следующим образом!
html
<p>两张图片的背景</p>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>css
div
{
border:1px dashed black;
padding:35px;
background-size: contain;
background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;
}9. Отражение
Это тоже можно сказать отражение, и им тоже очень интересно пользоваться.
9-1 Синтаксис
-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片9-2 Нижнее отражение
html
<p>下倒影</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom"></p>css
.reflect-bottom-p {
padding-bottom: 300px;
}
.reflect-bottom {
-webkit-box-reflect: below;
} 9-2 Правое отражение (со смещением)
html
<p>右倒影同时有偏移</p>
<p><img src="test.jpg" class="reflect-right-translate"></p>css
.reflect-right-translate {
-webkit-box-reflect: right 10px;
}9-3.Нижнее отражение (градиент)
html
<p>下倒影（渐变）</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-mask"></p>
css
reflect-bottom-mask {
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
}9-3 Нижнее отражение (маска изображения)
использованное изображение
html
<p>下倒影（png图片）</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-img"></p>
css
.reflect-bottom-img {
-webkit-box-reflect: below 0 url(shou.png);
}
10. Текст
новая линия
грамматика:word-break: normal|break-all|keep-all;
Каштаны и беговые эффекты
грамматика:word-wrap: normal|break-word;
Каштаны и беговые эффекты
Помимо многоточия, в основном говорят о
text-overflowЭто свойство, причина, по которой я прямо говорю об экземпляре, заключается в том, чтоtext-overflowТри написания ,clip|ellipsis|string.clipЭтот способ не красив и не элегантен.stringСовместим только с Firefox.
за многоточием
Это на самом деле имеет три строки кода, запрещающие разрывы строк, превышающие скрытые, превышающие многоточие
html
<div>This is some long text that will not fit in the box</div>css
div
{
width:200px;
border:1px solid #000000;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}результат операции
Несколько строк за многоточием
Помимо многоточия. Это не сложно для всех! Но в прошлом, если за многоточием было больше одной строки, это можно было смоделировать только с помощью js! Теперь css3 предоставляет метод для многострочного многоточия! К сожалению, пока это поддерживает только браузеры webkit!
код показывает, как показано ниже
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:400px;
margin:0 auto;
overflow : hidden;
border:1px solid #ccc;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏</div>
</body>
</html>
визуализация
Таким образом обнаруживается, что граница некрасивая, и ее нужно немного растянуть, но не используйте отступы для растяжения верхней и нижней границ, потому что появится следующий эффект.
Правильная осанка пишется так
<style>
div
{
width:400px;
margin:0 auto;
overflow : hidden;
border:1px solid #ccc;
text-overflow: ellipsis;
padding:0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height:30px;
height:60px;
}
</style>
результат операции
Таким образом, даже в браузере, который не является ядром webkit, его можно изящно деградировать (высота = высота строки * количество строк (webkit-line-clamp))!
тень текста
Синтаксис: text-shadow: горизонтальная тень, вертикальная тень, расстояние размытия и цвет тени.
Каштан:text-shadow: 0 0 10px #f00;
Эффект
11. Цвет
На самом деле это новый метод представления цвета, предоставляемый CSS3.
rgba
Один — rgba (rgb — значение цвета, a — прозрачность)
color: rgba(255,00,00,1);
background: rgba(00,00,00,.5);
hsla
h: оттенок", "s: насыщенность", "l: яркость", "a: прозрачность"
Я знаю эту позу, но никогда ею не пользовался.Вот простой пример.
color: hsla( 112, 72%, 33%, 0.68);
background-color: hsla( 49, 65%, 60%, 0.68);12. Градиенты
Можно сказать, что градиент css3 является изюминкой, предоставляя линейные градиенты, радиальные градиенты, конические градиенты (учебники w3c и новичков не упоминаются, я узнал из статьи, но я попробовал это в Google Chrome, но это недопустимый способ написания!Если вы знаете, как его использовать, пожалуйста, дайте мне знать!Спасибо)
Градиентную часть из-за гибкости использования и мощных функций писать очень долго, и писать немного неинтересно. Я опубликую здесь несколько руководств по ссылкам для всех. Я не буду много говорить в статью.Я ведь тоже учился у тех немногочисленных краеведов,они тоже лучше меня пишут,подробней меня!
CSS3 Gradient
Давайте поговорим о градиентах CSS3 — линейных градиентах.
Давайте поговорим о градиентах CSS3 — радиальных градиентах.
Волшебный конически-градиентный конический градиент(Это статья, где я видел градиент конуса)
13.Фильтр (фильтр)
Фильтр css3 также является ярким пятном, с мощными функциями и гибким написанием.
Код каштана выглядит следующим образом
<p>原图</p>
<img src="test.jpg" />
<p>黑白色filter: grayscale(100%)</p>
<img src="test.jpg" style="filter: grayscale(100%);"/>
<p>褐色filter:sepia(1)</p>
<img src="test.jpg" style="filter:sepia(1);"/>
<p>饱和度saturate(2)</p>
<img src="test.jpg" style="filter:saturate(2);"/>
<p>色相旋转hue-rotate(90deg)</p>
<img src="test.jpg" style="filter:hue-rotate(90deg);"/>
<p>反色filter:invert(1)</p>
<img src="test.jpg" style="filter:invert(1);"/>
<p>透明度opacity(.5)</p>
<img src="test.jpg" style="filter:opacity(.5);"/>
<p>亮度brightness(.5)</p>
<img src="test.jpg" style="filter:brightness(.5);"/>
<p>对比度contrast(2)</p>
<img src="test.jpg" style="filter:contrast(2);"/>
<p>模糊blur(3px)</p>
<img src="test.jpg" style="filter:blur(3px);"/>
<p>阴影drop-shadow(5px 5px 5px #000)</p>
<img src="test.jpg" style="filter:drop-shadow(5px 5px 5px #000);"/>14. Гибкая компоновка
Упомянутый здесь гибкий макет — это гибкий; если вы хотите поговорить об этом фрагменте, вы должны его закончить. Это также очень долго после доклада, поэтому я опубликую здесь только URL-адрес учебника. Блог очень хороший и подробный!
Учебное пособие по гибкому макету: синтаксис
Учебное пособие по Flex Layout: примеры
15. Макет сетки
Грид-макет — это грид, этот, как и флекс, надо доделывать. По содержанию этот раздел похож на flex, а также он немного длинноват, я тоже размещу здесь ссылку, и эта ссылка тоже очень подробная!
16. Многоколоночный макет
Я также понимаю, что несколько столбцов должны быть весьма полезными. Хоть я и не использовал его в проекте, но вкратце скажу ниже! Например! Для этого атрибута рекомендуется добавить приватный префикс, а совместимость нужно улучшить!
html
<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>css
.newspaper
{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-rule:2px solid #000;
-webkit-column-rule:2px solid #000;
-mox-column-rule:2px solid #000;
}
17. Определение блочной модели
Свойство box-sizing, онлайн-поговорка: свойства позволяют вам определять определенные элементы, которые определенным образом соответствуют определенной области.
Вы можете не знать, о чем вы говорите, когда смотрите на это.Простое и грубое понимание таково: при изменении размера окна: рамка-бокс граница и отступы включаются в ширину и высоту элемента! Как показано ниже
При box-sizing:content-box граница и отступ не включаются в ширину и высоту элемента! Как показано ниже
18. Медиа-запросы
Медиа-запросы отслеживают изменения размера экрана и отображают разные стили в разных размерах! Это неотъемлемая часть создания адаптивного веб-сайта! Однако, поскольку все мои недавние проекты используют макет rem. Так что медиа-запросы бесполезны! Тем не менее, медиа-запросы по-прежнему заслуживают внимания! Возможно, однажды вам это понадобится!
Код каштана выглядит следующим образом
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: pink;
}
@media screen and (max-width: 960px) {
body {
background-color: darkgoldenrod;
}
}
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口查看效果！</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 960 px ，背景颜色将改变。</p>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>
</body>
</html>
текущий результат
19. Режим наложения
Режимы наложения, как и режимы наложения в фотошопе! Эта штука, я так понимаю, в проекте не использовалась, но я думаю она не должна быть бесполезной!
Режим наложения CSS3, два (фоновый режим наложения и смешанный режим наложения). Эффект письма и отображения этих двух очень похож! Разница в том, что фоновый режим наложения используется для фонового изображения и цвета фона одного и того же элемента. mix-blend-mode используется для фонового изображения или цвета элемента и дочерних элементов. Посмотрите на следующий код, разница будет видна!
В этом произведении много картинок, каждый может бросить беглый взгляд на картинки и посмотреть, какой эффект получился!
background-blend-mode
код
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
div{
width: 480px;
height: 300px;
background:url('test.jpg')no-repeat,#09f;
}
</style>
<body>
<!---->
<p>原图</p>
<div></div>
<p>multiply正片叠底</p>
<div style="background-blend-mode: multiply;"></div>
<p>screen滤色</p>
<div style="background-blend-mode: screen;"></div>
<p>overlay叠加</p>
<div style="background-blend-mode: overlay;"></div>
<p>darken变暗</p>
<div style="background-blend-mode: darken;"></div>
<p>lighten变亮</p>
<div style="background-blend-mode: lighten;"></div>
<p>color-dodge颜色减淡模式</p>
<div style="background-blend-mode: color-dodge;"></div>
<p>color-burn颜色加深</p>
<div style="background-blend-mode: color-burn;"></div>
<p>hard-light强光</p>
<div style="background-blend-mode: hard-light;"></div>
<p>soft-light柔光</p>
<div style="background-blend-mode: soft-light;"></div>
<p>difference差值</p>
<div style="background-blend-mode: difference;"></div>
<p>exclusion排除</p>
<div style="background-blend-mode: exclusion;"></div>
<p>hue色相</p>
<div style="background-blend-mode: hue;"></div>
<p>saturation饱和度</p>
<div style="background-blend-mode: saturation;"></div>
<p>color颜色</p>
<div style="background-blend-mode: color;"></div>
<p>luminosity亮度</p>
<div style="background-blend-mode: luminosity;"></div>
</body>
</html>
текущий результат
mix-blend-mode
код
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
div{
padding: 20px;
width: 480px;
background: #09f;
}
</style>
<body>
<p>原图</p>
<div><img src="test.jpg"/></div>
<p>multiply正片叠底</p>
<div><img src="test.jpg" style="mix-blend-mode: multiply;"/></div>
<p>screen滤色</p>
<div><img src="test.jpg" style="mix-blend-mode: screen;"/></div>
<p>overlay叠加</p>
<div><img src="test.jpg" style="mix-blend-mode: overlay;"/></div>
<p>darken变暗</p>
<div><img src="test.jpg" style="mix-blend-mode: darken;"/></div>
<p>lighten变亮</p>
<div><img src="test.jpg" style="mix-blend-mode: lighten;"/></div>
<p>color-dodge颜色减淡模式</p>
<div><img src="test.jpg" style="mix-blend-mode: color-dodge;"/></div>
<p>color-burn颜色加深</p>
<div><img src="test.jpg" style="mix-blend-mode: color-burn;"/></div>
<p>hard-light强光</p>
<div><img src="test.jpg" style="mix-blend-mode: hard-light;"/></div>
<p>soft-light柔光</p>
<div><img src="test.jpg" style="mix-blend-mode: soft-light;"/></div>
<p>difference差值</p>
<div><img src="test.jpg" style="mix-blend-mode: difference;"/></div>
<p>exclusion排除</p>
<div><img src="test.jpg" style="mix-blend-mode: exclusion;"/></div>
<p>hue色相</p>
<div><img src="test.jpg" style="mix-blend-mode: hue;"/></div>
<p>saturation饱和度</p>
<div><img src="test.jpg" style="mix-blend-mode: saturation;"/></div>
<p>color颜色</p>
<div><img src="test.jpg" style="mix-blend-mode: color;"/></div>
<p>luminosity亮度</p>
<div><img src="test.jpg" style="mix-blend-mode: luminosity;"/></div>
</body>
</html>
текущий результат
20. Резюме
Что ж, новые возможности css3, которые я описал лично, уже здесь! Некоторые из этих новых функций должны быть поняты и хорошо отработаны, если вы хотите использовать их правильно. Некоторые новые функции, если вы хотите рассказать об этом подробно, такие как анимация, переход, эластичная рамка, градиент и т. д. Подсчитано, что можно написать несколько или дюжину статей! Особенно анимация, подсчитано, что книгу можно написать! Приведенные выше объяснения и примеры новых возможностей css3 — это базовое понимание и использование, в надежде сыграть роль в расширении мышления. Самое главное, что каждый должен больше практиковаться Практическая работа - самая важная часть, и это то, что делает совершенным! CSS3 нужно не только использовать, но и правильно использовать, правильное использование CSS3 очень помогает в разработке проекта! Конечно, если я найду что-то интересное и полезное, я продолжу писать статьи.
Наконец, если вы чувствуете, что я написал что-то не так, написал плохо или у вас есть предложения! Добро пожаловать, чтобы дать указатели!
------------------------- Великолепная разделительная линия --------------------
Хотите узнать больше, обратите внимание на мой публичный аккаунт WeChat: В ожидании книжного магазина