㈠Animation&Transition&gradients 代码示例

圆形，渐变颜色，旋转，当鼠标放在圆上，圆旋转变大

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>复合属性</title>

<style>

div{

     background-image:repeating-linear-gradient(red, yellow 10%, green 20%);

     width:200px;

     height:200px;

     border-radius:50%;

     animation:dh 6s linear infinite;

     transition:width 6s linear,height 6s linear

}

@keyframes dh{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

div:hover{

           width:600px;

           height:600px;

       }

</style>

</head>

<body>

    <div></div>

</body>

</html>

效果图：

初始状态：

 鼠标悬浮后：

 

㈡transition定义多个属性

由绿色正方形逐渐变大为红色圆形

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>transition定义多个属性</title>

<style>

div{

    background-color:#0F0;

    width:200px;

    height:200px;

    transition:background-color 5s,width 5s,height 5s,border-radius 5s;

}

div:hover{

           background-color:#F00;

           width:500px;

           height:500px;

           border-radius:50%;

       }

</style>

</head>

<body>

    <div></div>

</body>

</html>

效果图：

 

 

 

 

 

㈢js实现旋转和控制及交替旋转

<html>

<meta charset="utf-8">

<style>

div{

    background: repeating-linear-gradient(45deg,red,yellow 20%);

    width: 200px;

    height: 200px;

    border-radius: 50%;

    text-align: center;

    line-height: 200px;

    animation:animation1 6s infinite;

}

@keyframes animation1{

           from{font-size: 0px;color:black;}

           to{font-size: 80px;color:white;}

       }

</style>

<script>

    var x=0;

    var timerid;

    var fx;

    function start(){

        clearInterval(timerid)

        timerid=setInterval(function(){

        if(x==0)

          fx=true

        if(fx==true)

          x=x+1;

        if(x==360)

          fx=false

        if(fx==false)

           x=x-1

        document.getElementById("xz").style.transform='rotate(' + x + 'deg)';

    },10)

}

</script>

<body>

<div id="xz" onmouseover="clearInterval(timerid)" onmouseout="start()">战</div>

<button onclick="start()">开始</button>

<button onclick="clearInterval(timerid)">停止</button>

</body>

</html>

效果图：

 

 ㈣semicirlcle(四个圆)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圆</title>

<style>

#sby{

     background-color:#0F0;

     width:200px;

     height:100px;

     border-radius:200px 200px 0 0;

     float:left;

    }

#yby{

     background-color:#0F0;

     width:100px;

     height:200px;

     border-radius:0 100px 100px 0;

     float:left;

}

#xby{

      background-color:#0F0;

      width:200px;

      height:100px;

      border-radius:0 0 200px 200px;

      float:left;

}

#zby{

     background-color:#0F0;

     width:100px;

     height:200px;

     border-radius:100px 0 0 100px;

     float:left;

}

</style>

</head>

<body>

<div id="sby"></div>

<div id="yby"></div>

<div id="xby"></div>

<div id="zby"></div>

</body>

</html>

效果图：

 

㈤JS测试box-sizing属性 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

<style>

div{

    background-color:red;

    width:200px;

    height:200px;

    border:solid 1px;

    padding:10px;

}

img{

     width:200px;

     height:200px;

    }

</style>

</head>

<body>

<div id="cs">

<img src="ym.jpg">

</div>

<hr>

<button onclick="document.getElementById('cs').style.boxSizing='content-box'">content-box</button>

<button onclick="document.getElementById('cs').style.boxSizing='border-box'">border-box</button>

</body>

</html>

<style>

效果图：

 

 

㈥clearfix代码示例

<style>

.container{

            width:500px;

            background-color:black;

        }

.container:after{

                  visibility: hidden;

                  display: block;

                  font-size: 0;

                  content: "";

                  clear: both;

                  height: 0;

              }

.left{

       width:200px;

       height:300px;

       background-color:red;

       float: left;

    }

.right{

        width: 200px;

        height: 200px;

        background-color: green;

        float: right;

    }

.footer{

         width: 400px;

         height: 50px;

         background-color: blue;

     }

</style>

<div class="container">

  <div class="left">left</div>

  <div class="right">right</div>

</div>

<div class="footer">footer</div>

效果图：

 

㈦taiji-aimation（太极图动画）

运用渐变和伪元素制作太极图，并转动起来

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>运用渐变和伪元素制作太极图</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        body{

            position:relative;

            background-color: #555;

        }

        div{

            width: 400px;

            height: 400px;

            background-image: linear-gradient(90deg,pink 50%,skyblue 50%);

            border-radius:50%;

            animation:zhuan 2s infinite linear;

        }

        div:before{

            content:"";

            width: 80px;

            height: 80px;

            background-color: pink;

            border:60px solid skyblue;

            position:absolute;

            left:100px;

            border-radius:50%;

            z-index:11;

        }

        div:after{

            content:"";

            width: 80px;

            height: 80px;

            background-color:skyblue;

            border:60px solid pink;

            position:absolute;

            left:100px;

            top:200px;

            border-radius:50%;

            z-index:12;

        }

        @keyframes zhuan{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

    </style>

</head>

<body>

    <div></div>

</body>

</html>

效果图：

 

 

㈧使用图片进行伪元素练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用图片进行伪元素练习</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        div{

            width: 550px;

            height: 700px;

            background:url(xz0.jpg);

            background-size: cover;

            position: absolute;left:500px;

        }

        div:before{

            content: " ";

            width: 550px;

            height: 700px;

            background:url(xz1.jpg);

            position: absolute;left: -500px;

        }

        div:after{

            content: " ";

            width: 550px;

            height: 700px;

            background:url(xz2.jpg);

            position: absolute;left: 500px;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

效果图：

 

由衷感谢：李国锋老师的代码示例

CSS的Animation&Transition&gradients属性的更多相关文章

  1. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  2. CSS动画 animation与transition

    一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...

  3. Css 特性之 transition和transform

    CSS 有一些新的属性,可以简化代码的书写,用简单的代码就可以实现复杂的变化.不用像 js 那样,需要写很多代码 这里主要介绍三个属性:transition ,transform,以及translat ...

  4. CSS:word-wrap/overflow/transition

    一 自动换行:一个div有固定宽高,如果其内容很长,必须两行以上才能显示完整的时候,有两种情况要留意 1 默认如果其内容都是中文,那么内容是可以自适应,而不会溢出div 2 如果内容除了中文之外,还有 ...

  5. css中animation和@keyframes 动画

    Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...

  6. Android动画效果之Property Animation进阶（属性动画）

    前言: 前面初步认识了Android的Property Animation(属性动画)Android动画效果之初识Property Animation(属性动画)(三),并且利用属性动画简单了补间动画 ...

  7. DIV+CSS：Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  8. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  9. CSS和JavaScript标签style属性对照表

    CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,后面字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border ...

随机推荐

  1. adb工具介绍与安装

    一天笑嘻嘻是一名测试人员,想了解Android的测试方法,于是,就找到了小测试. 笑嘻嘻:身为一名测试人员需要了解ADB的哪些内容? 小测试:了解原理和简单的命令使用就可以了. 笑嘻嘻:你有毒啊,都了 ...

  2. HDU 1231 最大连续子序列 （动态规划）

    最大连续子序列 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  3. [转帖]英特尔的 ME 或侵犯 Minix3 的自由软件许可证

    英特尔的 ME 或侵犯 Minix3 的自由软件许可证 [日期:2017-12-11] 来源:Linux公社  作者:非非然 [字体:大 中 小] https://www.linuxidc.com/L ...

  4. Oracle块，区，段

    数据块(Block) 数据块Block是Oracle存储数据信息的最小单位.注意,这里说的是Oracle环境下的最小单位.Oracle也就是通过数据块来屏蔽不同操作系统存储结构的差异.无论是Windo ...

  5. 平衡树（Splay、fhq Treap）

    Splay Splay(伸展树)是一种二叉搜索树. 其复杂度为均摊\(O(n\log n)\),所以并不可以可持久化. Splay的核心操作有两个:rotate和splay. pushup: 上传信息 ...

  6. 字符串转数组(php版)

    思路: 1.判断当前传来的值是否为数组 2.若不是现将传来的值转换为字符串类型 3.判断当前值是否为空 4.若不为空,采用正则进行匹配,如下图 preg_match('/^{.*?}$/', $str ...

  7. CSS3鼠标悬停翻转按钮

    在线演示 本地下载

  8. phpmyadmin出现空密码登录被禁止 (参见 允许空密码)的解决办法

    在Windows或者Linux下mysql安装后默认的密码为空,又当我们又安装了mysql的管理工具phpmyadmin后登陆时出现“空密码登陆呗禁止(参见允许密码为空)”.不能登录成功        ...

  9. 第五篇 jQuery特效与动画

    5.1 show()与hide()方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  10. 机器学习-SVM-核函数

    SVM-核函数 在研究了一天的SVM核函数后,我顿悟了一个道理: 研究和使用核函数的人,从一开始的目的就是把data分开而已.高维和映射,都是原来解释操作合理性的,但根本不是进行这一操作的原因 我为什 ...