㈠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. sqlalchemy的常用字段

    #encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,\ Float,Boolean,DECIMAL, ...

  2. mysql中的安全模式（sql_safe_updates）

    什么是安全模式 在mysql中,如果在update和delete没有加上where条件,数据将会全部修改.不只是初识mysql的开发者会遇到这个问题,工作有一定经验的工程师难免也会忘记写入where条 ...

  3. myeclipse显示db-brower

    myeclipse显示db-brower 这东西怎么调出来? windows->show view->other->db borwser

  4. 【pytorch】学习笔记（二）- Variable

    [pytorch]学习笔记(二)- Variable 学习链接自莫烦python 什么是Variable Variable就好像一个篮子,里面装着鸡蛋(Torch 的 Tensor),里面的鸡蛋数不断 ...

  5. Python基础字符串前加u,r,b,f含义

    1.字符串前加 u 例:u"我是含有中文字符组成的字符串." 作用: 后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格式问题,导致再次使用时 ...

  6. 2019最新的IDEA的激活方式！！！

    第一步: 安装IDEAhttps://www.jetbrains.com/idea/ 选择要下载的版本Ultimate 第二步: 下载破解补丁链接:https://pan.baidu.com/s/1j ...

  7. snappy-java两种压缩方式的区别

    1.Snappy-java项目地址 https://github.com/xerial/snappy-java 2.Snappy-java两种压缩方式 使用Snappy.compress进行压缩 St ...

  8. Altium Designer16 如何分别导出TOP层和BOTTOM层

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 作者:struct_mooc 博客地址:https://www.cnblogs.com/stru ...

  9. kubeDNS workflow(service registration and discovery)

    Service discovery In k8s, we usually will more than make an application instance, and also the corre ...

  10. Delphi RadioGroup 组件