background、转换、过渡

1.background
//----------------------------------
            background: url("CSS3%20DAY%2003/images/baby0.jpg") no-repeat;
            /*cover:不改变图片的比例,完全放大填充,溢出隐藏*/
            /*background-size: cover;*/
            /*contain:不改变图片的比例,放大到一边达到100%,另一个方向不管*/
            /*background-size: contain ;*/
            /*100% 100%:改变图片的比例,双边都放大到100%*/
            background-size: 100% 100%;
            
//---------------------------------

            /*背景原点:控制背景图从哪儿开始显示*/
            /*默认值,padding也有背景图*/
            /*background-origin: padding-box;*/
            /*边框开始有背景图*/
            /*background-origin: border-box;*/
            /*只有内容区域有背景图*/
            background-origin: content-box;
            
//----------------------------------

            /*背景裁切,不改变背景的位置*/
            background-clip: content-box;
            /*三个参数:padding-box,border-box,content-box*/
2.渐变
//----------------------------------

//linear-gradient()

            .s{
                /*标准写法*/
                /*linear-gradient表示线性渐变的意思*/
                /*括号里面两个参数,表示从黄色渐变到绿色*/
                background-image: linear-gradient(yellow,green);
            }
            /*多颜色线性渐变*/
            .s1{
                background-image: linear-gradient(red,orange,yellow,green,cyan);
            }
            /*渐变方向,默认都是从上往下,我们可以通过设置,来更改渐变的方向*/
            /*用角度确定方向*/
            .s2{
                background-image: linear-gradient(270deg,yellow,green);
            }   
            /*用关键字确定方向*/
            .s3{
                background-image: linear-gradient(to left top,yellow,green);
            }
            /*在渐变里面,可以通过百分比,控制渐变的起点*/
            /*下面这个,就是黄色从20%地方开始渐变,绿色从40%的地方开始渐变,
            如果百分比不到100%,那么,缺少的用纯颜色填充*/
            .s4{
                background-image: linear-gradient(90deg,yellow 20%,green 40%);
            }
            
            .s5{
                background-image: linear-gradient(90deg,yellow 40%,green 40%,green 50%,blue 50%);
            }
            <!--控制得当有点像进度条-->
        
//--------------------------------

//repeating-linear-gradient():重复线性渐变,语法与线性渐变一样
//---------------------------------

//radial-gradient()

           .s{
                background-image: radial-gradient(yellow,green);
                /*基本写法*/
            }
            /*标准写法:三要素:1辐射范围2中心点3颜色起止*/
            .s1{
                /*120px表示辐射范围(半径),at后面跟的属性表示中心点*/
                background-image: radial-gradient(200px at 0 center,yellow,green);
            }
            
//-------------------------------------------

//repeating-radial-gradient():重复径向渐变,语法与径向渐变一样
3.过渡
<!------------------------------------>

<!--简写:transition:property duration timing-function times-->
<!--<' transition-property '>: 检索或设置对象中的参与过渡的属性 -->
<!--<' transition-duration '>: 检索或设置对象过渡的持续时间 -->
<!--<' transition-timing-function '>: 检索或设置对象中过渡的动画类型 -->
<!--<' transition-delay '>: 检索或设置对象延迟过渡的时间 -->

<!--多个属性-->
<!--缩写方式-->
transition: border-color .5s ease-in .1s,
            background-color .5s ease-in .1s,
            color .5s ease-in .1s;
        

<!--拆分方式-->

transition-property: border-color, background-color, color;
transition-duration: .5s, .5s, .5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: .1s, .1s, .1s;

<!--所有属性-->
transition:all 2s linear 1s;
4.转换
//-------------------------------
transform:

2D Transform Functions:
matrix(): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵 
translate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0 
translatex(): 指定对象X轴(水平方向)的平移 
translatey(): 指定对象Y轴(垂直方向)的平移 
rotate(): 指定对象的2D rotation(2D旋转),需先有 <' transform-origin '> 属性的定义 
scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值 
scalex(): 指定对象X轴的(水平方向)缩放 
scaley(): 指定对象Y轴的(垂直方向)缩放 
skew(): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0 
skewx(): 指定对象X轴的(水平方向)扭曲 
skewy(): 指定对象Y轴的(垂直方向)扭曲

3D Transform Functions:
matrix3d(): 以一个4x4矩阵的形式指定一个3D变换 
translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略 
translatez(): 指定对象Z轴的平移 
rotate3d(): 指定对象的3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度,参数不允许省略 
rotatex(): 指定对象在x轴上的旋转角度 
rotatey(): 指定对象在y轴上的旋转角度 
rotatez(): 指定对象在z轴上的旋转角度 
scale3d(): 指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略 
scalez(): 指定对象的z轴缩放 
perspective(): 指定透视距离


//--------------------------------
transform-origin:设置或检索对象以某个原点进行转换,

该属性提供2个参数值。 
如果提供两个,第一个用于横坐标,第二个用于纵坐标。 
如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。 
对应的脚本特性为transformOrigin。



//--------------------------------

perspective:透视,在电脑上相当于到屏幕的距离

//-----------------------------

transfrom-style:flat: 指定子元素位于此元素所在平面内 
                preserve-3d: 指定子元素定位在三维空间内 
                
指定某元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化。

/*1.当该属性值为「preserve-3d」时,元素将会创建局部堆叠上下文。 
2.决定一个变换元素看起来是处在三维空间还是平面内,需要该元素的父元素上定义 
3.<' transform-style '> 属性。 对应的脚本特性为transformStyle。 */

5.六壬神骰

//样式
 <style>
        .box{
            width: 600px;
            height: 600px;
            margin: 100px auto;
            /*border: 1px solid #eee;*/
            font-size: 40px;
            color: white;
            text-align: center;
            line-height: 160px;
            transform-style: preserve-3d;
            perspective: 3000px;
            position: relative;
            transition: all 2s;
            transform: rotateY(45deg) rotateX(45deg);
        }
        .box:hover{
            transform: rotateY(360deg) rotateX(360deg);
        }
        .box>div{
            width: 160px;
            height: 160px;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -80px;
            margin-top: -80px;
        }
        .one{
            background: rgba(186,175,12,0.6);
            transform: translateZ(80px);
        }
        .two{
            background: rgba(12,210,56,0.6);
            transform: translateX(-80px) rotateY(90deg);
        }
        .three{
            background: rgba(182,42,156,0.6);
            transform: translateY(-80px) rotateX(90deg);
        }

        .four{
            background: rgba(12,210,56,0.6);
            transform: translateX(80px) rotateY(-90deg);
        }
        .five{
            background: rgba(182,42,156,0.6);
            transform: translateY(80px) rotateX(-90deg);
        }
        .six{
            background: rgba(12,175,186,0.6);
            transform: translateZ(-80px);
        }
    </style>
//结构
<div class="box">
    <div class="one">洗碗</div>
    <div class="two">拖地</div>
    <div class="three">做饭</div>
    <div class="four">看电视</div>
    <div class="five">买菜</div>
    <div class="six">奖品</div>
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏everhad

ImageView缩放选项

ImageView.ScaleType 将图片边界缩放到所在view边界时的缩放选项。 Options for scaling the bounds of a...

2517
来自专栏Golang语言社区

厚土Go学习笔记 | 24. map字典测试用例(文字出现次数统计)

利用map实现字符串内文字出现次数的统计。 编写一个测试用例,对文字计数函数的功能进行测试。 测试通过,则打印文字出现次数的统计结果 package main ...

42616
来自专栏菩提树下的杨过

Silverlight:利用Panel实现自定义布局

虽然Silverlight提供了几种基本的布局方式,比如Canvas,Grid,StackPanel,Border...,但有时候可能仍然会觉得不够用。 这时候...

2219
来自专栏网络

简单的 canvas 翻角效果

由于工作需求,需要写一个翻角效果: ? demo链接:http://jsbin.com/rereqes。 右上角需要从无的状态撕开一个标记,且有动画过程,上图是...

2300
来自专栏互联网杂技

css中的伪类与伪元素

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。 伪类的种类 ...

4228
来自专栏知无涯

CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

28312
来自专栏程序员互动联盟

网站上的验证码是怎么产生的?

目前,许多网站的会员登录时都要求输入验证码,尽管验证码的形式五花八门,但是所使用的原理基本是一样的,都是生成随机字符串,然后描绘成图片的形式输出。 验证码的...

3649
来自专栏儿童编程

Python的艺术玩法——“孔雀开屏”篇

本文用Python实现一个“孔雀开屏”的效果,Python也可以这么玩。下面是源码,注释里面的是不同画面的执行代码。

2082
来自专栏游戏开发那些事

【python游戏编程之旅】第一篇---初识pygame

本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

1352
来自专栏魂祭心

原 简单图像填充算法

3725

扫码关注云+社区

领取腾讯云代金券