css animate_transitions.css

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css animate_transitions.css相关的知识，希望对你有一定的参考价值。

$(function () {
    $('#button').click( function () {
    
        // Add a call to animate to change the background to
        // the color #d4ecf8.
        $('#writing').animate({ backgroundColor: "#d4ecf8" },1000);
    });
});
<html>
<head>
  <title>Animations</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>  <script src="script.js"></script>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>
  <div id="button">Change</div>
  <div id="writing" class="text">This is the text that changes!</div>
</body>
</html>

#button {
    background:#f8f8f8;
    width:100px;
    padding:3pt;
    text-align:center;
    font-weight:bold;
    -moz-border-radius:3pt;
    -webkit-border-radius:3pt;
    border-radius:3pt;
    border: 2px #EEE solid;
}
.text {
    margin: 4pt;
    text-align:center;
    width: 200px;
    height: 100px;
    background-color:#f8e6d4;
}

以上是关于css animate_transitions.css的主要内容，如果未能解决你的问题，请参考以下文章

css [css：fadeout / fadein] css示例。 #css

css基础 CSS 组合选择符CSS 伪类CSS 伪元素

css 深度提示#css中的css base builder CSS

css基础 CSS 媒体类型CSS 属性 选择器CSS 表单CSS 计数器

什么是css

测开之CSS・第一篇《CSS语法基础》