随笔分类 -  css3动画

多行文本省略号
摘要：单行文本省略号 css 代码: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行文本省略 常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webki 阅读全文
posted @ 2018-06-29 17:07 园园张 阅读(139) 评论(0) 推荐(0)
css focus 选择器用于选取获得焦点的元素
摘要： 阅读全文
posted @ 2018-04-18 16:24 园园张 阅读(422) 评论(0) 推荐(0)
css:hover状态改变另一个元素样式的使用
摘要：css:hover状态改变另一个元素样式的使用 ：当hover的元素和需要改变样式的元素是父子关系的时候，可以这么写.father:hover .son{加上需要改变你的元素} 此时是hover div1容器，改变div2框的背景颜色，但发现div1和div2不是父子关系而是兄弟关系，这时候这样写（ 阅读全文
posted @ 2018-04-16 15:49 园园张 阅读(1102) 评论(0) 推荐(0)
css3动画从顶部慢慢下滑带背景色，从底部字体向上升起
摘要：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale= 阅读全文
posted @ 2018-04-12 18:42 园园张 阅读(5697) 评论(0) 推荐(0)
css3动画从底部自动上升
摘要：效果：红色的字和背景从底部慢慢升起代码<style> .father { width: 300px; height: 280px; border: 1px solid #ccc; margin: 50px auto; } .father img{ width: 300px; height: 200p 阅读全文
posted @ 2018-04-12 17:21 园园张 阅读(7607) 评论(0) 推荐(0)
css3动画从底部向上升
摘要：升起来前 升起来后 阅读全文
posted @ 2018-04-10 19:29 园园张 阅读(10158) 评论(0) 推荐(0)
侧边栏1
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } a{ text- 阅读全文
posted @ 2018-04-10 18:29 园园张 阅读(126) 评论(0) 推荐(0)
css3 放大scale
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,leg 阅读全文
posted @ 2018-04-07 15:40 园园张 阅读(254) 评论(0) 推荐(0)
css3skew
摘要：代码： 阅读全文
posted @ 2018-04-07 15:34 园园张 阅读(194) 评论(0) 推荐(0)
css3动画划过有一个框
摘要：css3动画：开始给图片加了个透明度opacity：0.9，给figure最外面容器加和图片颜色相近的背景色，比如这个加的是黑色，给div最开始加个旋转0度，划过360度，文字刚开始透明度0，划过透明度1 代码 阅读全文
posted @ 2018-04-04 16:59 园园张 阅读(250) 评论(0) 推荐(0)
translate 动画不同时间飞入文字
摘要：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset, 阅读全文
posted @ 2018-04-03 19:38 园园张 阅读(740) 评论(0) 推荐(0)
css3 动画无缝滚动
摘要：设置最外面的div小点，并且overflow：hidden，让ul足够大装满图片，放六张图，四张图一样，最后两张和前两张一样是为了防止会有跳动效果，让最后两张和前两张一样不会跳，-800px是左移4张 阅读全文
posted @ 2018-03-29 12:24 园园张 阅读(202) 评论(0) 推荐(0)
css3animation动画
摘要：animation-name: myfirst; animation-duration: 5s;动画时长 animation-timing-function: linear;运动轨迹是加速还是一直不变 animation-delay: 2s;多长时间后动画运动 animation-iteration 阅读全文
posted @ 2018-03-29 10:41 园园张 阅读(128) 评论(0) 推荐(0)