沈阳网站制作教学,wordpress土豆,包装建设网站,智能科普网站平台建设方案目录 内容回顾#xff1a;
1.常见样式
2.特殊样式
特殊样式
过滤效果
动画效果
动画案例#xff1a;
渐变效果
其他效果#xff1a;
多列效果
字体图标#xff08;icon#xff09; 内容回顾#xff1a;
1.常见样式 text-shadow x轴 y轴 阴影的模糊程度 阴影的…目录 内容回顾
1.常见样式
2.特殊样式
特殊样式
过滤效果
动画效果
动画案例
渐变效果
其他效果
多列效果
字体图标icon 内容回顾
1.常见样式 text-shadow x轴 y轴 阴影的模糊程度 阴影的颜色 box-shadow border-radio 实现圆角 margin 内边距 padding 外边距 background
2.特殊样式 媒体查询media 自定义字体font-face { font-family:自定义名称 srcurl“字体的路径” } 选择{ font-family自定义名称 } 转换transform 移动translate 旋转rotate 缩放scale 翻转skew 综合matrix 特殊样式 过滤效果
从一个状态变为另一个状态的过程要想有过滤效果我们就需要又触发条件通常触发的条件为鼠标移动到元素上hover。
单项过渡 多项过渡 transition这个属性的值 !DOCTYPE html
html langen
head meta charsetUTF-8 title过渡效果比较/title style .box { width: 200px; height: 200px; background-color: #317FE5; /*transition: width 5s ease 2s;*/ /*transition: width 3s linear;*/ /*transition: width 3s ease-in;*/ /*transition: width 3s ease-in-out;*/ transition: width 3s ease-out; } .box:hover { width: 500px; } /style
/head
body
div classbox/div
/body
/html 动画效果
在CSS3中提供了基于CSS动画效果我们需要先定义动画然后再使用动画。
定义动画使用keyframes从而使用动画animate !DOCTYPE html
html langen
head meta charsetUTF-8 title动画效果/title style /*.box {*/ /* width: 200px;*/ /* height: 200px;*/ /* background: #317FE5;*/ /* transition: transform 2s;*/ /*}*/ /*.box:hover {*/ /* transform: translateX(100px);*/ /*}*/ /* 定义动画 */ keyframes myAnimate { from { left: 5px; background: #317FE5; } to { left: 500px; background: red; } } .box { width: 200px; height: 200px; background: #317FE5; animation: myAnimate 5s; position: absolute; left: 5px; top: 5px; } /style
/head
body
div classbox/div
/body
/html 另一个效果
!DOCTYPE html
html langen
head meta charsetUTF-8 title动画效果/title style /* 定义动画 */ keyframes myAnimate { 0% { left: 5px; top: 5px; } 25% { left: 500px; top: 5px; } 50% { left: 500px; top: 200px; } 75% { left: 5px; top: 200px; } 100% { left: 5px; top: 5px; } } .box { width: 200px; height: 200px; background: #317FE5; animation: myAnimate 5s; position: absolute; left: 5px; top: 5px; } /style
/head
body
div classbox/div
/body
/html 动画属性 属性 描述 值 keyframes 规定动画。指定 css样式 animation 所有动画属性的简写属性除了 animation-play-state 属性。 动画名称 animation-name 规定 keyframes 动画的名称。 动画名称 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 数值 animation-timing-function 规定动画的速度曲线。默认是 ease。 ease-in-out、linear、ease、ease-in、ease-out animation-delay 规定动画何时开始。默认是 0。 数值 animation-iteration-count 规定动画被播放的次数。默认是 1。 数值或者infinite animation-direction 规定动画是否在下一周期逆向地播放。默认是 normal。 normal、alternate animation-play-state 规定动画是否正在运行或暂停。默认是 running。 paused、running animation-fill-mode 规定对象动画时间之外的状态。 none、forwards、backwards、both !DOCTYPE html
html langen
head meta charsetUTF-8 title动画属性介绍/title style .box { width: 200px; height: 200px; background: #317FE5; position: absolute; top: 5px; left: 5px; /*animation: myMove 5s;*/ /* 指定动画名称 */ /*animation-name: myMove;*/ /* 定义动画持续时间单位是秒或毫秒 */ /*animation-duration: 3s;*/ /* 定义动画执行的效果 */ /*animation-timing-function: ease-in;*/ /* 定义动画执行次数默认为 1 次如果希望无限次则值为 infinite */ /*animation-iteration-count: infinite;*/ /*animation-iteration-count: 1;*/ /* 定义动画的运行方向 */ /*animation-direction: alternate-reverse;*/ /*animation-direction: alternate;*/ /*animation-play-state: paused;*/ animation: myMove 3s ease-in infinite alternate; } keyframes myMove { from { /*background: #317FE5;*/ left: 5px; top: 5px; } to { /*background: red;*/ left: 200px; top: 5px; } } /style
/head
body
div classbox/div
/body
/html 动画案例
定义两个圆一个圆逆时针旋转另一个圆顺时针旋转。
下图是定义分析 !DOCTYPE html
html langen
head meta charsetUTF-8 title动画的案例/title style .outer { width: 300px; height: 300px; background: url(image/5.jpeg) no-repeat center center; overflow: hidden; border-radius: 50%; /*transform: translateY(50%);*/ position: absolute; left: 50%; top: 50%; margin-top: -150px; margin-left: -150px; animation: outerAnimate 5s linear infinite; } .inner { width: 200px; height: 200px; background: url(image/7.jpeg) no-repeat center center; /*transform: translate(25%, 25%);*/ border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; animation: innerAnimate 3s linear infinite; } keyframes outerAnimate { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } keyframes innerAnimate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /style
/head
body
div classouter div classinner/div
/div
/body
/html 渐变效果
在CSS3中提供了可以让两种或多种颜色之间的显示平稳过渡。我们只需要使用background-image:linear-gradients 属性指定即可。它的语法为 简单示例 其他效果
!DOCTYPE html
html langen
head meta charsetUTF-8 title渐变效果2/title style .box { width: 300px; height: 300px; margin: 50px auto; border: 1px solid #333333; border-radius: 50%; /* 可以指定渐变的角度 */ /*background-image: linear-gradient(180deg, #ff0000, yellow);*/ /* 可以指定渐变的透明度 */ /*background-image: linear-gradient(to right, rgba(255,0,0,.5), rgba(255, 255, 0, 0.5));*/ /* 重复的线性渐变 */ /*background-image: linear-gradient(red, yellow 10%, green 20%);*/ /* 径向渐变 */ background-image: radial-gradient(red, yellow); } /style
/head
body
div classbox/div
/body
/html 多列效果
在CSS3中提供了将文本内容设计成像报纸一样的多列布局。 !DOCTYPE html
html langen
head meta charsetUTF-8 title多列效果/title style .box { column-count: 3; } /style
/head
body
h1下面的数据呈现3列展示/h1
div classbox “当我年轻的时候我梦想改变这个世界当我成熟以后我发现我不能够改变这个世界我将目光缩短了些决定只改变我的国家当我进入暮年以后我发现我不能够改变我们的国家我的最后愿望仅仅是改变一下我的家庭但是这也不可能。当我现在躺在床上行将就木时我突然意识到如果一开始我仅仅去改变我自己然后我可能改变我的家庭在家人的帮助和鼓励下我可能为国家做一些事情然后谁知道呢?我甚至可能改变这个世界。”
/div
/body
/html 字体图标icon 阿里 有阿里图标库 可在里面进行下载图标和代码 百度搜索阿里图标库即可找到
