美丽阿坝网站怎么做,徐州手机网站制作,河北助手app下载,wordpress做多语言版目录 CSS3新特性圆角阴影动画keyframes 创建动画animation 执行动画timing-function 时间函数direction 播放方向过渡动画#xff08;transition#xff09; 媒体查询设置meta标签媒体查询语法 雪碧图字体图标 CSS3新特性
圆角
使用CSS3border-radius属性#xff0c;你可以… 目录 CSS3新特性圆角阴影动画keyframes 创建动画animation 执行动画timing-function 时间函数direction 播放方向过渡动画transition 媒体查询设置meta标签媒体查询语法 雪碧图字体图标 CSS3新特性
圆角
使用CSS3border-radius属性你可以给任何元素制作“圆角”。 border-radius属性可以使用以下规则
四个值第一个值为左上角第二个值为右上角第三个值为右下角第四个值为左下角。三个值第一个值为左上角第二个值同时应用于右上角和左下角第三个值为右下角 。两个值第一个值应用于左上角和右下角第二个值应用于右上角和左下角。一个值这个值会应用到元素的四个角使四个角的半径都相同。
div{width: 200px;height: 200px;background-color: rgb(252, 117, 6);border-radius: 56px;
}div{width: 200px;height: 100px;background-color: rgb(252, 117, 6);border-radius: 100px 100px 0 0;
}阴影
盒子阴影 box-shadow属性用于为元素添加盒子阴影 语法为box-shadow: h-shadow v-shadow blur spread color inset;。
属性描述h-shadow必需水平阴影的位置可以是正值阴影在元素右边或负值阴影在元素左边v-shadow必需垂直阴影的位置可以是正值阴影在元素下边或负值阴影在元素上边blur可选模糊距离值越大阴影越模糊spread可选阴影的扩展半径正值会使阴影扩大负值会使阴影缩小color可选阴影的颜色inset可选将外部阴影默认改为内部阴影
div{margin: 0 auto;width: 200px;height: 100px;background-color: rgb(252, 117, 6);border-radius: 56px;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}这里的margin: 0 auto;意思是外边距上下平均为0左右平均分配。
文本阴影text-shadow属性用于为文本添加阴影。语法为text-shadow: h-shadow v-shadow blur color; 。参数含义与box-shadow类似但没有spread和inset选项。
以下是将上述内容整理为表格和清晰段落的形式
渐变
一、线性渐变
函数linear-gradient()语法background: linear-gradient(direction, color-stop1, color-stop2,...);参数说明
参数描述direction指定渐变的方向默认值是 to bottom从上往下还可以是 to top从下往上、to right从左往右、to bottom right从左上角到右下角等color-stop1, color-stop2,...指定渐变的起止颜色及位置
div {width: 200px;height: 200px;background: linear-gradient(to bottom right, #7cfbea 0%, #7cdfd2 30%, #8767f0 50%, #ef89c6 70%, #fdb2df 100%);
}二、径向渐变
函数radial-gradient()语法background: radial-gradient(shape size at position, start-color,..., last-color);参数说明
参数描述示例shape指定渐变的形状circle 表示圆形ellipse 表示椭圆形默认值circlesize指定渐变的大小如 closest-side到最近边结束、farthest-corner到最远角结束等closest-sideat position指定渐变的中心位置例如 at 50% 50% 表示中心在元素的中心位置start-color,..., last-color指定渐变的起止颜色及位置background: radial-gradient(circle, yellow, green); 会创建一个以黄色为中心向四周渐变到绿色的圆形背景
div {width: 200px;height: 200px;background: radial-gradient(circle at 50% 0%, #feea33, #ff1616);
}动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。
keyframes 创建动画
基本语法keyframes animationName {from {/* 初始样式 */}to {/* 最终样式 */}
}或者使用百分比的形式keyframes animationName {0% {/* 初始样式 */}50% {/* 中间样式 */}100% {/* 最终样式 */}
}animation 执行动画
语法animation: name duration timing-function delay iteration-count direction fill-mode;参数说明
参数描述name必需指定 keyframes 中定义的动画名称duration必需动画持续时间可使用秒s或毫秒ms作为单位timing-function可选动画的时间函数控制动画速度曲线如 ease、linear、ease-in、ease-out、ease-in-out 等delay可选动画延迟开始的时间可使用秒s或毫秒ms作为单位iteration-count可选动画循环次数可以是具体数字或 infinite无限次direction可选动画播放方向如 normal正常方向、reverse反向、alternate交替、alternate-reverse反向交替fill-mode可选动画结束后的状态如 forwards停留在最后一帧、backwards停留在第一帧、both根据 animation-direction 决定animation-play-state控制动画的播放状态running 代表播放paused 代表停止播放
timing-function 时间函数
值描述ease动画开始和结束时速度较慢中间速度较快是默认值linear动画匀速播放ease-in动画开始时速度较慢然后逐渐加速ease-out动画开始时速度较快然后逐渐减速ease-in-out动画开始和结束时速度较慢中间速度较快
direction 播放方向
值描述normal动画按照正常方向播放即从 0% 到 100%reverse动画按照反向播放即从 100% 到 0%alternate动画在奇数次数正常播放从 0% 到 100%偶数次数反向播放从 100% 到 0%alternate-reverse动画在奇数次数反向播放从 100% 到 0%偶数次数正常播放从 0% 到 100%
div{width: 200px;height: 200px;animation:myAnimation 2s linear 0s infinite alternate;
}keyframes myAnimation {0%{background-color: blue;}50%{background-color: purple;}100%{background-color: aqua;}
}过渡动画transition
基本语法 .element { transition: property duration timing-function delay; }
其中property表示要发生变化的属性
div{margin-top:100px;width: 50px;height: 50px;background-color: #9f5aa9;transition: width 1s ease 0s , background 1s ease 1s;
}
div:hover {width: 300px;
}媒体查询
媒体查询能使页面在不同在终端设备下达到不同的效果 媒体查询会根据设备的大小自动识别加载不同的样式
设置meta标签
在head中添加meta nameviewport contentwidthdevice-width, initial-scale1.0,maximum-scale1.0,user-scalableno主要用于移动端页面布局。
widthdevice-width将页面宽度设为设备宽度initial-scale页面初始缩放比例(默认设置为1.0)maximum-scale允许用户缩放到的最大比例默认设置为1.0user-scalable用户是否可以手动缩放默认设置为no
媒体查询语法 .box {width: 300px;height: 300px;
}
media screen and (max-width: 768px) {.box {background-color: aqua;}
}
media screen and (min-width: 768px) and (max-width: 996px) {.box {background-color: green;}
}
media screen and (min-width: 996px) {.box {background-color: red;}
}上面的代码目的是在手机上显示出蓝色在平板上显示出绿色在电脑上显示出红色
雪碧图
雪碧图Sprite Sheet又称 CSS 精灵或图像精灵是一种网页优化技术。 原理 把多个小图像合并成一个大的图像文件。通过background-image引入背景图片 然后利用 background-position 属性把图片移动到自己需要的位置
使用场景 适用于页面中频繁出现多个小图标或图片元素的情况可减少 HTTP 请求提升页面加载速度。 对小型装饰元素如按钮的不同状态将其合并为雪碧图可方便实现状态切换。
实例
.icon1{display: block;width: 45px;height:45px;background: url(./1.png) no-repeat center center;border:1px solid black;background-position: -13px -13px;
}
.icon2{display: block;width: 45px;height:45px;background: url(./1.png) no-repeat center center;border:1px solid black;background-position: -84px -84px;
}span classicon1/span
span classicon2/span1.png为如上雪碧图 通过调整位置和大小显示出了两个表情
字体图标
我们会经常用到一些图标。但是我们在使用这些图标时往往会遇到失真的情况而且图片数量很多的话页面加载就越慢。所以我们可以使用字体图标的方式来显示图标既解决了失真的问题也解决了图片占用资源的问题 常用字体图标库阿里巴巴矢量图标库 使用字体图标
添加购物车下载代码选择font-class引用 打开所给的demo
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./font/iconfont.css
/head
bodyspan classiconfont icon-gun/span
/body
/html.icon-gun{font-size: 100px;color: red;
}可以改变他的大小颜色等
