css小動畫：圓形1s內從小變大隨時間漸變

時間 2019-11-21

標籤 css 動畫圓形 1s 從小變大隨時漸變欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .yxdh{            width:200px;            height:200px;            border: 1px solid red;            background-color: red;            transform:translate(400px,0px);            -webkit-transform:translate(400px,0px);            border-radius: 100px;            -moz-border-radius: 100px;            -webkit-border-radius: 100px;            animation-name:dh;            animation-duration: 1s;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            -webkit-animation-name:dh;            -webkit-animation-duration: 1s;            -webkit-animation-iteration-count: infinite;            -webkit-animation-timing-function: ease-in-out;            margin:100px auto;        }        @keyframes dh {            0%{                transform: scale(0);                opacity:100;               -webkit-transform: scale(0);            }            100%{                transform: scale(1);                opacity: 0;                -webkit-transform: scale(1);            }        }        @-webkit-keyframes dh {            0%{                transform: scale(0);                opacity: 100;                -webkit-transform: scale(0);            }            100%{                transform: scale(1);                opacity: 0;                -webkit-transform: scale(1);            }        }    </style></head><body> <div class="yxdh"></div></body></html>

相關標籤/搜索