H5学习笔记10 变换 动画属性 动画原点 径向渐变 重复性渐变 过度 目标伪类 以及简单搜索栏写法
变换
1 <style>
2 div{
3 width: 400px;
4 height: 400px;
5 border:5px solid #f00;
6 overflow: hidden;
7 }
8 div img{
9 width: 100%;
10 height: 100%;
11 /* 谁变换了 给谁加过渡时间 */
12 transition: 2s;
13 }
14 div:hover img{ /* 鼠标滑过div img变 */
15 /* 1、变换 缩放 */
16 transform: scale(2);
17 transform: scaleX(2);
18 transform: scaleY(2);
19 /* 2、变换 旋转 单位 deg */
20 transform: rotate(360deg);
21 /* 3、 变换 拉伸 单位 deg */
22 transform: skew(45deg);
23
24 /* 我不仅想要变大 还想要旋转 */
25 transform: scale(-2) rotate(200deg);
26 }
27
28 p{
29 width: 500px;
30 border:10px solid #0f0;
31 overflow: hidden;
32 }
33 img{
34 /* 让谁变换 给谁加过渡时间 */
35 transition: 2s;
36 }
37 p:hover img{
38 /* 变换 位移 单位px */
39 transform: translate(-400px);
40 }
41 </style>
42 </head>
43 <body>
44 <div>
45 <img src="../images/s0.jpg" alt="">
46 </div>
47
48 <p>
49 <img src="../images/c.jpg" alt="">
50 </p>
51 </body>
动画的属性
1 <style>
2 *{
3 margin:0;
4 padding:0;
5 }
6 html,body{
7 height: 100%;
8 }
9 body{
10 /* 1、动画名字 */
11 animation-name: demo;
12
13 /* 2、动画时间 */
14 animation-duration: 2s;
15
16 /* 3、动画延迟 */
17 /* animation-delay: 2s; */
18
19 /* 4、动画次数 常用无限次infinite */
20 animation-iteration-count: infinite;
21 /* animation-iteration-count: 2; */
22
23 /* 5、动画运动方向 animation-direction: 运动方向; */
24 /* animation-direction: normal; 从开始到结束是一次 再从开始到结束是第二次 */
25 /* animation-direction: alternate;从开始到结束是一次 再从结束到开始是第二次 */
26 /* animation-direction: reverse; 反着来 从结束到开始是一次 再从结束到开始是一次是第二次 */
27 /* animation-direction: alternate-reverse;从结束到开始是一次 再从开始到结束是第二次 */
28
29 /* 6、动画结束的状态 动画结束那一刹那的状态*/
30 /* animation-fill-mode: forwards; 结束的状态 为100%的状态*/
31 /* animation-fill-mode: backwards; 倒放时 结束的状态为0%的状态 */
32 animation-fill-mode: both;
33
34 /* 7、很重要！！！ 动画运动函数 */
35 animation-timing-function: linear;
36
37 /* 动画简写 */
38 /* animation: name duration timing-function delay iteration-count direction fill-mode;
39 animation: 动画名字 动画时长 动画运动函数 延迟 动画次数 动画方向 动画结束状态; */
40
41
42 }
43
44 /* 鼠标滑过 动画暂停 */
45 body:hover{
46 /* 动画暂停 */
47 /* animation-play-state: running;默认值 运行 */
48 animation-play-state: paused; /* 暂停 */
49 }
50 /* 创建动画----关键帧 */
51 @keyframes demo{
52 0%{background: red;}
53 30%{background: yellow;}
54 60%{background:green;}
55 100%{background: #000;}
56 }
57 </style>
动画原点
1 <style>
2 div{
3 width: 400px;
4 height: 400px;
5 background: red;
6 margin:0 auto;
7 /* 过渡时间 */
8 transition: 2s;
9 /* 更改动画原点 默认是元素的中心 */
10 /* transform-origin:水平位置 垂直位置; */
11 transform-origin: right center;
12 }
13 div:hover{
14 transform: scaleX(2);
15 }
16 </style>
17 </head>
18 <body>
19
20 <div></div>
21 </body>
动画调用
1 <style>
2 div{
3 width: 200px;
4 height: 200px;
5 background: red;
6 /* 动画调用 */
7
8 animation-name: gouzi;
9 animation-duration: 5s;
10 }
11 p{
12 width: 10px;
13 height: 50px;
14 /* 动画调用 */
15 animation-name: gouzi;
16 -ms-animation-name: gouzi;
17 -o-animation-name: gouzi;
18 -moz-animation-name: gouzi;
19 -webkit-animation-name: gouzi;
20 animation-duration: 5s;
21 }
22 /* 动画有三要素：关键帧@keyframes 动画名字 动画过渡时间 */
23 @keyframes gouzi{
24 0%{width: 200px;background: #f00;}
25 20%{width: 700px;background: #d89;}
26 47%{width: 500px;background: #7df;}
27 68%{width: 800px;background: #0a4;}
28 83%{width: 400px;background: #b4a;}
29 100%{width: 900px;background: #701;}
30 }
31 </style>
32 </head>
33 <body>
34 <div></div>
35 <p></p>
36 </body>
37 <!--
38 transition结合transform几乎可以做所有的变化效果了；为什么还要学animation动画呢？
39
40 首先
41 1、transition结合transform需要事件触发(鼠标滑过才有效果的)；不能自己实现
42
43 2、transition结合transform 他的生命周期只有一次 你想多次实现 只能 多次触发
44
45 3、transition结合transform只能写出从开始到结束的状态修饰 对于过程不能进行修饰(我们可以从红色变成黄色 但是我们做不到红--黑--白---黄--绿)
46
47 4、transition结合transform不可以复用 你是给谁添加的 谁才有效果
48
49 综上所述 animation都可以做到 所以我们需要他 -->
径向渐变
1 <style>
2 div{
3 width: 800px;
4 height: 400px;
5 /* 径向渐变 */
6 /* background: radial-gradient(red,yellow); */
7 background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue);
8 background: -moz-radial-gradient(50% 50%, farthest-corner, red, green, blue);
9 background: -ms-radial-gradient(50% 50%, farthest-corner, red, green, blue);
10 background: -o-radial-gradient(50% 50%, farthest-corner, red, green, blue);
11 background: radial-gradient(50% 50%, farthest-corner, red, green, blue);
12
13 background: radial-gradient(circle, red, yellow, green);
14 background: radial-gradient(ellipse, red, yellow, green);
15 }
16 </style>
17 </head>
18 <body>
19 <div></div>
20 </body>
重复性渐变
<style>
div{
width: 500px;
height: 500px;
border-radius: 50%;
/* 重复线性渐变 */
background: repeating-linear-gradient(red,yellow 10%,green 20%);
background: -o-repeating-linear-gradient(red,yellow 10%,green 20%);
background: -ms-repeating-linear-gradient(red,yellow 10%,green 20%);
background: -moz-repeating-linear-gradient(red,yellow 10%,green 20%);
background: -webkit-repeating-linear-gradient(red,yellow 10%,green 20%);
}
p{
width: 500px;
height: 500px;
border-radius: 50%;
/* 重复径向渐变 */
background: repeating-radial-gradient(red,yellow 10%,green 20%);
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
过度属性
1 <style>
2 div{
3 width: 400px;
4 height: 400px;
5 background:#0f0;
6 /* 1、过渡时间 */
7 transition-duration: 3s;
8 /* 2、过渡属性 默认是所有属性都缓慢过渡 */
9 /* transition-property: all; 默认值 所有属性都变 注意！！！！display无效*/
10 /* transition-property: background; 指定某一个属性缓慢过渡 */
11 transition-property: background,width;
12 transition-property: all;
13 /* 3、过渡延迟 */
14 transition-delay: 2s;
15 }
16 div:hover{
17 height: 600px;
18 width: 700px;
19 background: yellow;
20 }
21 p{
22 width: 100px;
23 height: 100px;
24 background: red;
25 /* 1、过渡时间 */
26 transition-duration: 3s;
27 /* 2、过渡属性 默认就是所有属性可以过渡(display失效) */
28 /* transition-property: all; */
29 /* 3、延迟 */
30 transition-delay: 0.5s;
31 /* 4、运动函数 快慢 */
32 /* transition-timing-function: ease;默认值 */
33 transition-timing-function: linear; /* 匀速 */
34 /* 简写： */
35 /* **简写**：transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型 */
36 transition:all 3s 0.5s linear;
37 }
38 p:hover{
39 width: 1800px;
40 }
41 </style>
42 </head>
43 <body>
44 <div></div>
45 <p></p>
46 </body>
target目标伪类
1 <style>
2 /* 被伪类点击的目标 有以下样式 */
3 div:target{
4 background: yellow;
5 color:red;
6 }
7 </style>
8 </head>
9 <body>
10 <a href="#box">我是枪</a>
11 <a href="#box1">我是刀</a>
12
13 <div id="box">我是目标</div>
14 <div id="box1">我是目标1</div>
15 </body>
阿里矢量图应用
1 <link rel="stylesheet" href="../../day3-4/css/reset.css">
2 <!-- 阿里矢量图的应用 要引入人家的CSS文件 -->
3 <link rel="stylesheet" href="../ergou/iconfont.css">
4 <style>
5 li:hover{
6 color:red;
7 }
8 li{
9 font-size: 40px;
10 }
11 /* 设置引入的阿里矢量图大小 */
12 /* 阿里矢量图样式设置跟文字一样 */
13 .iconfont{
14 font-size: 40px;
15 }
16 </style>
17 </head>
18 <body>
19 <ul>
20 <li><i class="iconfont icon-icons_all-"></i>母婴用品</li>
21 <li><i class="iconfont icon-baobao4"></i>母婴用品</li>
22 <li><i class="iconfont icon-dianhua"></i>母婴用品</li>
23 <li><i class="iconfont icon-kouhong1"></i>母婴用品</li>
24 <li><i class="iconfont icon-taobao"></i>母婴用品</li>
25 <li><i class="iconfont icon-xihuan"></i>母婴用品</li>
26 <li><i class="iconfont icon-yuer"></i>母婴用品</li>
27 <li><i class="iconfont icon-chuntianran"></i>母婴用品</li>
28 </ul>
29 </body>
简单搜索框的书写
1 <style>
2 *{ /* 首页搜索框的书写 */
3 margin:0;
4 padding:0;
5 }
6 input{
7 border:0; /* 先去除input和按钮的边框 */
8 outline: 0;
9 height: 50px; /* 统一input和button的高度 */
10 float: left;/* 必须左浮！！！ */
11 }
12 .ipt{
13 width: 500px;
14 background: red;
15 border-right: 1px solid #000;
16 }
17 .btn{
18 width: 80px;
19 background: red;
20 }
21 p{
22 /* 模拟边框 */
23 border:1px solid #000; /* 边框给父元素p设置 */
24 height: 50px; /* 高度和子元素input框一样 */
25 width: 587px;
26 background: red;
27 }
28 </style>
29 </head>
30 <body>
31 <p>
32 <input type="text" class="ipt">
33 <input type="button" class="btn">
34 </p>
35 </body>
浙公网安备 33010602011771号