CodemySite_Web development

It's a easier plugin to show button hovering animation. The important first step is to link the bttn.css file. I use the cdn link here.  https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.min.css HTML which I divided into five parts shows lg,xs,md,sm and color. CSS styles all the button in the center. Button style classes bttn-simple bttn-bordered bttn-minimal bttn-stretch bttn-jelly bttn-gradient bttn-fill bttn-material-circle bttn-material-flat bttn-pill bttn-float bttn-unite bttn-slant   (Beta) Button sizes bttn-xs bttn-sm bttn-md bttn-lg Button Colors bttn-default bttn-primary bttn-warning bttn-success bttn-danger bttn-royal Button helper classes bttn-block bttn-no-outline  (Don't show outline when navigating with keyboard/interact using mouse or touch) github  https://github.com/ganapativs/bttn.css My demo codepen: See the Pen bttn.css by Yifang Di ( @diyifang ) on CodePen . ...

The fancy plugin which can make website active is easy to use. I insert the different images,but you can instead by anything you want,like words or vectors. Make sure you link the stylesheet and script of AOS, and I also link the different font from Google Fonts. Html contains ten divs which have same class name and different data-aos, which manipulate the animation style of each image. All you have to do is to add  data-aos  attribute to html element, like so: < div data-aos = " animation_name " > There are serveral predefined animations you can use already: Fade animations: fade fade-up fade-down fade-left fade-right fade-up-right fade-up-left fade-down-right fade-down-left Flip animations: flip-up flip-down flip-left flip-right Slide animations: slide-up slide-down slide-left slide-right Zoom animations: zoom-in zoom-in-up zoom-in-down zoom-in-left zoom-in-right zoom-out zoom-out-up zoom-out-down...

According to the interactive needs, almost every website contains the function called Contact for leaving a message or showing the other contact ways,like phone number,address. I made the two simple forms which contain basic information,such as name,email and messages. First one has label and a select function. Second one is pure form but with icon included. 1.Contact Form There are four labels inside the form and a button for submitting. The input inside the label for each, and careful the attrabute of label for should be same with the input name. I set first name input autofocus to lead user to fill in the form. The select tag contains options as many as you want,which you can choose to collect the subject. The above style is basics,like the font-size and font-family,and with a images background.  This example I got the words in the center look. With transition, the button got transition smoothly. See the Pen Contact form by Yifang Di ( @diyifang...

I've been seen a lot of websites built by fullPage.js,even the Apple's iphone official page. The javascript designed much mordern and concise ,which can be used everywhere especially with animation(but I don't talk about in this article). The official gitHub from  https://github.com/alvarotrigo/fullPage.js The demo I made can be dowloaded from  here 1.including the files in the head. <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". --> < script src = " vendors/jquery.easings.min.js " ></ script > <!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` --> < script type = " text/javascript " src = " vendors/scrolloverflow.min.js " ></ script > This is how I organized my fold.  ...

关于fullpage Fullpage.js是一个基于jquery的插件，他可以非常方便、很轻松的制作一个全屏网站： 1.支持鼠标滚动 2.多个回调函数 3.支持手机、平板等触摸事件 4.支持css3动画 5.支持窗口缩放 6.窗口缩放时自动调整 7.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等 Git.hub上的fullpage主页： https://github.com/alvarotrigo/fullPage.js How to start: 需要引入jquery1.6以上的任意版本 引入fullpage： <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css "> <script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js "></script> <script src=" https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/vendors/jquery.easings.min.js "></script> <script src=" https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js "></script> 基本的页面结构： <div id="fullpage"> <div class="section">something</div> <div class="section">something</div> <div class="section...

According to this demo,I figure out two questions.First one is how to creat the plus icon using  pseudo element.Second one is how to change the plus icon color and border color simultaneously,as we known, the basic way is seperately setting the three parts hover stylings. In HTML section,it's basic to build a div classed add without content. In CSS section, there are some points to pay attention. 1.display:inline-block can be contained the plus in the middle of border. 2.color:#ccc is the basic color which is the same one of plus icon and border. 3.transition can change the color for both, because we didn't write down the border color. The main point is the color and border-color is the same,when you didn't specific the border-color. 4.the .add div is the relative,and the :before and :after are absolute which can bulid a crossing.  5.calculating the width and height for plus icon,and moving to shape what we need. 6.when we hover the .add,the only way...