Сердце образный
Использование спектрально-происхождения набор атрибутов точки для достижения другого происхождения
1, элементы изменить точку преобразования происхождения (преобразование координат, является модификацией начала координат, точка начала является элементом о вращении или деформации)
Примечание: Это свойство только играет роль в определении преобразования свойства времени;
Если дело не установлено, то по умолчанию указать элементы своего центрального расположения. Т.е., преобразование без использования преобразования происхождения атрибут поворота, сдвига, масштабирование, наклон, матричные операции, основанные на центральной позиции себя в качестве начала координат.
преобразование координат Использование
** 语法: -moz-преобразование происхождения: [| | влево | центр | право] [| | топ | центр | низ ] **
преобразование координат значение атрибута может быть процентом от определенного значения, эм, рха и тому подобного, может быть сверху, справа, снизу, слева, и поэтому ключевой центр.
2D модификация атрибута преобразования-источник может быть одним из значений параметров, значение параметров может быть два. Если два значения параметра, первое значение в горизонтальном положении направления оси Х, второе значение используется для установки вертикального положения в направлении оси Y..
3D свойство деформации преобразования координат в дополнительно содержит третье значение оси Z. Его значение соответствующие значения можно кратко описать следующим образом:
- сверху = верхний центр = центр верхнего эквивалентно 50% 0
- вправо = правый центральный = справа от центра эквивалента, или 100% (100% до 50%)
- ** снизу = нижний центральный = центр дна ** эквивалентно 50% до 100%
- слева = левый центральный = левый центр эквивалентен или 0 (50% 0)
- Центр = центр центр эквивалентен или 50% ( от 50% до 50%)
- верхний левый = левый верхний эквивалентно 00
- правый верхний = верхний правый эквивалентно 100% 0
- нижний правый = правый нижний эквивалентен 100% 100%
- внизу слева = слева снизу эквивалентно 0 100%
слева, справа от центра по горизонтали значения направления, соответствующее значение процентиля влево = 0%; центр = 50%, справа = 100%
верхний центр нижних значений в вертикальном направлении, в котором верхний = 0%; центр = 50%; снизу = 100%;
Если только принимает значение, представляющее ту же величину в вертикальном направлении.
Использование: до и: после того, как псевдо добавить элемент контента;
преобразовании координат имущественная поддержка в браузере не особенно высока, поэтому не забудьте добавить префикс
Позиционирование положение: относительное и абсолютное
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
.xin{
width:90px;
height:80px;
position:relative;
margin:100px auto;
background-color:#99f;
}
.xin:before{
content:" ";
position:absolute;
width:45px;
height:70px;
background-color:#f99;
border-radius: 50px 50px 0 0;
-webkit-transform-origin:0 100% ;
-ms-transform-origin:0 100% ;
-o-transform-origin:0 100% ;
transform-origin:0 100% ;
/*定义原点*/
transform:rotate(-45deg);
left:45px;
}
.xin:after{
content:" ";
position:absolute;
width:45px;
height:70px;
background-color:#9f9;
border-radius: 50px 50px 0 0;
-webkit-transform-origin:100% 100% ;
-ms-transform-origin:100% 100% ;
-o-transform-origin:100% 100% ;
transform-origin:100% 100% ;
/*定义原点，设置原点的时候一定要加前缀，浏览器支持*/
transform:rotate(45deg);
right:45px;
}
</style>
</head>
<body>
<div class="xin"></div>
</body>
</html>
Во-вторых, бьющееся сердце
Выше описано , как использовать CSS , чтобы сделать форму сердца, если вы хотите достичь бьющегося сердца, нужно только добавить анимации анимации может
В форме сердца тень вокруг использует фильтр фильтры свойств
Фильтр: раскрывающаяся тень (0px 0px 20px RGB (255,20,20));
фильтр属性中的раскрывающейся тени ( ч-тень v-тень размытие распространение цвета )
** достижения результатов: ** установить эффект тени к изображению.
Синтетическая тень ниже изображений, может быть двусмысленности, фиги сдвинуты вариант маски может быть обращена на определенный цвет. Функция принимает значение (определенное в фоновом режиме CSS3) типа, в дополнение к ** «углубленные» ** ключевые слова не допускаются. Эта функция аналогична обычному коробчатого теневой собственности;
Разница заключается в том, что, через фильтр фильтры, некоторые браузеры для повышения производительности обеспечивает аппаратное ускорение.
на левом элементе появляется ** ч-тень ** горизонтальная тень, падающая тень;
V-тень затенение в вертикальном направлении, падение появляется над элементом тень; ( H-тень , ** ** V-тень устанавливается после значения 0 , если тень будет появляться только позади элемента)
размытие размытого расстояния, тем больше значения, тем более размытого, тень становится больше и светлее. не допускает отрицательное значение , если не задан, по умолчанию 0 (граница тени очень острая)
распространять положительную тень будет расширяться и становиться больше, отрицательная тень будет уменьшена. Если не задано, по умолчанию 0 (тень будет иметь тот же размер , как элемент)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
.xin{
width:90px;
height:80px;
position:relative;
margin:100px auto;
/*background-color:#99f;*/
animation: test 1s linear infinite;
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
}
.xin:before{
content:" ";
position:absolute;
width:45px;
height:70px;
background-color:red;
border-radius: 200px 200px 0 0;
-webkit-transform-origin:0 100% ;
-ms-transform-origin:0 100% ;
-o-transform-origin:0 100% ;
transform-origin:0 100% ;
/*定义原点*/
transform:rotate(-45deg);
left:45px;
}
.xin:after{
content:" ";
position:absolute;
width:45px;
height:70px;
background-color:red;
border-radius: 200px 200px 0 0;
-webkit-transform-origin:100% 100% ;
-ms-transform-origin:100% 100% ;
-o-transform-origin:100% 100% ;
transform-origin:100% 100% ;
/*定义原点，设置原点的时候一定要加前缀，浏览器支持*/
transform:rotate(45deg);
/*right:45px;*/
}
@keyframes test{
0%{
transform: scale(0.8,0.8);
opacity: 1;
}
25%{
transform: scale(1,1);
opacity: 0.8;
}
100%{
transform: scale(0.8,0.8);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="xin"></div>
</body>
</html>
Программирование шестого года, чтобы поделиться с вами некоторыми из метода обучения, борьба развития необходимо обращать внимание на деталь. 767-273-102 платье осени. От нуля на основе переднего конца , чтобы узнать , как начать. Чтобы увидеть , как предшественники гордо вперед в мире программирования! Постоянно обновляется с последними учебными пособиями и методами обучения (веб - передний конец системы , чтобы узнать маршрут, подробный переднего конец проект боевой обучающее видео), я хотел научиться веб - передний конец, или сменить место работы, или студент колледжа, а также работу требуется обновить свои навыки, является изучение малых партнеров приглашаются присоединиться. Мы будем идти вместе с передним кончиком наконечника
В-третьих, яйцевидный
границы радиуса используется / размеры рамы предусмотрены Х-оси и Y-ось
По часовой стрелке, верхний левый - правый верхний - нижний правый - левый нижний
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
.egg{
width:126px;
height:180px;
background-color:#fa3;
margin:100px auto;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>
</head>
<body>
<div class="egg"></div>
</body>
</html>