cSS3主题的文章列表，还有cSS3的技术要点_第19页

css3常用动画样式文件move.css

move.csszoomIn zoomInDownouter-circlearrowTopexpandOpenfadeIn fadeInNormal fadeInUp fadeInRight fadeInDown ...

代码星球 ·2020-05-23

（转）详解css3弹性盒模型（Flexbox)

今天刚学了css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩...

代码星球 ·2020-05-23

css3动画效果

css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate旋转：（rotate）[css]viewplaincopy-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);tr...

代码星球 ·2020-05-23

css3 white-space: nowrap 实现横向滚动

css3white-space:nowrap实现横向滚动 <divcolor:#800000;">"width:600px;height:100px;white-space:nowrap;overflow:auto;font-size:0;"><divcolor:#800000;">"wid...

代码星球 ·2020-05-23

css3 flex弹性盒自动铺满写法

<styletype="text/css">.flexcontainer{width:100%;height:100%;position:absolute;left:0px;top:0px;display:flex;flex-direction:column;}.flex1{width:100%;heigh...

代码星球 ·2020-05-23

css3 用混合模式要注意的问题

css3用混合模式要注意的问题.p2_2{width:78.133%;height:2.795rem;background:url('/uploadpic/xiangmu/zhongyibaoming/images/2/p2_2.png')no-repeat,url(/dahuajushi/images/2/p2_bg...

代码星球 ·2020-05-23

css3 rem手机自适应框架

css3rem手机自适应框架rem是按照html的字体大小来所以不同宽度浏览器htmlfont-size不一样就可以做到自适应了此方法比百分比方便<pre><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"...

代码星球 ·2020-05-23

CSS3 clip裁剪动画

CSS3clip裁剪动画下面是比较简单的例子<pre><html><head><styletype="text/css">img{position:absolute;clip:rect(0px120px151px0px);animation:clipMe5slineari...

代码星球 ·2020-05-23

CSS3 滤镜Filter亮度动画

CSS3滤镜Filter亮度动画-webkit-filter:brightness值越高亮度越亮<pre><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title<...

代码星球 ·2020-05-23

CSS3倒影效果

比较简单的倒影效果<pre><divclass="box-reflect"><imgsrc="http://www.51dev.com//FileUpload/news/202005/20200523141828378.png"height="200"/></div>.b...

代码星球 ·2020-05-23

CSS3幸运大转盘最简单的写法

点击开始直接css动画如果你要自己控制转到哪里那就多写几个class根据不同角度运行不同的class。。<pre>.zhuandong{animation:zhuandong5sease-in-outforwards;-webkit-animation:zhuandong5sease-in-outforwa...

代码星球 ·2020-05-23

CSS3做动物走路效果

CSS3做动物走路效果采用的CSS3切换序列帧做核心代码如下<pre>.game.role{width:60px;height:86px;position:absolute;top:-83px;background-image:url(../images/role5.png);background-repe...

代码星球 ·2020-05-23

CSS3手机端字体不能小于12号的方法

CSS3手机端字体不能小于12号的方法<pre>.xiaoyu12fontsize{-webkit-transform-origin:0%0%;-webkit-transform:scale(0.8);}</pre>...

代码星球 ·2020-05-23

css3自定义上传图片输入框的方法

css3自定义上传图片输入框的方法代码如下<pre><formclass="form1"><imgsrc="/kelatoupiao/images/p6/p6_wz1.png"class="p6_wz1"><inputtype="file"name="file_temporar...

代码星球 ·2020-05-23

CSS3rem自适应

CSS3rem自适应如果外层背景是width:100%;height:100%;拉伸的背景那top必须要用百分比才能保证跟背景结合如果外层背景是width:100%;自适应宽度的背景那top必须要用rem才能保证跟背景结合<pre>/*rem跟百分比效果是一样的因为屏幕缩放比率和字体大小缩放必须是一致的*/...

代码星球 ·2020-05-23