仿QQ概念版的登陆界面

先上图

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

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

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

</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>

<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>

仿QQ概念版的登陆界面相关推荐

仿果壳网手机登陆界面源代码
这是效果代码如下所示: <head><title>仿果壳网html5手机登陆界面源代码模板-懒人模板[http://www.lanrenmb.com/zt/]</tit ...
c#开发的漂亮高仿QQ打包安装程序界面
c#开发的触摸屏打包安装程序:仿QQ登录密码输入框.自定义软件键盘:c#开发的仿QQ2013界面用户美化打包程序:整个程序使用vs2010开发:支持所有程序打包安装:源代码开放,可自己修改效果图如下: ...
复习Java第二个项目仿QQ聊天系统 01（界面部分） Java面试题Redis的过期策略和内存淘汰策略生活【记录一个咸鱼大学生三个月的奋进生活】023
记录一个咸鱼大学生三个月的奋进生活023 复习Java(仿QQ聊天系统01界面部分) 设置背景(ImgPanel)类登录界面(LoginFrame)类注册界面(RegisterFrame)类好友 ...
高仿QQ运动的周报界面
这次高仿的是QQ运动的周报界面的网图.这个控件刚开始的时候以为代码量不大,没想到一路下来界面代码在加上动画代码还是蛮多的.好了老规矩先上图: 效果还是和qq的才不多吧. 1. 首先我把各个变量都贴出来 ...
Android仿QQ、微信聊天界面长按提示框效果
最近在工作项目中要实现一个长按提示 "复制" 的功能,类似于QQ.微信聊天界面长按提示框效果,本来想偷懒在网上找个开源的项目用,但是看了好几个都不是很满意,所以就打算按照自己的思路 ...
仿新浪微博2014之登陆界面一（sqlite操作）
上一贴介绍了简单的欢迎界面后,我们进入了登陆界面的设计由于我使用的是新浪微博的第三方授权登陆,所以并不需要账号输入框和密码输入框登陆界面有一个新浪微博logo(imageview).用户头像(im ...
❤️Java实现模拟QQ(消息通信+登陆界面美化)❤️
一.登陆界面的实现登陆界面主要使用了JFrame,以及相关的一些组件,并且在界面中加上监听登陆界面效果图登陆界面代码Login类 package com.lding.login;import c ...
C#\WPF高仿QQ音乐V12.8界面篇《2》
动态效果图获取源码通过关注个人公众号:BigBearIT,如下通过后台回复关键词:WPF高仿QQ音乐源码即可获得源码下载地址. 后续版本更新后会在公众号通知 /**************** ...
仿 qq登录界面 php,js仿腾讯QQ的web登陆界面
用了腾讯QQ也有将近十年了,今天心血来潮想模仿腾讯QQ的登陆面板做一个web版的登陆面板,然后参考了一些代码,自己模仿,学写了一个. 效果如下: 其中还实现了拖动面板,选择状态的效果下面是具体代码: ...

仿QQ概念版的登陆界面

仿QQ概念版的登陆界面相关推荐

最新文章

热门文章