web前端（颜色、动画） web前端：颜色、动画

元素显示和隐藏：

Title - 锐客网.box { width:150px; height:40px; background-color: #cccccc; text-align: center; color:#eeeeee; line-height: 40px; /*鼠标样式：cursop*/ cursor: pointer; position: relative; } img { /*定位和浮动会把块级元素和行内元素均转化为行内块*/ position: absolute; left:150px; top:0px; display: none; } .box:hover img { /*显示属性 display：block*/ display: block; } 我的京东文章图片

动画：

$美少女战士$ - 锐客网/*animation所有动画属性的简写属性，除了 animation-play-state 属性。3 animation-name规定 @keyframes 动画的名称。3 animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3 animation-timing-function规定动画的速度曲线。默认是 "ease"。3 animation-delay规定动画何时开始。默认是 0。3 animation-iteration-count规定动画被播放的次数。默认是 1。3次infinite 无限 animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。alternate反向播放 animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3 animation-fill-mode 规定对象动画时间之外的状态。*/ .box { width: 200px; height: 200px; background-color: skyblue; /*动画先定义后使用*/ /*动画属性 animation:动画名字动画持续时间s延时时间 s运动曲线往返运动 */animation: ani10s 2s linear infinite alternate ; }@keyframes ani { /*0% 最初 20% 50% 75%100% 最终 */ 0% { background-color: #a71d5d; } 20% { border-radius: 30px; border: 2px solid black; } 50% { transform: translateX(400px); border-radius: 50%; } 100% { opacity: 0.3; }}

动画--过渡：

Title - 锐客网.box { width:200px; height:200px; background-color: red; border-radius: 50%; position: absolute; left:0; top:0; transition: all 5s linear 2s; } .box:hover{ width:30px; border-radius: 50%; }

变形：

Title - 锐客网.box { width:200px; height:200px; } /*变形 transform 所有变形均以中心点为原点变形 1：平移 translate 2：缩放 scale 3：倾斜 skew 4：旋转 rotate 所有变形均会回到最初状态*/ .box1 { background-color: orangered; transition: transform 5s linear 0s; } .box1:hover { transform: translateX(400px); } .box2 { background-color: #00a4ff; transition: transform 2s linear 0s; } .box2:hover{ transform: scale(0.5); /*大于1就是变大*/ } .box3 { background-color: mediumvioletred; transition: transform 2s linear 0s; } .box3:hover { transform:skew(45deg) ; /*正数为逆时针*/ } .box4 { background-color: yellow; transition: transform 2s linear 0s; } .box4:hover { transform:rotateX(45deg) ; /*正数为逆时针*/ }

显示和隐藏：

Title - 锐客网.box { width:200px; height:100px; border:5px double red; /*overflow: hidden; */ /*overflow: scroll; */ overflow: auto; }sdasdsaaaaaaadddddddddddddddasdsa sdsafdghfsxcvrxscxwq dsafgdsfsafdsa dsadv ad a a a a a a s fs f d ew

盒子阴影：

Title - 锐客网.box { width:300px; height:200px; margin:100px auto; background-color: white; font-size: 50px; text-align: center; line-height: 200px; } .box:hover { box-shadow:0 0 10px 0 rgba(233,34,45,0.5) inset; text-shadow: 0px 0px 10px rgba(233,34,45,0.5); } /*盒子阴影：box.shadow 水平阴影的尺寸 h-shadow 垂直阴影的尺寸 v-shadow 阴影的模糊距离 spread 阴影的尺寸 px 阴影的颜色 rgba（）内外阴影外（outside默认）内（inside）*/文字阴影

颜色表示法：

Title - 锐客网body { background-color: gray; } .box { position: relative; width:200px; height:200px; /*6位16进制，每2位为一组*/ /*background-color: #ff00ff; */ background-color: rgb(255,0,255); margin:0 auto; /*a alpha 透明度0-1的一位小数 0全透明，1不透明*/ /*background-color: rgba(255,0,255,0.5); */ /*rgba指的是背景透明*/ opacity: 0.4; /*opacity:背景内容都透明*/ }

【web前端（颜色、动画）】
黄色弹球：

Title - 锐客网.box { width:200px; height:200px; border-radius: 50%; background-color: yellow; animation: ani 8s linear infinite alternate } @keyframes ani { 0% { margin-top:0; margin-left:0; } 25% { margin-top:400px; margin-left:300px; } 50% { margin-top:0; margin-left:600px; } 75% { margin-top:400px; margin-left:900px; } 100% { margin-top:0; margin-left:1200px; } }