仿QQ概念版的登陆界面

先上图

实现了太阳的转动，云的飘动，叶子的摆动，以及彩虹由左到右的出现。

代码很简单，动画直接看代码，很好理解

以下是全部代码（表示不会上传文件啊啊啊啊啊~~）

<Window x:Class="QICQ.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="QICQ" Height="440" Background="{x:Null}" WindowStyle="None" WindowStartupLocation="CenterScreen" AllowsTransparency="True" Width="400"
        MouseLeftButtonDown="Window_MouseLeftButtonDown">
    <Window.Resources>
        <Storyboard x:Key="sunStory" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="img_sun" 
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:10" Value="360"/>


            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="rainbowStory" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="img_rainbow" 
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-180"/>
                <EasingDoubleKeyFrame KeyTime="0:0:8" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:10" Value="0"/>


            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="img_rainbow" 
                 Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.2"/>
                <EasingDoubleKeyFrame KeyTime="0:0:6" Value="1.0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:8" Value="0.9"/>
                <EasingDoubleKeyFrame KeyTime="0:0:10" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="leaveStory" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="img_leave1" 
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-8"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:6" Value="6"/>
                <EasingDoubleKeyFrame KeyTime="0:0:8" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="img_leave2" 
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-8"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:6" Value="6"/>
                <EasingDoubleKeyFrame KeyTime="0:0:8" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="cloudStory" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="img_cloud1" 
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="20"></EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:10" Value="210"></EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="img_cloud2" 
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="20"></EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:10" Value="210"></EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="img_cloud1" 
                 Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.2"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:8" Value="0.9"/>
                <EasingDoubleKeyFrame KeyTime="0:0:10" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="img_cloud2" 
                 Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.2"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:8" Value="0.9"/>
                <EasingDoubleKeyFrame KeyTime="0:0:10" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <!--kaiqidonghua-->
    <Window.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource sunStory}"></BeginStoryboard>
            <BeginStoryboard Storyboard="{StaticResource rainbowStory}"></BeginStoryboard>
            <BeginStoryboard Storyboard="{StaticResource leaveStory}"></BeginStoryboard>
            <BeginStoryboard Storyboard="{StaticResource cloudStory}"></BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <Canvas Height="300" Width="380" Margin="0,130">
        <Image Source="Image\rainbow2.png" Stretch="Fill" x:Name="img_rainbow" Panel.ZIndex="-1" Height="200" Width="350" Canvas.Left="20" Canvas.Top="-110"
               RenderTransformOrigin="0.5,0.9">
            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform></RotateTransform>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image Source="Image\sun.png" x:Name="img_sun" Panel.ZIndex="-2" Height="100" Width="100" Canvas.Left="-10" Canvas.Top="-15"
               RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform></RotateTransform>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image Source="Image\cloud.png" Panel.ZIndex="0" x:Name="img_cloud1" Height="100" Width="100" Canvas.Left="52" Canvas.Top="-25">
            <Image.RenderTransform>
                <TransformGroup>
                    <TranslateTransform></TranslateTransform>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image Source="Image\cloud.png"  x:Name="img_cloud2" Panel.ZIndex="-4" Height="40" Width="50" Canvas.Left="-15" Canvas.Top="-5">
            <Image.RenderTransform>
                <TransformGroup>
                    <TranslateTransform></TranslateTransform>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image Source="Image\ye.png" Panel.ZIndex="0" Height="80" Width="360" Stretch="Fill" Canvas.Left="15" Canvas.Top="15"></Image>
        <Image Source="Image\smallleave.png" x:Name="img_leave1" Height="45" Width="40" Stretch="Fill" Canvas.Left="82" Canvas.Top="52"
                RenderTransformOrigin="0.5,-1.1">
            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform></RotateTransform>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image Source="Image\smallleave.png" x:Name="img_leave2" Height="65" Width="60" Stretch="Fill" Canvas.Left="136" Canvas.Top="64"
               RenderTransformOrigin="0.5,-0.9">
            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform></RotateTransform>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image Source="Image\close.png" Panel.ZIndex="2" x:Name="img_close" Height="20" Width="20" Margin="336,6,0,150" Opacity="0.8" Canvas.Top="57" Canvas.Left="9"
               MouseLeftButtonDown="img_close_MouseLeftButtonDown" MouseEnter="img_close_MouseEnter" MouseLeave="img_MouseLeave"></Image>
        <Image Source="Image\mini.png" Panel.ZIndex="2" x:Name="img_mini" Height="22" Width="22" Margin="290,6,20,150" Opacity="0.8" Canvas.Top="56" Canvas.Left="25"
               MouseLeftButtonDown="img_close_MouseLeftButtonDown" MouseEnter="img_close_MouseEnter" MouseLeave="img_MouseLeave"></Image>
        <Border Height="240" Panel.ZIndex="-1" Width="380" Canvas.Top="40"  Background="MediumAquamarine" CornerRadius="18">
            <Grid Height="200" Width="360">
                <Label Height="35" Width="390" Margin="-10,-5,-10,170" Background="GreenYellow" Content="QICQ概念版" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" FontFamily="PMingLiU" FontStretch="ExtraExpanded" FontStyle="Normal" FontWeight="Bold" FontSize="14"></Label>
                <Label Height="25" Width="50" Content="账号 :" Margin="45,33,265,142" Foreground="WhiteSmoke"></Label>
                <Border Height="25" x:Name="border_account" Background="WhiteSmoke" BorderThickness="1" BorderBrush="Yellow" Margin="42,54,68,121" CornerRadius="8" ></Border>
                <TextBox Height="25" x:Name="tb_account" Margin="48,57,68,118" Background="{x:Null}" BorderThickness="0" MouseEnter="TextBox_MouseEnter" MouseLeave="TextBox_MouseLeave" FontSize="13" ></TextBox>
                <Label Height="25" Width="50" Content="密码 :" Margin="45,84,265,91" Foreground="WhiteSmoke"></Label>
                <Border Height="25" x:Name="border_password" Background="WhiteSmoke" BorderBrush="Wheat" BorderThickness="2" CornerRadius="8" Margin="42,105,68,70" ></Border>
                <TextBox Height="25" x:Name="tb_password" Margin="48,108,0,67" Background="{x:Null}" BorderThickness="0" MouseEnter="TextBox_MouseEnter" MouseLeave="TextBox_MouseLeave" FontSize="13" AcceptsTab="False" HorizontalAlignment="Left" Width="244"></TextBox>
                <CheckBox Height="20" Width="70" Content="记住密码"  Foreground="WhiteSmoke" Margin="218,142,72,38" IsChecked="True" Padding="2,1,0,0" OverridesDefaultStyle="False" SnapsToDevicePixels="False"></CheckBox>
                <Button Height="22" Width="70" Margin="215,168,75,10" Content="登  录" Click="Button_Click"></Button>
                <Button Height="22" Width="70" Margin="47,167,0,11" Content="新用户" Click="Button_Click" HorizontalAlignment="Left"></Button>
                <Label Height="20" Width="70" Background="{x:Null}" Margin="286,109,4,71" Content="?忘记密码" FontSize="10" FontFamily="Arial" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Foreground="#FFF51F61"></Label>
                <Label Height="25" Width="210" Margin="82,198,68,-23" Foreground="White" Content="CopyRight @ 2013-2015 Design by WFF" FontSize="10" FontFamily="Arial"></Label>
            </Grid>
        </Border>
    </Canvas>
</Window>