动画 过渡 渐变 文本效果 多媒体查询
Posted wxy0715
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动画 过渡 渐变 文本效果 多媒体查询相关的知识，希望对你有一定的参考价值。
动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width:100px; height:100px; background:red; animation:myfirst 1s; -webkit-animation:myfirst 1s; /* Safari and Chrome */ } @keyframes myfirst { from {background:red;} to {background:yellow;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:red;} to {background:yellow;} } /* @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari 与 Chrome { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } */ </style> </head> <body> <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p> <div></div> </body> </html> <!-- @keyframes 规则是创建动画 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式 @keyframes myfirst { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 与 Chrome */ { from {background: red;} to {background: yellow;} } @keyframes 可以是百分比 规定动画。 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name 规定 @keyframes 动画的名称。 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 animation-timing-function 规定动画的速度曲线。默认是 "ease"。linaer匀速 animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 animation-delay 规定画何时开始。默认是 0。 animation-iteration-count 规定动画被播放的次数。默认是 1。 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 -->
过渡
<!-- 1. 应用于宽度属性的过渡效果，时长为 2 秒： div { transition: width 2s; -webkit-transition: width 2s; /* Safari */ } transition 简写属性，用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 值 描述 linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 transition-delay 规定过渡效果何时开始。默认是 0。 简写:transition:left 2s liner 0s;(属性名称,过渡时间,时间函数,延迟) 全部添加 all 效率低下 -->
渐变
<!-- 从上向下默认 从左向右 to # 对角 to bottom right 角度 逆时针 deg单位 透明度 transparent background: linear-gradient(to right, rgba(255,0,0,0.5), rgba(255,0,0,1)); 重复的线性渐变 background: repeating-linear-gradient(red, yellow 10%, green 20%) 径向渐变 background: radial-gradient(center, shape size, start-color, ..., last-color); 设置形状 background: radial-gradient(circle, red, yellow, green); 重复的径向渐变 background: repeating-radial-gradient(red, yellow 10%, green 15%) size 参数定义了渐变的大小。它可以是以下四个值： closest-side farthest-side closest-corner farthest-corner -->
文本效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <style> #boxshadow { position: relative; -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5); -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); padding: 10px; background: white; } /* Make the image fit the box */ #boxshadow img { width: 100%; border: 1px solid #8a4419; border-style: inset; } #boxshadow::after { content: ‘‘; position: absolute; z-index: -1; /* hide shadow behind image */ -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%; left: 15%; /* one half of the remaining 30% */ height: 100px; bottom: 0; } </style> </head> <body> <div id="boxshadow"> <img src="./../../../数据库//图片//png图片//百度新闻.png" alt="Norway" width="600" height="400"> </div> </body> </html> <!-- 1.文本阴影:text-shadow:offsetX offsetY blur color CSS3 中 CSS3 box-shadow 属性适用于盒子阴影 实例 div { box-shadow: 10px 10px 5px #888888; } hanging-punctuation 规定标点字符是否位于线框之外。 punctuation-trim 规定是否对标点字符进行修剪。 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 text-outline 规定文本的轮廓。 text-overflow 规定当文本溢出包含元素时发生的事情。 text-shadow 向文本添加阴影。 text-wrap 规定文本的换行规则。 word-break 规定非中日韩文本的换行规则。 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 -->
多媒体查询
1 <!-- 2 多媒体查询语法 3 @media not|only mediatype and (expressions) { 4 CSS 代码...; 5 } 6 not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备） 7 only: 用来定某种特别的媒体类型 8 all: 所有设备，这个应该经常看到。 9 10 CSS3 多媒体类型 11 all用于所有多媒体类型设备 12 print用于打印机 13 screen用于电脑屏幕，平板，智能手机等。 14 speech用于屏幕阅读器
以上是关于动画 过渡 渐变 文本效果 多媒体查询的主要内容，如果未能解决你的问题，请参考以下文章